Webpack4 配置 Babel 处理 ES6 语法及 Polyfill 优化

Webpack4 配置 Babel 处理 ES6 语法及 Polyfill 优化

修改 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 中增加一条 rules 配置：

 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。

至此，webpack 对 ES6 的简单处理流程已完成。

关于 babel 还有诸多配置项和知识，更多详情请访问 https://babel.docschina.org 学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。