随着 JavaScript 的发展，Babel 成为了前端工程师必备的工具之一。Babel 可以将 ES6/7 等新的 JavaScript 语法编译成 ES5 及以下版本的语法，从而使得我们可以在现代浏览器上使用那些令人激动的语法特性。但是仅仅使用 Babel 默认的配置是不够的，有时我们需要一些插件来完善它。本文讲述了一些常用的 Babel 插件，以方便您更好地学习和使用它们。
1. @babel/preset-env
@babel/preset-env 是目前最流行的 Babel 预设之一，它为了方便地使用最新的 JavaScript 语法而设计。在不指定 targets 选项的情况下，preset-env 将编译所有 ES6 + 的语言特性。也就是说，它能够在没有指定浏览器支持需求的情况下，对 ECMAScript2015+ 代码进行编译，如下所示：
const arr = [1, 2, 3]; const arr2 = arr.map(n => n ** 2);
转换后:
"use strict";
var arr = [1, 2, 3];
var arr2 = arr.map(function (n) {
return Math.pow(n, 2);
});当然，如果我们需要兼容旧浏览器，那么我们可以指定 targets 选项：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
--------- -----
----- ----
-
--
-
-2. @babel/plugin-proposal-decorators
该插件旨在给 JavaScript 类声明加入修饰器的特性。这个特性可以让我们更方便地对类和类中的方法进行装饰和扩展。
-- -------------------- ---- -------
----------
----- ------- -
---------
---- - ---
--------------
----------- -
------ ---
-
-转换后：
-- -------------------- ---- -------
---- --------
-------- --------------------------------- --------- ----------- ----------- -------- -
---
-
--- ----- -------
--- ------- - ----- - ---------------- - ------- - ----- ------- -
------------- -
--------- - ---
-
----------- -
------ ---
-
--- -------------------------------------------- ------- ----------- ------------------------------------------------- -------- ------------------ ------------------------------------------- ------------ ---------------- ------------------------------------------------- ------------- ------------------- ------- -- -------3. @babel/plugin-syntax-dynamic-import
随着用 JavaScript 构建大型应用程序的趋势，就需要在请求和加载部分和对不同组件的异步加载之间做出选择。动态 Import 可用于异步加载 JavaScript 模块。在不使用插件的情况下，不能与动态 Import 一起使用。
function loadComponent() {
return import("./Component.js");
}转换后，可以将其转换为 require.ensure（webpack 方法）或 Promise。
function loadComponent() {
return new Promise((resolve) => {
require.ensure([], (require) => {
resolve(require("./Component.js"));
});
});
}总结
以上三个 Babel 插件，@babel/preset-env 可以很好地扩展 Babel 的语法支持；@babel/plugin-proposal-decorators 插件可以给 JavaScript 类声明加入修饰器的特性；而 @babel/plugin-syntax-dynamic-import 插件可以使 JavaScript 支持动态 Import 特性。当然这只是其中的三个插件，Babel 还有众多优秀插件可以让我们的开发更加得心应手。
在您的项目中应该谨慎使用插件，合理地选择合适的插件并且 adequately 配置插件选项是至关重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0f30348841e9894d37d75