Element UI 打包探索【2】

第三个命令

第四个命令

第五个命令

第六个命令

书📚接上文Element UI 打包探索【1】我们继续来看

第三个命令

bash 复制代码

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

这个命令相信大家都不陌生，但是前提项目中存在eslint（代码格式化工具）

tip：--代表的是命令中的参数，像这边--quiet就是减少输出信息

***结论：***格式化src文件夹下的文件夹下的所有文件 - - 后面以此类推

***why：***格式化操作，也没什么值得为什么的，大家可以借鉴使用

第四个命令

bash 复制代码

webpack --config build/webpack.conf.js

这条是有关于webpack的打包结果，具体我想出一期专门的专栏用来讲解，到时候补充到这篇文章中.......#warning TODO

***结论：***打包

***why：***用于打包

第五个命令

bash 复制代码

webpack --config build/webpack.common.js

webpack的common文件操作，也是到时候一并专栏讲解

***结论：***打包

***why：***用于打包

第六个命令

bash 复制代码

webpack --config build/webpack.component.js

webpack的component文件操作，也是到时候一并专栏讲解，连续三条脚本都指向webpack！！！

***结论：***打包

***why：***用于打包

第七个命令

bash 复制代码

cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js

cross-env

cross-env 是一个 Node.js 包，用于在不同操作系统上设置环境变量，特别是在运行 JavaScript 脚本时。不同操作系统使用不同的命令来设置环境变量，这可能导致开发人员需要编写不同的脚本来适应不同的平台。cross-env 的目的是解决这个问题，使设置环境变量变得更加便捷和可移植。

BABEL_ENV

BABEL_ENV=utils：将环境变量BABEL_ENV设置为utils。

babel

编译生成文件

***结论：***设置环境变量process.env.BABEL_ENV=utils并且用babel命令去编译整个src文件夹，并且将结果输出到lib文件夹下（lib不会去覆盖原先的lib，编译时忽略src/index.js文件）。

***why：***先讲完我们再回头来看

第八个命令

bash 复制代码

node build/bin/build-locale.js

也是和国际化相关的东西

输入文件：src/locale/lang - - 各个语言下的js

输出文件：lib/umd/locale - - 各个语言下通过babel的产物

重点函数

javascript 复制代码

var transform = function(filename, name, cb) {
  require('babel-core').transformFile(resolve(localePath, filename), {
    plugins: [
      'add-module-exports',
      ['transform-es2015-modules-umd', {loose: true}]
    ],
    moduleId: name
  }, cb);
};

生成的产物部分截图

***结论：***国际化文件babel化

***why：***所有的组件做好国际化的通道

由于篇幅较长，下篇文章咱们继续探讨！！

总结

本篇文章讲了6个命令还有1个why的事情没讲，下篇我们继续。

🔽直接看这里

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