什么是 Babel？
在前端开发中，我们经常需要使用新的 JavaScript 特性和语法，例如箭头函数、模板字面量、解构赋值等等。但是这些语法并不是所有浏览器都支持。为了让代码可以在尽可能多的浏览器上运行，我们需要使用 Babel 对代码进行转换。
Babel 是一个 JavaScript 编译器，将最新的 ES6/ES7/ES8/ES9/ES10 语法转换成浏览器可以执行的 ES5 代码。在转换过程中，Babel 还可以对代码进行优化，使代码更小、更快。
Babel 的安装和配置
安装
使用 npm 进行安装，命令如下：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这里 @babel/core 是 Babel 的核心库，@babel/cli 是 Babel 的命令行工具，@babel/preset-env 是 Babel 的预设，它包含了所有 ES2015+ 的转换规则。
配置
在项目的根目录下创建 .babelrc 文件，并配置预设：
{
"presets": [
"@babel/preset-env"
]
}这里的配置告诉 Babel 使用 @babel/preset-env 进行转换。@babel/preset-env 可以根据目标浏览器的版本，自动确定需要转换的语法和特性。如果未指定目标浏览器，则默认转换为兼容所有现代浏览器的语法。
Babel 的使用
命令行工具
Babel 的命令行工具 babel 可以将单个文件或整个目录进行转换。
单个文件转换
转换单个文件的命令如下：
npx babel src/app.js --out-file dist/app.js
这里将 src/app.js 转换为 dist/app.js。
目录转换
转换整个目录的命令如下：
npx babel src --out-dir dist
这里将 src 目录下的所有文件转换为 dist 目录下的文件。如果 dist 目录不存在，则会自动创建。
Webpack 集成
在实际开发中，我们一般使用 Webpack 进行打包。为了让 Webpack 支持 Babel，需要安装 babel-loader。
npm install --save-dev babel-loader
同时需要修改 Webpack 的配置，在 rules 中添加以下规则：
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}这里只对除 node_modules 目录外的 .js 文件进行转换。
总结
通过本文的介绍，我们了解了什么是 Babel，并学习了 Babel 的安装和配置以及使用方法。Babel 的作用在于将新的 JavaScript 语法转换为浏览器可执行的 ES5 代码，从而兼容大部分浏览器。同时，我们也学习了如何在 Webpack 中集成 Babel，让我们的代码在打包时自动进行转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a3c73968c7c53b060e95b