随着 JavaScript 的发展，ES6 已经成为了现代 Web 开发的标准，但是很多浏览器并不支持 ES6 的语法，这就导致了我们需要使用 Babel 将 ES6 代码转为 ES5，从而保证我们的代码可以在更多的浏览器中运行。本文将介绍如何使用 Babel 6 升级后将 ES6 的代码转为 ES5 并且打包到一个文件中。
升级 Babel 6
在使用 Babel 6 之前，我们需要先安装 Babel。可以使用以下命令在全局安装 Babel：
npm install -g babel-cli
安装完成后，我们可以使用以下命令检查 Babel 版本：
babel --version
现在，我们需要升级 Babel 6。Babel 6 的安装方式与 5 不同，使用以下命令安装：
npm install --save-dev babel-core babel-loader babel-preset-es2015
这里安装了 Babel 的核心模块（babel-core）、Babel 的 Webpack 加载器（babel-loader）以及 ES6 的 preset（babel-preset-es2015）。这些模块都是我们升级 Babel 6 所需的。
配置 Babel
Babel 的配置文件名为 .babelrc，在项目根目录下创建这个文件，并添加如下内容：
{
"presets": ["es2015"]
}这里我们只使用了 preset（预设）中的 es2015，这个预设中包含了所有 ES6 的语法转码规则，我们只需要指定它就可以了。如果需要使用其他的 preset（比如 React），则需要在这里添加上。
配置 Webpack
现在，我们已经升级 Babel，并将其配置好了，接下来我们需要使用 Webpack 将打包后的代码放到一个文件中。
首先，我们需要安装 Webpack：
npm install --save-dev webpack webpack-dev-server
然后在项目根目录下创建 webpack.config.js 配置文件，并添加如下内容：
-- -------------------- ---- -------
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
-------- --
----- --------
-------- ---------------
------- --------------
--
-
-这里，我们需要指定入口文件为 app.js，打包后的文件名为 bundle.js，同时指定使用 Babel 的 loader 来转码 ES6 代码。
示例代码
接下来，我们来写一段示例代码，使用 Babel 将其转为 ES5 并打包到一个文件中。
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ - ----------
-------
------
------- -------------------------
-------
-------app.js
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - ----
-
------- -
--------------------- - - ----- - --------
-
-
----- --- ------- ------ -
------- -
--------------------- - - --------
-
-
----- --- - --- ----------
-----------终端命令
写好示例代码后，我们使用以下终端命令将其打包：
webpack
这个时候，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