Babel 的基本使用手册

@babel/preset-env

@babel/preset-env 一种允许开发人员使用最新版本的 JavaScript，而不用对代码格式及特性（另有浏览器 polyfill）进行微管理的智能预设工具集合。

@babel/preset-env 可在配置文件中指定 target.browsers 项或通过 browserslist 来指定需要转译的目标浏览器。

target.browsers 项可在 .babelrc 文件中配置，或在对应的 webpack loader 的 options 项下配置。

{
"presets": [
  "@babel/preset-env",
  {
    // 是否开启将 ES6 的 module 格式转换为其他 module 类型，此处排除转
    // 换是为了让 webpack 来处理 ES6 模块（如，实现模块按需加载）
    "modules": false,
    // 此配置项是处理 `@babel/preset-env` 如何引入 `@babel/polyfill`
    "useBuiltIns": "usage",
    // 目标浏览器，若 `package.json` 中存在 `browserslist` 项则优先生
    // 效 `package.json` 中的 `browserslist` 项
    "targets": {
      // browsersklist 可配置项有：
      // https://github.com/browserslist/browserslist#full-list
      "browsers": ["> 1%", "last 2 version"]
    }
  }
]
}

browserslsit 有单文件和集成在 package.json 中两种方式。

// package.json (推荐方式)
{
"browserslist": ["> 1%", "last 2 version"]
}

另外在 .babelrc 配置文件中，应特别注意配置项 useBuiltIns，该配置项用于配置 @babel/preset-env 该如何引入 @babel/polyfill。

useBuiltIns: 'entry'

该选项将开启一个新插件，该插件用于根据源代码文件中语句 import '@babel/polyfill' 或 require('@babel/polyfill') 来导入特定的所需 polyfill。
- In
```
import '@babel/polyfill'
```
- Out
```
// 只引入特定的 ployfill
import 'core-js/modules/es7.string.pad-start'
import 'core-js/modules/es7.string.pad-end'
```
- useBuiltIns: 'usage'
当 polyfill 在一些文件中被引入时，为 polyfill 新增一个导入（因为 Webpack 若正确配置后，会将多处相同引用，指向同一 bundle）。我们利用的是一个 bundle 只加载相同的 polyfill 一次这一原理。
- In
```
var a = new Promise()
```
- Out(如果执行环境不支持该特性)
```
import 'core-js/modules/es6.promise'
var a = new Promise()
```
- Out(如果浏览器支持该特性)
```
var a = new Promise()
```
- useBuiltIns: false 不会在每个文件中自动加入 polyfill，或转换 import '@babel/polyfill 为一些单独的 polyfills。

@babel/polyfill

Website

babel 包含一个定制化的 regenerator runtime 和 core-js。

@babel/polyfill 用于模拟整个 ES2015+ 的执行环境（不包含 Stage 4 提案），并旨在在应用中被使用，而不是一个库或工具（该 polyfill 将在使用 babel-node 时自动引入）

这意味着你可以使用新的内置插件，像 Promise 或 WeakMap，静态方法像 Array.from 或 Object.assign，实例方法像 Array.prototype.includes，和 generator 函数（提供给你 regenerator 插件）。本 polyfill 为了实现以上目标，向 全局作用域 和像 String 这样的 原生原型 上添加了这些方法。

Polyfill 打包大小

这个 polyfill 给我们提供了便利，但是你应使用 @babel/preset-env 和 @babel/preset-env 的 userBuiltIns 选项来实现使用 @babel/polyfill，以至于最终的打包结果不会包含你不需要的 polyfill，即实现 polyfill 的按需加载 。否则，我们建议你手动导入单个 polyfills。

结合 babel-loader 和 @babel/preset-env 按需导入 polyfill

注意，此时 不需要显式地 在应用代码中引入 polyfill，即不需要在入口文件 import '@babel/polyfill。此时仍需安装 @babel/polyfill，babel-loader 和 @babel/preset-env 会根据配置自动实现按需加载 polyfill。

// webpack.config.js
rules: [
  // transform-runtime 插件用于告诉 Babel 引入 runtime 而不是内联  runtime，即将
  // 所有的 helpers 函数分离为单独的 runtime 以实现代码复用。
  {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        // 此处将根据上文 @babel/preset-env 的示例代码配置，自动引入所需的 polyfill
        // 而不是将整个 polyfill 全部引入
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime']
      }
    }
  }
]

Note: 若 babel 未转译特定的代码为 ES5（即未引入特定的 polyfill，或 polyfill 未生效），应注意检查 babel-loader 是否有配置 options 项。否则 babel-loader 将不执行特定的代码转译。

babel-loader 的相关配置可见 Github repo

@babel/plugin-transform-runtime

Website

一个用于开启复用 babel 注入的 helper 帮助函数（即用于辅助 babel 转译代码的函数）的插件。即，处于多个文件中的相同的 helper 帮助函数，将被提取到 babel runtime 中以实现代码复用，减小打包体积。

推荐的配置方式是通过 .babelrc，其他方式可参考官方文档。

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

lbwa / set.sh-stale