命令:
build:file
"node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"
icon文件生成(node build/bin/iconInit.js)
- packages/theme-chalk/src/icon.scss(ui组件目录) 放置了icon的class。
- 利用postcss 将该文件解析成ast,并且将.el-icon-xxx:before的类型写入到examples/icon.json(admin后台目录)
文件中。- 最终生成的是一个放置所有icon类名的数组文件。
生成ui组件应用导出入口文件(node build/bin/build-entry.js)
- 组件分为两种
1.1 函数式调用组件(loading、Notification、InfiniteScroll)
1.2 模板ui组件(需要html模板中声明的普通ui组件)- 组件注册
2.1. 模板ui组件会自动注册为全局组件
2.2. 函数式组件则挂在到Vue到原型上提供函数式调用
i18n配置
- 导出国际化指定语言方法(use):传入组件的语言配置
- 导出多语言指定方法(i18n):自定义i18n的t方法,兼容应用与element使用了不同版本的i18n插件场景,。如果没传入,则使用默认的i18nHandler 方法,会Vue实例原型获取t方法,有的话合并将element组件的语言文件配置与应用的语言文件合并。如果Vue实例没有$t,则通过自己实现获取对应语言下的文案。
生成后到文件如下:
export default {
version: '2.15.7',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
...所有ui组件
}
通过admin组件模板生成对应的不同语言组件(node build/bin/i18n.js)
- examples/pages/template 下是tpl格式的后台模板文件,里面使用<%= ${ key } > 作为语言文案的枚举占位符
- 通过模板文件,批量写入生成对应语言的组件
写入生成后的目录如下,目前支持四种语言:
写入完整版本列表文件,即后台文档版本列表(node build/bin/version.js)
build:theme
命令: “node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk”
node build/bin/gen-cssfile: 将所有组件的scss文件全量导入,生成index.scss文件
gulp build --gulpfile packages/theme-chalk/gulpfile.js: 将packages/theme-chalk 下所有组件的scss 文件与fonts文件编译压缩,放到packages/theme-chalk/lib 目录下
cp-cli packages/theme-chalk/lib lib/theme-chalk: 复制packages/theme-chalk/lib 目录到lib/theme-chalk 目录下
build:utils
命令:cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js
作用:将组件与公共方法用babel 编译后打包到 lib 目录中。为什么这里要单独使用babel 打包呢?因为在打包commonJs 全量包和按需引入包时,会重复打包资源、无法共用模块。这里打包的时候在webpack 中externals 配置中过滤了这些公用的模块,并且将原来引用方法的路径修改为babel 打包后的路径。
例:忽略element-ui/packages/pagination 这个文件的打包,直接在读取的时候到element-ui/lib/pagination模块下查找
build:umd
命令:“node build/bin/build-locale.js” 。
作用: 通过babel打包所有组件的语言文件为umd格式输出,并且将到处导出的全局变量修改为自定义变量