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组件)










