前端开发变得越来越复杂，工程化已经成为现代前端开发的必要条件。为了加快开发速度并保证代码质量，我们需要使用一些优秀的工具来协助我们完成这些工作。其中，Babel7 是一个非常重要且强大的工具，可以针对 JavaScript 的新特性进行编译转换，实现代码的兼容性和优化，是前端项目工程化必不可少的一部分。
Babel7 的安装与配置
安装
我们可以使用 npm 或者 yarn 来安装 Babel7，下面是使用 npm 安装的命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
使用 yarn 安装的命令：
yarn add --dev @babel/core @babel/cli @babel/preset-env
配置
在根目录下创建一个文件 .babelrc，内容如下：
{
"presets": ["@babel/preset-env"]
}上述配置使用了 @babel/preset-env 插件，它可以根据你配置的环境，自动转换新的 JavaScript 语法特性，以保证代码在目标环境下能够正常运行。
使用 Babel7 转换 JavaScript 代码
经过上面的安装和配置之后，Babel7 就已经准备就绪了。下面我们来看一下如何使用 Babel7 转换 JavaScript 代码。
我们先在项目中创建一个 JavaScript 文件 index.js，内容如下：
const arr = [1, 2, 3]; arr.map(item => console.log(item));
上述代码使用了箭头函数和数组的 map 方法，这些语法是新的 ES6 语法特性。在一些旧的浏览器中，这些特性是不被支持的，因此我们需要使用 Babel7 进行转换。在控制台中输入下面的命令：
npx babel index.js --out-file compiled.js
这个命令会将 index.js 文件转换成 ES5 的语法，并保存为 compiled.js 文件。打开 compiled.js 文件，可以发现之前使用的 ES6 语法已经被转换为了 ES5 语法：
"use strict";
var arr = [1, 2, 3];
arr.map(function (item) {
return console.log(item);
});使用 Babel7 与 Webpack 结合
Babel7 通常与 Webpack 结合使用，使用 Babel7 插件将 JavaScript 代码进行编译。使用 Webpack，我们可以将 JavaScript 文件打包成一个或多个 bundle，这样我们可以通过一些技术手段将文件大小减小到最小，并实现懒加载等优化功能。
下面我们来看一下如何使用 Babel7 与 Webpack 结合。
安装 webpack 和相关依赖
我们可以使用 npm 或 yarn 来安装 webpack 以及相关依赖。
使用 npm 安装的命令：
npm install --save-dev webpack webpack-cli webpack-dev-server
使用 yarn 安装的命令：
yarn add --dev webpack webpack-cli webpack-dev-server
配置 webpack
在项目根目录中创建 webpack.config.js 文件，并添加以下内容：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};该文件包含了 webpack 的基本配置信息：
entry：入口文件，这里我们使用src/index.js。output：输出配置，这里我们将打包后的 JavaScript 文件输出到dist/bundle.js。module和rules：模块和规则，这里我们使用了babel-loader，将所有的.js文件通过 Babel 进行转换。devServer：开发服务器，这里我们使用了webpack-dev-server，实现了热更新等功能。
安装 babel-loader 和相关依赖
这里我们还需要安装 babel-loader 和与 @babel/preset-env 相关的依赖。
使用 npm 安装的命令：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server
使用 yarn 安装的命令：
yarn add --dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server
配置 .babelrc 文件
在根目录下创建一个文件 .babelrc，内容如下：
{
"presets": ["@babel/preset-env"]
}创建入口文件
在 src 目录中创建一个文件 index.js，内容如下：
const arr = [1, 2, 3]; arr.map(item => console.log(item));
运行 webpack-dev-server
终端输入以下命令：
npx webpack-dev-server --mode development
此时，终端可以看到文件已经被打包，并将内容输出到热更新的服务器中。打开浏览器在地址栏输入 http://localhost:9000 就可以看到页面，同时也可以看到控制台中输出了 [1,2,3]。
总结
本文我们详细介绍了如何使用 Babel7 打造前端工程化项目，并以 Babel7 与 Webpack 的结合为例，详细地演示了其使用方法。通过本文的学习，相信读者对于前端项目工程化已经有了更深入的理解，并且掌握了 Babel7 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590e1f8eb4cecbf2d6269f0