组件库的定制构建

使用

可以通过 nowa lib 命令来完成组件库的定制构建。

如果提示找不到 lib 命令，请通过 nowa install lib 来安装

  1. nowa lib

该命令必须使用在通过 nowa init 创建的项目中，请在项目根目录下执行。

组件库的定制构建 - 图1

配置

nowa lib 会读取 abc.json 中的 libraries 参数，按配置构建出所有的依赖库。

一个典型的配置如下：

abc.json

  1. {
  2.   "options": {
  3.     "libraries": {
  4.       "Uxcore": {
  5.         "output": "uxcore.js",
  6.         "mappings": {
  7.           "Button": "uxcore-button@~0.4.0"
  8.         }
  9.       }
  10.     }
  11.   }
  12. }

其中

  • Uxcore 是构建出的库对外暴露的全局变量
  • output 定义输出的文件名，输出文件会放在 —dist 配置的目录下，另外也会拷贝一份到 src/lib 目录

  • mappings 定义了全局变量下各个属性和组件的对应关系，其中组件可带上语义化版本号（如果不带的话默认取最新版）对于以上的配置，nowa lib 的执行过程

  • 首先安装组件依赖

  1. npm install uxcore-button@~0.4.0 -d
  • 然后生成临时文件
  1. window['Uxcore'] = {
  2.   Button: require('uxcore-button')
  3. };
  • 以这份临时文件为构建入口（entry）进行 webpack 构建，输出 uxcore.js
  • 对输出文件进行压缩，生成 uxcore.min.js
  • 拷贝 uxcore.js 和 uxcore.min.js 到 src/lib 目录（为避免 dist 目录冲突，一般会把 dist 目录移出版本管理，所以把 src/lib 目录拿来用于存储依赖库文件）

参数

nowa lib 接受以下候选参数：

  • -d, —dist <dir> 输出代码目录，默认指向 dist
  • -o, —loose 使用 babel es2015 的宽松模式来做代码转换
  • -c, —keepconsole 保留源代码中的 console.log，默认会删除
  • —skipminify 跳过压缩任务，默认会进行代码压缩
  • —libraries 依赖库映射配置
  • —skipinstall 跳过安装（将使用 node_modules 中已安装的组件），默认为 false
  • —npm <npm> 安装使用的 npm，默认 npm
  • —polyfill 引入 babel 的 polyfill，可直接使用 Object.assign 等类方法和 Map、Set、Promise 等类，默认为 false