组件库的定制构建


使用

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

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

nowa lib

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

配置

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

一个典型的配置如下:

abc.json

{
  "options": {
    "libraries": {
      "Uxcore": {
        "output": "uxcore.js",
        "mappings": {
          "Button": "uxcore-button@~0.4.0"
        }
      }
    }
  }
}

其中

  • Uxcore 是构建出的库对外暴露的全局变量
  • output 定义输出的文件名,输出文件会放在 --dist 配置的目录下,另外也会拷贝一份到 src/lib 目录
  • mappings 定义了全局变量下各个属性和组件的对应关系,其中组件可带上语义化版本号(如果不带的话默认取最新版)

对于以上的配置,nowa lib 的执行过程

  • 首先安装组件依赖
npm install uxcore-button@~0.4.0 -d
  • 然后生成临时文件
window['Uxcore'] = {
  Button: require('uxcore-button')
};
  • 以这份临时文件为构建入口(entry)进行 webpack 构建,输出 uxcore.js
  • 对输出文件进行压缩,生成 uxcore.min.js
  • 拷贝 uxcore.jsuxcore.min.jssrc/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

results matching ""

    No results matching ""