webpack --config build/webpack.component.js 脚本用于构建commonjs2的UI组件（提供按需引入功能），执行该脚本最终会在 lib 下生成所有 Element 支持的UI组件（同时这些文件也会被 element-ui.common.js 总入口文件引用）：
lib ├── alert.js # commonjs 组件 ├── aside.js ├── button.js ├── ...
查看 build/webpack.component.js 配置：
// ...忽略 const Components = require('../components.json'); // Components是所有组件的构建入口列表 // { // "pagination": "./packages/pagination/index.js", // ... // "timeline-item": "./packages/timeline-item/index.js" // } const webpackConfig = { mode: 'production', // 多入口 entry: Components, output: { path: path.resolve(process.cwd(), './lib'), publicPath: '/dist/', filename: '[name].js', chunkFilename: '[id].js', libraryTarget: 'commonjs2' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: config.alias, modules: ['node_modules'] }, // 排除其他UI组件、支持国际化、utils的源码，这些源码会额外构建 externals: config.externals, }, // ...忽略 };
构建单个组件和构建总体入口文件 element-ui.common.js 的Webpack配置类似，需要将 utils 、 locale 以及其他一些依赖排除。
npm run build:utils
build:utils 脚本主要用于构建commonjs的 utils （提供国际化以及 utils 功能）：
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
可以发现该命令并不是通过Webpack进行多文件构建，而是通过Babel直接进行转义处理（Webpack构建会产生额外的Webpack代码，并且配置繁琐，Babel转义处理构建的代码非常干净），将 src 目录下除了Webpack构建入口文件 src/index.js 以外的所有其他文件进行转义处理。执行该脚本最终会在 lib 下生成所有的 utils 文件：
lib ├── directives # commonjs 指令 ├── locale # commonjs 国际化API和语言包 ├── mixins # commonjs 混入 ├── transitions # commonjs 过度动画 ├── utils # commonjs 工具方法
生成的这些工具方法会被 lib 下的 element-ui.common.js 和各个组件引用，同时在业务层面也可以引用这些工具方法。查看 .babelrc 文件的配置信息：
{ "presets": [ [ "env", { "loose": true, "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } } ], "stage-2" ], "plugins": ["transform-vue-jsx"], "env": { // cross-env BABEL_ENV=utils "utils": { "presets": [ [ "env", { // 松散模式，更像人手写的ES5代码 "loose": true, // es6转成commonjs "modules": "commonjs", "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } } ], ], "plugins": [ ["module-resolver", { "root": ["element-ui"], "alias": { // 类似于Webpack的externals功能 // 将源代码的引入路径更改成目标代码的引入路径 "element-ui/src": "element-ui/lib" } }] ] }, "test": { "plugins": ["istanbul"] } } }
utils 文件源代码之间互相引用的路径是 element-ui/src ，转义成目标代码后互相之间的引用路径是 element-ui/lib ，因此需要有类似于Webpack的 externals 的功能去更改目标代码的引用路径，进行Babel转义时插件babel-plugin-module-resolver 可以实现该功能。
npm run build:theme
build:theme 脚本主要用于构建UI组件的css样式：
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
这里主要关注 gulp build --gulpfile packages/theme-chalk/gulpfile.js 脚本，该脚本使用Gulp构建工具构建css样式文件，Glup构建多文件样式会非常简单。最终将当前构建的 packages/theme-chalk/lib 目录下的内容拷贝到 lib/theme-chalk 目录下供外部业务使用：