前言
在 Web 开发中，语法标准的快速演进导致了许多新的功能和工具的出现。但是由于浏览器的历史遗留问题，一些最新的 ECMAScript 标准和语法特性需要通过编译工具才能运行。本文将介绍如何在 Webpack 中添加 Babel 编译器。
Babel 是什么？
Babel 是一个可以将最新的 ECMAScript 标准和语法特性编译成当前浏览器可以理解的代码的工具。Babel 可以将新的语言特性转换成 ES5 代码，并且可以通过插件的方式扩展功能，支持 JSX、TypeScript、Flow 等语言。
添加 Babel 编译器
安装依赖
在项目的根目录下运行以下命令，安装 Babel 编译器及其相关依赖：
npm install babel-loader @babel/core @babel/preset-env --save-dev
其中，babel-loader 是 Webpack 的 loader，用于将代码传递给 Babel 编译器；@babel/core 是 Babel 的核心库，@babel/preset-env 是将最新的 ECMAScript 转换成当前环境可识别的代码的预设。
配置 Webpack
在 Webpack 配置文件（webpack.config.js）中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-上述配置指定了对所有 .js 文件使用 babel-loader 进行编译，并使用 @babel/preset-env 预设来转换 ECMAScript 代码。
配置 Babel
在项目根目录下创建一个 .babelrc 文件，并添加以下配置：
{
"presets": ["@babel/preset-env"]
}这里的配置与 Webpack 配置中的一致，使用 @babel/preset-env 进行预设。
示例
编写源代码
创建一个名为 index.js 的文件，内容如下：
const arr = [1, 2, 3].map(item => item * 2); console.log(arr);
代码中使用了数组的 map 方法和箭头函数，这些语法特性在某些旧的浏览器上可能不支持。
打包编译
在命令行中运行以下命令，编译代码：
npx webpack
Webpack 将会按照上述配置对代码进行编译，最终生成一个名为 bundle.js 的文件。打开此文件，可以看到以下内容：
var arr = [1, 2, 3].map(function (item) {
return item * 2;
});
console.log(arr);可以看到，在编译后的代码中，新特性的语法被转换成了当前环境可识别的代码。
结论
Babel 能够非常好地支持当前最新的 JavaScript 语法特性，而且能够通过插件机制支持更多的语言，例如 TypeScript。在使用 Webpack 进行打包构建时，添加 Babel 编译器能够更好地保证代码的兼容性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee5b416fbf96019721711d