element-ui 打包流程源码解析——babel 相关

目录

• 1，babel-cli
• 2，babel-core
• 3，.babelrc
• • 3.1，presets
  • 3.2，plugins
  • 其他相关

    该文章是为了更好的理解：element-ui 打包流程源码解析（上） 第2.5节 npm run build:utils 打包命令

    "scripts": {
      "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    }
    

    使用 babel 时，默认都会以根目录下的 .babelrc 文件为配置项。

    1，babel-cli

    官网参考

    上面的打包命令作用是：

    使用 BABEL_ENV=utils 环境下的配置项，来编译整个 src 目录下的文件并输出到 lib 目录，同时忽略src/index.js

    2，babel-core

    官网参考

    在 build/bin/build-locale.js 中，定义了一个方法，用于将 esm 模块转为 umd 模块。

    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);
    };
    

    3，.babelrc

    选项参考，plugins 和 presets 区别

    element-ui 的 .babelrc 文件配置。

    只看下命令中关于 BABEL_ENV=utils 环境的相关配置：

    {
      // ...
      // 只看 utils 环境下的配置
      "env": {
        "utils": {
          "presets": [
            [
              "env",
              {
                "loose": true,
                "modules": "commonjs",
                "targets": {
                  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
              }
            ],
          ],
          "plugins": [
            ["module-resolver", {
              "root": ["element-ui"],
              "alias": {
                "element-ui/src": "element-ui/lib"
              }
            }]
          ]
        },
        // ...
      }
    }
    

    3.1，presets

    简单理解为是 plugins 的集合，多个时逆序执行。以上面的配置为例，

    语法：添加了1个 preset：env = babel-preset-env（如果没有配置项时会运行所有的 transform）。

    env配置项解释：

    1，loose: true，参考

    开启 loose 模式转换为 es6 --> es5，生成代码更快，老引擎兼容性好，代码简洁。

    2，modules: commonjs

    启用将ES6模块语法转换为另一种模块类型。 false 表示不会转换目标模块。

    3，targets

    作用目标，只支持目标范围内浏览器所需的 polyfill 和代码转换。

    查询语句是 browserslist 支持的有效的查询格式。<-- 翻译文件

    • 全球使用率 > 1% 的浏览器版本。
    • 每个浏览器最近的两个发行版。
    • ie 大于 8 版本

      3.2，plugins

      "plugins": [
        ["module-resolver", {
          "root": ["element-ui"],
          "alias": {
            "element-ui/src": "element-ui/lib"
          }
        }]
      ]
      

      module-resolver 对应的是 babel-plugin-module-resolver。

      作用：简化路径和指定别名。

      • 简化路径：在项目中 require/import通过 ../../element-ui/xxx 可以直接写 element-ui/xxx
      • 指定别名：

        import { once, on } from 'element-ui/src/utils/dom';
        

        打包后变为

        exports.__esModule = true;
        var _dom = require('element-ui/lib/utils/dom');
        

        其他相关

        在 .babelrc 的完整配置中，还有一个 plugins: transform-vue-jsx，实现在 Vue 中使用 JSX 语法。

        感兴趣可以看下：vue jsx | elementFe官方解析。

        ---

        以上。