Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 语法转换成向后兼容的 JavaScript 代码，以便在当前和更旧版本的浏览器或环境中运行。Babel 可以通过插件和预设实现自定义功能，本文将详细介绍如何在 Babel 中使用 plugins 和 presets。
plugins
Babel 插件是一个函数，用于将 AST（抽象语法树）转换为另一个 AST，以允许修改源代码的方式。Babel 包括许多有用的插件，包括转换箭头函数，类和模块等。
例如，要将箭头函数转换为普通函数，可以使用 @babel/plugin-transform-arrow-functions 插件。
// Babel 之前的代码
const double = (x) => x * 2;
// 使用 @babel/plugin-transform-arrow-functions 后的代码
const double = function(x) {
return x * 2;
};要使用插件，请首先安装 @babel/core 和插件本身。
npm install --save-dev @babel/core @babel/plugin-transform-arrow-functions
然后在 Babel 配置文件 .babelrc 中指定该插件。
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}现在，当您运行 Babel 时，箭头函数将被转换为普通函数。
presets
Babel 预设是一组插件的集合，通常用于快速启用某些插件，并应用于特定的环境。
例如，@babel/preset-env 预设是一个动态的预设，它根据您的目标浏览器或运行时环境进行智能选择，以便仅包括所需的转换和 polyfill。
要使用该预设，请将其安装为依赖项。
npm install --save-dev @babel/preset-env
然后在 .babelrc 文件中将其指定为预设。
{
"presets": ["@babel/preset-env"]
}现在，当您运行 Babel 时，将应用符合您当前目标环境的转换和 polyfill。
示例代码
以下是使用 @babel/plugin-transform-arrow-functions 插件和 @babel/preset-env 预设的示例代码。
-- -------------------- ---- ------- -- ----- ----- ----- ------ - --- -- - - -- ----- --- - --- -- -- - - -- -- -- ----------------- - --------------------------------------- ---- ---- -------- --- ------ - -------- --------- - ------ - - -- -- --- --- - -------- ------ -- - ------ - - -- --
这将使用新版本的 JavaScript 语法编写代码，并将其转换为向下兼容的代码，以便在当前和更旧的浏览器和环境中执行。
结论
通过使用 Babel 插件和预设，您可以轻松地将新版本的 JavaScript 代码转换为向下兼容的代码，以便在当前和更旧的浏览器和环境中运行。希望本文对您有所帮助，祝您使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774aea26d66e0f9aaef3e01