Webpack系列——使用 Babel 处理 ES6 语法

有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。

1.依赖安装

npm install -D babel-loader @babel/core @babel/preset-env

2.Loader设置

webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。

1.一般情况下的 babel 配置

babel.config.json

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 按需引入模块
      "corejs": 3, // 核心 js 版本
      "targets": "> 0.25%, not dead" // 浏览器支持范围
    }]
  ]
}

注意： 必须要配置 useBuiltIns，如果不配置，babel 将不会处理 Promise、Map、Set、Symbol 等全局对象

在开发类库或第三方模块或者开发组件库时，上面这种import @babel/polyfill 的方案时就会产生问题，因为注入的时候会通过全局变量的形式注入，会污染到全局环境,需要换一种方式配置

2. 最佳的 babel 配置

如果在写一个库时，最好添加上插件 —— babel/plugin-transform-runtime，配置如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    // 不污染全局，在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

需要下载的依赖：

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

corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。

---

@babel/preset-env 只是用语法转换代码，如果我们不配置 useBuiltIns。

@babel/transform-runtime 可以提供重用助手，但默认情况下不要 polyfill。

大多数情况下最好的配置：使用@babel/preset-env 转换语法。使用@babel/transform-runtime 避免重复代码，并将 corejs: 3 配置为 polyfill。