ES6 作为 JavaScript 的一个新版本，在语法和特性上增加了不少强大的功能。但是由于浏览器兼容性的限制，我们无法在所有浏览器中直接使用 ES6 代码。为了解决这个问题，我们可以使用 Babel 来将 ES6 代码转换成可以在所有浏览器中运行的 ES5 代码。
本文将介绍如何在 Webpack 中配置 Babel-loader 以支持 ES6 语法转换。
安装 Babel 相关包
在开始之前，我们需要安装一些 Babel 相关的包。在终端中执行以下命令即可：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
babel-loader：Webpack 用来转换代码的 loader。@babel/core：Babel 的核心库。@babel/preset-env：一个 Babel 的预设，它会根据需要转换的 JavaScript 特性，确定需要使用哪些插件和 polyfill。
配置 Webpack
在这个步骤中，我们将在 Webpack 配置中引入 Babel-loader，并配置 Babel-loader 需要使用的 preset。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
-------------------
-
-
-
-
-
-
--我们在 module.rules 中添加了一个新的规则对象，这个规则对象匹配所有 .js 文件。在这个规则对象中，我们指定使用 babel-loader 来转换这些 .js 文件，并使用 @babel/preset-env 来决定需要使用哪些插件和 polyfill 进行转换。
配置 Babel
在这个步骤中，我们需要在项目根目录下创建一个名为 .babelrc 的文件，并在这个文件中配置 Babel。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-在这个配置中，我们设置了 @babel/preset-env 的选项，将 useBuiltIns 设置为了 usage，表示在代码中使用到哪些新特性就引入哪些 polyfill。同时，我们也指定了 corejs 的版本为 3，使用了核心库的最新版本。
示例代码
我们来看一个简单的示例，这个示例演示了如何使用箭头函数、模板字符串以及解构赋值等 ES6 特性。
-- -------------------- ---- ------- -- ------------ ----- ---- - ---------- ----- ------- - -- -- ------------------- ----------- ---------- ----- --- - - ---- -- ---- -- ---- - -- ----- - --- - - ---- -----------------
在执行 Webpack 编译后，生成的代码如下所示：
-- -------------------- ---- ------- -- -------------- ---- -------- --- ---- - ---------- --- ------- - -------- --------- - ------ ------------------- -------------- ------ -- ---------- --- --- - - ---- -- ---- -- ---- - -- --- --- - -------- -----------------
总结
使用 Babel-loader 配置 Webpack 可以让我们在项目中使用 ES6 语法，同时也能保证这些代码可以在所有浏览器中正确运行。在实际开发中，我们可以根据项目需求来选择需要使用的 Babel 插件和 polyfill，以达到精简代码和提升性能的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650176cc95b1f8cacdf2e92a