Babel入门

Babel 是一个工具集，主要用于将 ES6 版本的 JS 代码转为 ES5 等向后兼容的 JS 代码：

• 语法转换（剪头函数、async 语法、class、解构等）
• 补齐 API（Promise、Map、Symbol 等，Array.find 等实例新方法）

常用包：

npm install --save-dev
    babel-loader // 供 WebPack 转码的 loader
    @babel/cli   // 命令行转码工具，依赖 core
    @babel/core  // 核心 npm 包
    @babel/preset-env  // 提供了 ES6 转换 ES5 的语法转换规则
    @babel/polyfill

配置文件（babel.config.js、.babelrc、.babelrc.js 或直接配置在 package.json 中的 babel 下）：

module.exports = {
  // 预设，一组工具的集合
  presets: [
    // @babel/preset-env 的简写
    // ‘babel-preset-’可以不写，‘@babel/preset-’不确定
    "@babel/env",
    "@babel/preset-react",
    "@babel/preset-typescript",
    ["@babel/需要参数的预设", { 参数: true }],
  ],
  // 插件
  plugins: [
    // babel-plugin-transform-decorators-legacy 的简写
    // ‘babel-plugin-’可以不写。‘@babel/plugin-’不确定
    "transform-decorators-legacy",
  ],
};

• 插件比预设先执行
• 插件数组从前向后执行
• 预设数组从后向前执行

预设

• babel-preset-latest 是 Babel6 时代所有年代 preset 的集合（babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），Babel7 下是 @babel/preset-env

• @babel/preset-typescript TS 支持

• @babel/preset-react、@babel/preset-flow react 支持

插件

• @babel/plugin-transform-runtime：复用 babel 注入的 helper 代码

• 从 babel7.4 开始，官方不推荐再使用 @babel/polyfill 了，因为它本身其实就是两个 npm 包的集合：core-js 与 regenerator-runtime。官方推荐直接使用这两个 npm 包。预设 @babel/preset-env中已经包含了这两个包

polyfill

• 单独引入静态的 polyfill.js

• 引入 @babel/polyfill，它 由 core-js@2.X 与 regenerator-runtime 组合而成。

• 引入 core-js/stable 和 regenerator-runtime/runtime ，需要 npm install --save core-js regenerator-runtime 此时装的是 core-js@3.X，2.X 下没有 stable。

@babel/preset-env 配置

1. browserslist

// package.json 或 .browserslistrc
"browserslist": [  // 指定代码最终要运行环境
    "> 1%",        // 市场份额大于1%的浏览器
    "not ie <= 8"  // 不考虑IE8及以下
]

很多插件的配置是基于它的，比如 Autoprefixer、postcss 根据此自动增加 CSS 前缀。@babel/preset-env 在转译时也会读取这个配置。

如果没有此配置，Babel 会把所有 ES6 转换 ES5

2. targets：同 browserslist 配置，优先级高于 browserslist

3. useBuiltIns：false | usage | entry。"false" 手动引入，会将 polyfill 全部引入到最终的代码里。"entry" 手动引入，根据目标环境引入。"usage" 自动引入，根据实际用到的 API 针对性引入。

   module.exports = {
       presets: [["@babel/env", { useBuiltIns: "usage" }]],
       plugins: []
   }
   

   npm install --save-dev @babel/cli @babel/core  @babel/preset-env
   npm install --save @babel/polyfill
   

4. corejs：2 | 3 此项当 useBuiltIns 不为 false 时生效。取值为 3 时需要单独安装 core-js@3

5. modules：auto | amd | umd | systemjs | commonjs | cjs | false 是否把 ES6 的模块化语法改成其它模块化语法。ES6 模块方便 Webpack 进行静态分析（如 tree shaking 优化）

@babel/runtime 和 @babel/plugin-transform-runtime

@babel/runtime 用于把辅助函数们（polyfill 自己定义的 Promise 等）统一放入一个包里，以达到复用、减小最终包大小的目的。

@babel/plugin-transform-runtime：将最终包中的辅助函数们替换为 @babel/runtime 的统一包（打包后的引用地址为@babel/runtime/helpers/XXX）

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

// babel.config.js
{
    "presets": [
      "@babel/env"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

@babel/plugin-transform-runtime 的第二个作用是**防止环境污染**：babel-polyfill 或 core-js/stable 与 regenerator-runtime/runtime 补齐 API 的方式是全局重新定义，环境原始的 API 会被覆盖掉，称为环境污染。此插件可以重命名 API，且不需要全局引入。

使用此插件不再需要 babel-polyfill 或 core-js/stable 与 regenerator-runtime/runtime。

npm install --save @babel/runtime-corejs3
npm install --save-dev @babel/plugin-transform-runtime

    "plugins": [
      ["@babel/plugin-transform-runtime", {
        "corejs": 3
      }]
    ]

@babel/plugin-transform-runtime 的完整/默认配置：

    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,          // 自动引入辅助函数包
          "corejs": false,                  // API转换以避免污染全局环境
          "regenerator": true,          // Generator与async转换API代码
          "useESModules": false,        // 是否使用ES6的模块化用法
          "absoluteRuntime": false,
          "version": "7.0.0-beta.0"
        }
      ]
    ]

关于版本，工具集围绕 core 主包的版本号变化。包名为@babel/XX 的为 Babel7，包名为 babel-XX 的为 Babel6

参考： https://zhuanlan.zhihu.com/p/394781295