目录
[node build/bin/gen-cssfile](#node build/bin/gen-cssfile)
[gulp build --gulpfile packages/theme-chalk/gulpfile.js](#gulp build --gulpfile packages/theme-chalk/gulpfile.js)
[cp-cli packages/theme-chalk/lib lib/theme-chalk](#cp-cli packages/theme-chalk/lib lib/theme-chalk)
[Element UI 打包探索【1】里面的why](#Element UI 打包探索【1】里面的why)
[Element UI 打包探索【2】里面的why](#Element UI 打包探索【2】里面的why)
书📚接上文Element UI 打包探索【2】我们继续来看
第九个命令
bash
"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
这条指令主要用于输出各个组件的对应css、scss样式文件
关键代码如下
javascript
themes.forEach((theme) => {
var isSCSS = theme !== 'theme-default';
var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
Components.forEach(function(key) {
if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
var fileName = key + (isSCSS ? '.scss' : '.css');
indexContent += '@import "./' + fileName + '";\n';
var filePath = path.resolve(basepath, theme, 'src', fileName);
if (!fileExists(filePath)) {
fs.writeFileSync(filePath, '', 'utf8');
console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
}
});
fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
});根据components.json生成对应的scss文件，且创建最终的packages/theme-chalk/src/index.scss引入各个组件的scss文件。
***结论：***生成组件的style样式文件scss
***why：***作用于各个组件的样式
gulp build --gulpfile packages/theme-chalk/gulpfile.js
文件中提到的
-
series：允许你将多个任务（task）组合成一个顺序执行的序列；
-
pipe：是Gulp实现文件处理流程的关键，它允许你将一个或多个操作串联起来，形成一个处理链； -
src：文件流输入地址 - - packages/theme-chalk/src 下面的scss文件和fonts下面的两个文件（ttf、woff）
-
dist：文件流输出地址 - - packages/theme-chalk/lib 对应文件
gulp先提碰到的这些，以后需要专栏再专门做一期~~
***结论：***将组件的样式文件输出到lib下
***why：***作用于各个组件的样式
cp-cli packages/theme-chalk/lib lib/theme-chalk
cp-cli是一个命令行工具，用于在Linux系统中复制文件或目录。
***结论：***将gulp生成的文件复制一遍到lib下
***why：***gulp为什么不直接导出到lib，而是要多一条命令进行复制
至此，dist命令完成。
经过这么一个大体流程后，是不是对element的打包有初步的印象了。接下来我们来看前面留下来的why的问题。
解释why
Element UI 打包探索【1】里面的why
- clean命令就是删除，显而易见是为了文件干净防止碰到意想不到的错误，这个是在打包的命令中经常会使用的操作；
- 就是提取icon图标所对应的类名；
- 对应不同语言的vue官网；
Element UI 打包探索【2】里面的why
- utils命令其实就是对整个src文件进行编译打包，结论说的比较清楚了；
关于webpack的一些讲解
这里我只讲一些element ui里面用到的重点功能
webpack.conf.js：
全量打包组件库为 umd 模块。可通过 script 标签引入组件库来使用；
webpack.common.js：
全量打包为commonjs2模块。可通过npm下载组件库来使用；产物element-ui.common.js也是 package.json 的 main入口文件
webpack.component.js：
将每个组件模块单独打包实现按需加载；
Element UI打包系列就先讲到这里，欢迎大家的留言和讨论。
如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。