3-11-12 使用 babel 处理 es6 语法

1. 简介

关于 es6 的内容想必大家都已不再陌生，因为 es10 都已经出来了，只要不是太老的浏览器版本基本都支持 es6 的大多数特性了。可以看这里：http://kangax.github.io/compat-table/es6/ 当然，要保证 es6 或者 es7 的语法进行源码编写后完全可用，我们可以用 babel 将其转成 es5。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 关于 babel 的使用方法和原理都可以单列一个系列了，在此我们只讲述 babel 如何结合 webpack 使用。

2. 使用场景

我们来看一下，使用 es6 语法编写的代码，在编译后是如何的。

// index.js
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
];

arr.map(item => {
    console.log(item);
});

运行 npx webpack 命令查看打包信息：

image.png

再看一下打包后的代码，去除 webpack 自动生成内容，看一下 index.js 源码生成的内容。 ![image.png](https://upload-images.jianshu.io/upload_images/4761597-

image.png

发现 index.js 中的内容被原封不动的输出了，但是 es6 语法在某些低版本浏览器上并不支持，为了保证其兼容性，我们需要将其转为 es5。

3. 在 webpack 中使用 babel

如何在 webpack 中使用 babel 呢，我们打开https://www.babeljs.cn/setup

image.png

点击 webpack，如下：

image.png

我们按照指引来，首先，安装两个库：

npm install --save-dev babel-loader @babel/core

其中 babel-loader，就是帮助 webpack 进行打包的 babel 加载器，而 @babel/core 主要是做 js 源代码解析成 ast，以及 ast 编译成 js 这个工作的。 然后做如下配置：

// webpack.config.js
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    },

上面配置的意思就是对除 node_modules 目录以外的 js 文件 使用 babel-loader 进行处理。我们再运行一遍打包命令： npx webpack。可以看到：

image.png

image.png

可以看到 index.js 文件略为减小，部分代码被缩写了（换行取消）。但是内容本身并没有变化。其实现在代码已经经过了 babel-loader 的处理，但是 babel-loader 仅负责 webpack 和 babel 的沟通，让 webpack 在打包过程中能够调用 babel 的相关 api，比如 @babel/core 的代码转换功能，但是并没有做 es6 -》 es5 的转换。要想进行这种转换，我们需要下载转换规则插件。 如下：

npm install @babel/preset-env --save-dev

按照指引要求，我们新建一个 .babelrc 文件：

{
  "presets": ["@babel/preset-env"]
}

可以看到

image.png

image.png

文件大小基本没变，es6 的箭头函数成功转成了 es5 的function。非常好~但是，promise 和 map 函数是 es6 才有的，es5 并没有啊。

这里我们得简要了解一下 babel 的转换机制。看官方文档：

image.png

image.png

简单来说，babel 其实是通过一系列语法转换插件来实现语法的转换，比如实例中的箭头函数转换插件。为了避免我们手动引入众多插件的麻烦，我们可以使用 preset 来定义一系列插件。@babel/preset-env 就是这样一个 preset 库，能够根据指定的条件自动引入需要的插件。但是语法转换插件并不负责为我们进行特性支持，比如上述的 promise 和 map。为了解决这个问题，需要引入另一个库https://www.babeljs.cn/docs/babel-polyfill

：

npm install --save @babel/polyfill

记住这里是 --save 而不是 --save-dev。然后我们在 index.js 引入该模块。

// index.js
import '@babel/polyfill';

打包后如下：

image.png

好了，可以看到文件大小猛增，这是因为 polyfill 为我们引入es6+ 的所有 stage4 阶段的语法特性支持库。但很显然，这里我们只需要 promise 和 map 即可。看文档描述：

image.png

pollyfill 需要和 @babel/preset-env 和 useBuilIns 配置一起配合使用，否则会引入es6+ 的所有 stage4 阶段的语法特性支持库。如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 2,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

image.png

可以看到，打包后的代码体积显著减小。这是因为 "useBuiltIns": "usage" 指定只将源码中涉及到的语法特性进行补足。如果足够细心的网友可能会发现, 此时我们不需要再手动在 index.js 引入 polyfill 了，webpack 会为我们自动引入。另外，打包后的 index.js 值补足了 promise 方法，却并没有补足 map 方法。这是因为 polyfill 还会根据我们需要支持的浏览器类型和版本，选择性地进行补足。比如：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "67"
        },
        "corejs": 2,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

打包后，

image.png

文件大小几乎没有变化，我们发现没有 promise 的 polyfill 没有被补充，甚至语法转换都没有：

image.png

这是因为 chrome67 以上支持上述 es6 语法和特性，无需额外转换和补足。现在我们可以猜想，没有指定 targets 时，使用的默认 targets 是无需补足 map 的，我们把支持的浏览器加一个低版本的 ie 浏览器看一下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "67",
          "ie": "8"
        },
        "corejs": 2,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

image.png

可以发现比不明确指明 targets 时稍大，看一下生成 index.js 文件，发现引入了 map 相关的 polyfill:

image.png

image.png

4. 利用 @babel/plugin-transform-runtime 注入

我们先来看一下什么是 @babel/plugin-transform-runtime。

Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files. This is where the @babel/plugin-transform-runtime plugin comes in: all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build. Another purpose of this transformer is to create a sandboxed environment for your code. If you directly import core-js or @babel/polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run. The transformer will alias these built-ins to core-js so you can use them seamlessly without having to require the polyfill.

我们可以看到，@babel/plugin-transform-runtime 主要是为了注入代码的复用，以及防止在开发三方库时，直接导入core-js或@babel/polyfill及其提供的内置组件(如Promise、Set和Map)所造成的全局污染。 如下：

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

并做如下配置：

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

打包后如下：

image.png

image.png

5. 直接在 webpack.config.js 中进行配置

上面我们是通过单独的 .babelrc 文件进行配置，其实这种配置也是推荐的一种配置，方便迁移。如果只想在 webpack 使用，其实在 webpack.config.js 中进行配置也是一样的。参考babel-loader

参考

docs-babel webpack-babel-loader docs-babel-core @babel/preset-env useBuiltIns 说明 babel-loader https://www.babeljs.cn/docs/babel-plugin-transform-runtime