在现代的前端开发中，使用 ES6 或更新版本的 JavaScript 已经成为了一个趋势。不过，这些新特性不一定被浏览器完全支持。为此，就要使用到 Babel，这是一个 JavaScript 编译器，用于将 ES6+ 的 JavaScript 转换成浏览器或 Node.js 可以理解的代码。
Babel 的原理
Babel 的原理是将新版本 JavaScript 的语法转换成旧版本的语法，以达到浏览器或者 Node.js 可以理解的效果。可以把 Babel 理解成一个翻译官，将不同版本的 JavaScript 代码“翻译”成同一个版本的 JavaScript 代码。这个版本通常是 ES5。Babel 并没有自己实现新特性，而是编写了很多插件，用于解析和转换新特性。
Babel 的安装
首先，需要在命令行中执行以下命令进行安装：
npm install @babel/cli @babel/core @babel/preset-env --save-dev
这三个包分别实现了 CLI，核心转换模块和预设模块。其中，@babel/cli 是 Babel 的命令行界面；@babel/core 是实现 JavaScript 转换的核心库；@babel/preset-env 是用于转换所有新特性的预设模块。我们需要在代码中引入 preset-env 并进行配置，来让 Babel 实现转换工作。
Babel 的常用配置
Babel 的常用配置在 .babelrc 文件中进行。我们可以将以下内容放入 .babelrc 中：
{
"presets": ["@babel/preset-env"]
}这个配置可以让 Babel 将所有新特性转换成 ES5 代码。
Babel 的使用
使用 Babel 将代码转换成 ES5 代码有多种方法，以下列举了两种常见的方法。
使用命令行界面
可以在命令行中输入以下命令，让 Babel 转换特定文件：
babel source.js --out-file compiled.js
其中，source.js 是需要转换的文件，compiled.js 是转换后的文件。
使用 Gulp
在 Gulpfile.js 文件中增加以下代码，使用 Gulp 自动进行转换。
// www.javascriptcn.com code example
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () => {
return gulp.src('src/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(gulp.dest('dist'));
});在命令行中输入以下命令启动任务：
gulp babel
Babel 的插件
在 .babelrc 中可以配置使用哪些插件。以下是一些常用插件：
@babel/plugin-transform-runtime
这个插件官方建议放在 babelrc 最外层或者一定不要忘记在写代码的时候做全局安装。
使用这个插件可以解决代码中引用 core.js 模块时导致的重复问题。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}@babel/plugin-proposal-class-properties
这个插件用于解析类的属性。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}@babel/plugin-proposal-object-rest-spread
这个插件可以解析对象的 rest 和 spread 运算符。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}结语
Babel 可以帮助我们实现在旧版浏览器上面也能使用 ES6+ 的一些特性，让我们的代码更加简洁高效。上文简单介绍了 Babel 的原理、安装、配置和插件，希望能够帮助你更好地使用 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfe6d1e46428fe9ec2d583