浅谈Vue CLI 3结合Lerna进行UI框架设计

2020-06-12 21:23:32易采站长站整理
等脚本。

npm run dist

Element
构建相关的npm脚本繁多,但是 总体构建脚本
dist

“dist”: “npm run clean && npm run build:file && npm run lint && webpack –config build/webpack.conf.js && webpack –config build/webpack.common.js && webpack –config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme”

&&
是继发执行,只有当前任务成功,才能执行下一个任务。

总体构建脚本包含了以下按顺序执行的脚本命令

npm run clean – 清除构建文件夹lib
npm run build:file – 其中的node build/bin/build-entry.js 生成Webpack构建入口
npm run lint – 执行eslint校验
webpack –config build/webpack.conf.js – 构建umd总文件
webpack –config build/webpack.common.js – 构建commonjs2总文件
webpack –config build/webpack.component.js – 构建commonjs2组件(提供按需引入)
npm run build:utils – 构建commonjs的utils(供commonjs2总文件、commonjs2组件以及业务使用)
npm run build:umd – 构建umd语言包
npm run build:theme – 构建css样式

如果对于对于

umd
commonjs2
amd
等模块定义不是特别清晰,可参考Webpack文档模块定义系统。

执行

npm run dist
后会在当前根目录生成新的
lib
文件夹,包含以下构建内容:


lib
├── directives # commonjs指令(这里归为utils)
├── locale # commonjs国际化(commonjs语言包和API)
├── mixins # commonjs mixins(这里归为utils)
├── theme-chalk # css 样式文件
├── transitions# commonjs transitions(这里归为utils)
├── umd # umd语言包
├── utils
├── alert.js # commonjs组件
├── aside.js
├── ...
├── element-ui.common.js # commonjs2总文件
├── ...
├── index.js # umd总文件
├── ...

从Element官方文档的使用指南结合

lib
可以看出,
Element
为我们提供了以下能力:

1、CDN引入(umd 总文件)
2、npm包完整引入(抛出commonjs2总文件)
3、按需引入(抛出commonjs2的所有UI组件)