Babel 是一个 JavaScript 的转译器。它的主要功能就是把 ES2015+ 的代码转换为 ES5 或更低版本的 JavaScript 代码。有了 Babel，您就可以使用最新的 JavaScript 语法，不用太担心浏览器的兼容问题。

之前简单写了一下 Babel 的使用，不过没有用到 Webpack，在使用模块和 polyfill 时候还是不太方便。这里就简单写一下 Webpack 配置 Babel 的方法。

安装 Webpack

如果您不太了解 Webpack 的话，可以先看一下 Webpack 简易使用指南 这篇文章。

创建一个以英文小写命名的文件夹，然后使用 npm 初始化项目：

npm init -y

安装 webpack 和 webpack-cli ：

npm install --save-dev webpack webpack-cli

安装完成后在 package.json 中的 script 中加入 "build": "webpack --config webpack.config.js" ，如下：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

配置 Webpack

在项目根目录创建一个 webpack.config.js ，填写配置信息：

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
};

上面设置的入口文件是项目目录下的 src/main.js ，输出文件的目录是项目目录下的 dist 目录。到这里 Webpack 就已经可以打包文件了，不过还不能转换 ES6 代码。

安装和配置 Babel

基本安装配置

安装 babel/core ：

npm install --save-dev @babel/core

babel/core 的主要功能就是调用 Babel 的 API 转码。

安装 babel-preset-env ：

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

babel-preset-env 包含了一组常用的 ES6 预设。

因为要配合 Webpack 使用，所以还需要安装 babel-loader ：

npm install --save-dev babel-loader

在项目根目录创建一个 .babelrc 文件，添加 Babel 配置信息：

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

在 webpack.config.js 中添加 Loader 配置：

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  正则表达式匹配js文件
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
};

到这里就可以转换基本的 ES6 语法了，不过 ES6 中新增的一些 API，例如 Map 、Promise 之类的还是无法转换。

babel/polyfill

如果要转换 ES6 中新增的 API 还需要安装 babel/polyfill ：

npm install --save-dev @babel/polyfill

安装完成后在 .babelrc 中添加配置信息：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
          "browsers": "ie >= 8"
        }
      }
    ]
  ]
}

其中的 "useBuiltIns": "usage" 就是根据代码中包含的 API 按需引入 core-js ，可以减小文件体积。

"browsers": "ie >= 8" 就是最低支持到 IE8 浏览器。

现在使用 Webpack 打包后的代码就可以给老 IE 用了。

babel/plugin-transform-runtime

Babel 在转换一些 API 的时候需要定义辅助函数，如果多个文件中都用到了一个重复的 API ，Babel 就会定义很多个辅助函数。babel/plugin-transform-runtime 的主要功能就是把辅助函数拆分出来，可以让多个文件中重复的 API 调用同一个辅助函数。

安装 babel/plugin-transform-runtime ：

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

在 .babelrc 中添加配置信息：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
          "browsers": "ie >= 8"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

到这里 Babel 就算是配置完成了，已经可以正常转换 ES6 代码了。

相关文章：