上海古都建筑设计集团,上海办公室装修设计公司,上海装修公司高质量的内容分享社区,上海装修公司我们不是内容生产者,我们只是上海办公室装修设计公司内容的搬运工平台

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

guduadmin473月前

目录

  • 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官方解析。


          以上。

网友评论

搜索
最新文章
热门文章
热门标签
 
 梦见入室抢劫意味什么  做梦梦到自己被杀死了  梦见拉屎是什么预兆周公解梦