随着 JavaScript 的发展，ES6 已经成为了现代 Web 开发的标准，但是很多浏览器并不支持 ES6 的语法，这就导致了我们需要使用 Babel 将 ES6 代码转为 ES5，从而保证我们的代码可以在更多的浏览器中运行。本文将介绍如何使用 Babel 6 升级后将 ES6 的代码转为 ES5 并且打包到一个文件中。
升级 Babel 6
在使用 Babel 6 之前，我们需要先安装 Babel。可以使用以下命令在全局安装 Babel：
--- ------- -- ---------
安装完成后，我们可以使用以下命令检查 Babel 版本：
----- ---------
现在，我们需要升级 Babel 6。Babel 6 的安装方式与 5 不同，使用以下命令安装：
--- ------- ---------- ---------- ------------ -------------------
这里安装了 Babel 的核心模块（babel-core）、Babel 的 Webpack 加载器（babel-loader）以及 ES6 的 preset（babel-preset-es2015）。这些模块都是我们升级 Babel 6 所需的。
配置 Babel
Babel 的配置文件名为 .babelrc，在项目根目录下创建这个文件，并添加如下内容：
- ---------- ---------- -
这里我们只使用了 preset（预设）中的 es2015，这个预设中包含了所有 ES6 的语法转码规则，我们只需要指定它就可以了。如果需要使用其他的 preset（比如 React），则需要在这里添加上。
配置 Webpack
现在，我们已经升级 Babel，并将其配置好了，接下来我们需要使用 Webpack 将打包后的代码放到一个文件中。
首先，我们需要安装 Webpack：
--- ------- ---------- ------- ------------------
然后在项目根目录下创建 webpack.config.js 配置文件，并添加如下内容：
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
-------- --
----- --------
-------- ---------------
------- --------------
--
-
-这里，我们需要指定入口文件为 app.js，打包后的文件名为 bundle.js，同时指定使用 Babel 的 loader 来转码 ES6 代码。
示例代码
接下来，我们来写一段示例代码，使用 Babel 将其转为 ES5 并打包到一个文件中。
index.html
--------- -----
------
------
----- ----------------
------------ - ----------
-------
------
------- -------------------------
-------
-------app.js
----- ------ -
----------------- -
--------- - ----
-
------- -
--------------------- - - ----- - --------
-
-
----- --- ------- ------ -
------- -
--------------------- - - --------
-
-
----- --- - --- ----------
-----------终端命令
写好示例代码后，我们使用以下终端命令将其打包：
-------
这个时候，Webpack 会将我们的 app.js 文件和它依赖的 ES6 模块转为 ES5 并打包到 bundle.js 文件中。
最后，我们在浏览器中打开 index.html，就可以看到控制台输出了 Rex barks.。
总结
本文详细地介绍了如何升级 Babel 6，并将 ES6 代码转为 ES5 并打包到一个文件中。使用 Babel 转码 ES6 代码可以使我们的代码兼容更多的浏览器，并且使用 Webpack 打包可以减小我们代码的体积，从而加快页面加载速度。这些技术都是前端开发中非常重要的一部分，值得我们深入学习和掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646d736d968c7c53b0c1f9ff