babel7实践

jiezi

6 年前

前些天使用了 babel7，特来做个笔记。

在 babel7 中，已经废弃了之前的阶段性提案，现在统一使用 @babel/preset-env。所以呢，这里倒是省去了一些麻烦。在 webpack 配置中 preset-env 配合 babel-loader 就可以转换 ES2015+ 语法了。同时，官方建议我们使用 targets 设定目标浏览器决定需要兼容的功能。举个例子：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {ie: "11"}
      }
    ]
  ]
}

polyfill 在之前都是用来引入新的 api 和功能的。如我们常用的 promise，Object.assign 等。在 babel6 及之前，只需要在入口引入 polyfill 即可。然而这也带来了问题，一次性加载了整个 polyfill，十分冗余。而用了 babel7 通过简单的配置就可以达成按需加载的目的，我们也不再需要手动引入 polyfill。

没错，使用这个新的配置项，就可以实现按需加载 polyfill。其值可取以下 3 个：

值为 false 的时候，相当于没用，这时就得手动引入所有的 polyfill。

使用 entry 的时候，也需要手动引入 polyfill，即 import '@babel/polyfill';，同时也引入了所有的 polyfill。这个配置项，总觉得没什么用，如果有老哥知道的话可以在评论区提出一起讨论。

值为 usage 的时候，无需引入 polyfill，babel 会自动按需加载需要的功能：

{
  \\...
  useBuiltIns: 'usage'
}

如果需要在命令行打印加载项，可以设置 debug：

{
  \\...
  useBuiltIns: 'usage',
  dubug: true
}

例如使用 class（类） 的时候，babel 会在这前面添加一个帮助函数。如下所示：
源代码：

// source code
class Test {}

编译后：

"use strict";

function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function"); } }

var Test = function Test() {_classCallCheck(this, Test);
};

可以看到，在编译输出的代码里，helper 函数被直接嵌入代码中。如果你只有这一个 js 文件用到了这个 helper，那这样并没有问题。但试想一下，如果你有很多个脚本文件，每一个你都用到了 class，babel 可不管你这么多，每个编译后的文件都包含一个一模一样的 helper 函数，便造成了冗余。所幸，我们可以使用 @babel/plugin-transform-runtime 和 @babel/runtime 来解决这个问题。添加如下配置：

plugins: ['@babel/plugin-transform-runtime']

此时再编译上面的代码，得到的结果如下：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var Test = function Test() {(0, _classCallCheck2.default)(this, Test);
};

此时不再是直接把 helper 函数嵌入代码中，而是使用 require 加载公共 helper。

上面说了这么多，现在给出 babel7 和 webpack 的一个实践作为结束。
1. 添加依赖

cnpm i --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime
// &
cnpm i --save @babel/polyfill @babel/runtime

2.webpack 配置

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

3.babel 配置

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        targets: {ie: 10 // 根据自己的目标环境进行配置},
        debug: true,
        // corejs 这一项也需要加上，corejs 有 2 和 3 两个版本
        // 如果不确定有没有下载 core-js，可执行 cnpm i core-js@3 --save
        corejs: 3
      }
    ]
  ],
  plugins: ['@babel/plugin-transform-runtime']
};

presets

polyfill

useBuiltIns

false

entry

usage

plugin-transform-runtime

总结