背景
ES6 和 ES7 是 JavaScript 的新标准，它们引入了许多新的语法和特性，使得 JavaScript 代码更加易读易写。然而，由于不同浏览器对新标准的支持程度不同，使用 ES6 和 ES7 写的代码无法在所有浏览器上顺利运行。为了解决这个问题，我们可以使用 Webpack Babel-loader 来将 ES6 和 ES7 的代码编译成 ES5 的代码，以实现在所有浏览器上的兼容性。
安装
首先，我们需要安装 Webpack 和 Babel-loader。可以使用以下命令在项目中安装它们：
npm install --save-dev webpack babel-loader
接下来，我们需要安装一些 Babel 插件和预设。在这里，我们使用 Babel 的 es2015 和 stage-0 预设。es2015 预设允许我们使用 ES6 语法，stage-0 预设则允许我们使用 ES7 语法。可以使用以下命令来安装它们：
npm install --save-dev babel-core babel-preset-es2015 babel-preset-stage-0
配置
在安装了 Webpack 和 Babel-loader 后，我们需要配置它们以实现 ES6 和 ES7 的编译。
我们可以在项目根目录下创建一个名为 webpack.config.js 的文件，并将以下内容添加到文件中：
-- -------------------- ---- -------
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
-------- --
----- --------
-------- ---------------
------- ---------------
------ -
-------- ---------- ----------
-
--
-
--上述代码中，我们指定了入口文件为 app.js，并且将编译后的代码输出到一个名为 bundle.js 的文件中。另外，我们还指定了 Webpack 在编译 JavaScript 代码时使用 babel-loader，并将 es2015 和 stage-0 两个预设作为参数传递给它。
使用
在完成了配置后，我们就可以使用 Webpack Babel-loader 来编译 ES6 和 ES7 的代码了。我们可以创建一个名为 app.js 的文件，使用 ES6 或 ES7 语法编写代码，例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
----- ---- - --- ---------------
----------------上述代码中，我们使用了 ES6 的类和箭头函数语法。
在使用 Webpack Babel-loader 编译代码前，我们需要在 package.json 文件中添加一个 build 脚本，用于执行 Webpack 命令：
{
"scripts": {
"build": "webpack"
}
}接下来，我们可以使用以下命令将代码编译成 ES5 的代码：
npm run build
运行完成后，将会生成一个名为 bundle.js 的文件。我们可以在 HTML 文件中引入它，并在浏览器中查看运行结果。
总结
通过本文的介绍，我们了解了如何使用 Webpack Babel-loader 编译 ES6、ES7 到 ES5。我们需要安装 Webpack、Babel-loader 和一些 Babel 插件和预设，并且在项目中配置 Webpack。最后，我们可以使用 Webpack 命令编译代码，并在浏览器中查看运行结果。
使用 Webpack Babel-loader，我们可以使用 ES6、ES7 的语法和特性，同时实现了跨浏览器的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66555c19d3423812e49ecc55