2018/12/16 - 你该知道的Babel7

Babel是一个广泛使用的转码器，可将任意任意版本语法和API转到当前环境支持的版本。

使用

将配置文件.babelrc，放在项目根目录。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ],
    ["@babel/preset-react"]
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "style": "css"
      }
    ],
    "@babel/plugin-syntax-dynamic-import"
  ]
}

概念介绍

Babel默认只转换新的JS句法（syntax），而不转换新的API，比如Set、Maps等全局对象，以及一些定义在全局对象上的方法，比如Object.assign、Array.from等，具体可以查看这个列表，所以此时就需要包含core-js、regenerator、helpers方法库的@babel/polyfill或@babel/runtime。

@babel/core

Babel编译器，包括了几乎所有核心API，将JS代码抽象成AST，再分析做对应的转换处理。

presets

Babel预设，设定转码规则，包含某一部分plugins，从下往上执行。

@babel/preset-env：根据设置的目标运行环境，“自动”决定加载哪些插件和 polyfill 的 preset
@babel/preset-react：转换react语法
babel-preset-es201X：将es(X+1)代码编译为esX，已经废弃由@babel/preset-env取代

@babel/preset-env

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { // 目标环境，建议去除，采用在根目录设置.browserslistrc
          "browsers": "> 5%"
        },
        "modules": false, // 设置ES6 模块转译的模块格式 默认是 commonjs
        "useBuiltIns": "usage", // @babel/polyfill加载方式，
        "debug": true, // 调试模式，开启会输出目标环境、transforms、plugins和polyfills
        "include": [], // 总是启用哪些 plugins
        "exclude": [] // 强制不启用哪些 plugins
      }
    ]
  ]
}

useBuiltIns分析

按需是根据目标环境，polyfills影响代码体积

false：按需加载transforms、plugins，不加载polyfills
usage：按需加载transforms、plugins和polyfills
entry：按需加载transforms、plugins，加载所有polyfills

stage-X

对ES一些提案的支持，向下兼容，比如stage-0包含stage-[1-3]。在Babel7已经废弃，换成proposal-x。

stage-0：想法
stage-1：建议
stage-2：草案
stage-3：候选
stage-4：完成

plugins

Babel插件，从上往下执行，并且在presets之前运行。

@babel/runtime

包含core-js、regenerator、helpers，用来转换新的属性和方法。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

注意：

引入的方法是module级的，会存在重复引用的问题，需要搭配@babel/plugin-transform-runtime来做自动化引用。
babel-runtime的引用不是全局生效的，因此实例化的对象方法则不能被 polyfill，比如[1,2,3].includes 这样依赖于全局 Array.prototype.includes的调用依然无法使用，比较适用于库。

@babel/polyfill

功能和@babel/runtime类似，在@babel/preset-env配置useBuiltIns开启，详细可见其说明。

注意：

@babel/polyfill引用是全局的，引入可以一劳永逸，但会污染子模块的变量引用，适用于业务项目。

参考文档

广而告之

本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。

BooheeFE / weekly