Webpack4 学习笔记 - 06：使用 Babel 处理 ES6 语法

Babel 配置逐步讲解

修改 index.js 内容，写一些 ES6 的语法：

const arr = [
    new Promise(() => {}),
    new Promise(() => {})
];

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

ES6 很强大，但目前并非全部的浏览器都支持，因此须要用到 Babel，让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。
来试一下吧，先安装须要用的 Babel 包：

npm install babel-loader @babel/core -D

配置 webpack.config.js，增长一条 rulues ：

module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/, // 排除该目录下的全部代码
      loader: "babel-loader"
    }]
  }

babel-loader 告诉了 webpack 怎么处理 ES6 代码，但它并不会将ES6 代码翻译成向后兼容版本的代码，若是想要执行这一步，还须要安装一个模块 preset-env，它包含了全部 ES6 代码转换的规则:

npm install @babel/preset-env -D

安装完以后配置一下：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除该目录下的全部代码
  loader: 'babel-loader',
  options:{
    'presets': ['@babel/preset-env']
  }
}]

这样，运行打包命令，就能够把 ES6 语法翻译成 ES5了，看一下打包的结果：

没问题，语法已经翻译成了当前全部浏览器能识别的语法，可是作到了这一点仍是不够，由于那些比较新的对象和函数，好比这里的 Promise 和 map，在低版本的浏览器里实际仍是不存在的。因此这时不只要进行语法的转换，还要想办法把这些新的特性，补充到低版本的浏览器里。怎么作呢？ babel 提供了一个工具叫 polyfill，安装：

npm install @babel/polyfill -D

而后在 index.js 的最顶部，引入这个包：

import '@babel/polyfill'

保存代码，再次进行打包查看结果，能够发现打包后的 main.js 里面，有了不少代码来帮助实现好比 Promise 和 map 这些新特性。看一下 main.js 文件的大小：

859KB，再看一下没有使用 polyfill 以前的 main.js 大小：

只有4.36KB，使用 polyfill 以后文件变大了不少，这说明了 polyfill 使用了很是多的代码来填入新特性。
可是，index.js 里只使用了 Promise 和 map，其它的新特性都没用，能不能把那些没用到的实现方法都剔除了呢？ 能够，给 preset-env 增长一个 useBuiltIns 配置：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除该目录下的全部代码
  loader: 'babel-loader',
  options: {
    'presets': [
      ['@babel/preset-env', {
        useBuiltIns: 'usage'
      }]
    ]
  }
}]

useBuiltIns: 'usage' 的意思就是说，当使用 polyfill 往低版本浏览器填入一些不存在的特性时，不是所有都填入，而是根据业务代码使用到的特性去选择填入，好比这里使用了 Promise 和 map，那就只填入这两个，其它的都不用。 再次打包查看结果：

能够看到，main.js 的大小只有 138KB了。
这里还能够配置一些其它的参数，好比 targets 参数：

rules: [{
  test: /\.js$/,
  exclude: /node_modules/, // 排除该目录下的全部代码
  loader: 'babel-loader',
  options: {
    'presets': [
      ['@babel/preset-env', {
        useBuiltIns: 'usage',
        targets:{
          edge: '17', // edge高于17的版本
          firefox: '60', // firefox 高于60的版本
          chrome: '67'  // chrome高于67的版本
        }
      }]
    ]
  }
}]

targets 是指打包会运行在什么样的浏览器，这有三个浏览器，并注明了最低版本。在打包的过程当中，babel 会去看这些浏览器对 ES6 代码的支持状况，是否有必要进行语法转换、填入一些新特性。 运行打包命令查看结果：

发现仍是输出的 Promise 和 map，并无进行新特性的填入，说明这三个版本的浏览器对 ES6 的支持已经很好了，不须要在进行额外的处理，main.js 的大小是变成了最初的4.36KB。

并且在 WebPack4 中，当配置了 useBuiltIns: 'usage' 时， 就不须要再手动写 import '@babel/polyfill' 了，

使用 .babelrc 配置文件

当 babel 配置的项很是多时，webpack.config.js 文件会变的很长，不易维护，这时候能够在同级目录建立一个 .babelrc 文件，把配置项移入这个文件中：

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67"
            }
        }]
    ]
}

而后把 webpack.config.js 中 'babel-loader' 的 options 中去掉就好了。

到此为止，webpack 对 ES6 的简单处理就完成了。
关于 babel 还有不少东西和配置项，更多的知识要到 https://babel.docschina.org 来学习。