Element UI 打包探索【3】

第九个命令

[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)

至此，dist命令完成。

解释why

[Element UI 打包探索【1】里面的why](#Element UI 打包探索【1】里面的why)

[Element UI 打包探索【2】里面的why](#Element UI 打包探索【2】里面的why)

关于webpack的一些讲解

webpack.conf.js：

webpack.common.js：

webpack.component.js：

书📚接上文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打包系列就先讲到这里，欢迎大家的留言和讨论。

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。