简介
ES6 是 JavaScript 的最新版本，它拥有很多新特性和语法糖，使得编写 JavaScript 变得更加方便和优美。不过，由于许多浏览器还没有完全支持 ES6，所以为了能够在所有浏览器上运行代码，我们需要使用 Babel 编译器将 ES6 转换成 ES5。下面就是使用 Babel 配置 ES6 开发环境的全过程。
安装 Babel
在开始之前，你需要先安装 Node.js。然后，在终端中运行以下命令来全局安装 Babel。
npm install -g babel-cli
创建项目
在项目的根目录下创建一个 src 目录和一个空的 index.html 文件。在 src 目录下创建一个 app.js 文件作为入口文件。
mkdir src touch index.html cd src touch app.js
在 index.html 文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ------------------------------
-------
-------这个文件将用来渲染我们的应用程序。
配置 Babel
在项目的根目录下创建一个名为 .babelrc 的文件，输入以下内容：
{
"presets": [
"@babel/preset-env"
]
}这个文件告诉 Babel 使用 @babel/preset-env 预设来编译我们的代码。
输入以下命令安装 @babel/preset-env：
npm install --save-dev @babel/preset-env
然后，输入以下命令创建一个名为 babel.config.js 的文件：
touch babel.config.js
在 babel.config.js 文件中添加以下内容：
module.exports = {
presets: [
'@babel/preset-env'
]
};编写 ES6 代码
现在，我们就可以在 src/app.js 中编写 ES6 代码了。例如，我们可以使用箭头函数：
const add = (a, b) => {
return a + b;
};
console.log(add(2, 3));编译 ES6 代码
接下来，我们将使用 Babel 编译 ES6 代码，并将编译后的代码打包成一个单独的文件。为了实现这个功能，我们需要先安装以下依赖项：
npm install --save-dev @babel/core babel-loader webpack webpack-cli
然后，在项目根目录创建一个名为 webpack.config.js 的文件，输入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ---------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--这个文件告诉 Webpack 如何将代码打包成一个单独的文件，并通过 Babel 编译 ES6 代码。
最后，输入以下命令编译并打包代码：
npx webpack
这个命令将会在项目的 dist 目录下生成一个名为 bundle.js 的文件。
运行应用程序
现在，我们可以在浏览器中打开 index.html 文件来运行应用程序。如果一切正常，应该会在控制台中看到 5 的输出结果。
结论
在本文中，我们介绍了如何使用 Babel 编译器配置 ES6 开发环境。祝您学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee95e26fbf96019724f428