element 框架源码阅读

命令：

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）

1. packages/theme-chalk/src/icon.scss（ui组件目录） 放置了icon的class。
2. 利用postcss 将该文件解析成ast，并且将.el-icon-xxx:before的类型写入到examples/icon.json（admin后台目录）
   文件中。
3. 最终生成的是一个放置所有icon类名的数组文件。
   

生成ui组件应用导出入口文件（node build/bin/build-entry.js）

1. 组件分为两种
   1.1 函数式调用组件（loading、Notification、InfiniteScroll）
   1.2 模板ui组件（需要html模板中声明的普通ui组件）
2. 组件注册
   2.1. 模板ui组件会自动注册为全局组件
   2.2. 函数式组件则挂在到Vue到原型上提供函数式调用

i18n配置

1. 导出国际化指定语言方法（use）：传入组件的语言配置
2. 导出多语言指定方法（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）

1. examples/pages/template 下是tpl格式的后台模板文件，里面使用<%= ${ key } > 作为语言文案的枚举占位符
2. 通过模板文件，批量写入生成对应语言的组件

写入生成后的目录如下，目前支持四种语言：

写入完整版本列表文件,即后台文档版本列表（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格式输出，并且将到处导出的全局变量修改为自定义变量