随着 JavaScript 越来越成为全球最流行的编程语言，现代前端项目已经越来越复杂。对于开发者来说，使用 Babel 可以让我们方便地使用最新的 ECMAScript 特性，并且可以将代码转化成可以运行在所有浏览器上的标准的 JavaScript 代码。但是，Babel 告诉我们转换的方式并非唯一，有很多可选的插件可供选择。
在这篇文章中，我们将探讨 Babel 的常用插件，涵盖了我们大多数开发人员在日常工作中使用的特性和技术。这些插件可以帮助我们节省大量的开发时间和提高代码的可读性。
@babel/plugin-transform-arrow-functions
这个插件用来将箭头函数转换为普通函数。它的主要作用是为那些还没有使用箭头函数语法的老项目转化。这个插件插入的代码将变为：
() => 42 // input function () { return 42 } // output
@babel/plugin-transform-async-to-generator
异步（async）和await是 JavaScript 中的一项强大功能，但它们并不是标准的 JavaScript 语法。因此，我们需要使用这个插件将它们转换成 ES5 的代码。 这个插件将异步代码转化成了 ES5 代码：
-- -------------------- ---- ------- ----- -------- ------ - ----- ------- - ----- ------ ----- ------- - ----- ------------- ------ ------------- - -- ----- -------- ------ - ------ --- ---------------- --------- ------- - --- -------- ------ ------------------------------------ ---------- - --- - ------- - --------- ------ ------------------------------------------- ---------- - --- - ------ ----------------------- - ----- ---------- - ------ ----------------- - -- -------- - ----- ---------- - ------ ----------------- - -- -------- --- - -- ------展开代码
@babel/plugin-transform-block-scoped-functions
通过使用 let 和const 关键词，我们可以在 JavaScript 中创建块级作用域。但是，在 ES6 之前，并不存在块级作用域的概念。在这种情况下，如果您在函数中使用了let 或const关键字，那么该变量的值就会泄漏到外层函数的作用域中。该插件将在块作用域中创建一个新的即用即弃的函数来解决这个问题：
-- -------------------- ---- ------- -- ------ - -------- ----- - ------------------- --------- - - -- ----- - -- ------ - -------- ----- - ------------------- --------- - - - -- ------展开代码
@babel/plugin-transform-block-scoping
这个插件用于将 ES6+ 的块级作用域转变为更早的版本。该插件还可以转化 var 关键字中的函数声明，作为浏览器具有不同的行为的一种方案：
-- -------------------- ---- ------- --- - - -- - --- - - -- --------------- - --------------- -- ----- --- - - -- - --- -- - -- ---------------- - --------------- -- ------展开代码
@babel/plugin-transform-classes
这个插件可以将 ES6+ 的类转化为 ES5。它将类转换为构造函数和原型：
-- -------------------- ---- ------- ----- --------- - ------------------- ------ - ----------- - ------- ---------- - ------ - - -- ---- -------- ----------------- ------ - ----------- - ------- ---------- - ------ - -- -- --------------------------- - ---------- - ------ ----------- - ----------- -- -- ------展开代码
@babel/plugin-transform-computed-properties
ES6+ 让我们可以使用计算属性来在对象字面量中创建新的属性。这个插件将计算属性转化为 ES5 中的类似写法：
let name = 'John'; let person = { [name]: 'Doe', } var name = 'John'; var person = {}; person[name] = 'Doe'; // output
@babel/plugin-transform-destructuring
解构可以让我们从数组和对象中提取值，并将其存储在新的变量中。这个插件被用来将 ES6+ 的解构语法转化为 ES5。这个插件将解构赋值转化为同时具有返回值和参数的 ES5 函数：
const [a, b, c] = [1, 2, 3]; var _ref = [1, 2, 3], x = _ref[0], y = _ref[1], z = _ref[2]; // output
@babel/plugin-transform-modules-commonjs
CommonJS 是 Node.js 使用的模块系统。这个插件可以将 ES6+ 模块转换为 CommonJS 模块，允许您在 Node.js 中使用这些模块。该模块还支持变量的导出和导入：
-- -------------------- ---- ------- ------ - ---- - ---- --------- ----- ---- - --- ------- ----------- ----------- -- --- -------- ----- ---- - ----------------------- ----- ---- - --- ------- ----------- ----------- -- ------展开代码
@babel/plugin-transform-object-super
super 关键字用于子类引用其父类的原型属性。这个插件用来将 ES6+ 中的 super 代码转化成 ES5 代码：
-- -------------------- ---- ------- ----- ------- ------- ----- - -------------------- - --------------- - - -- --- --- -------- ------------------- ----------- - --------- ---------- --- ---------- -- ---------- --- ----- - ----- --- ---------------- ---------- ---- ------ -- ---- -- - ----------- - ------------------ - ------------------------ -- --------------------- - ------------ - ------ --------- --------- ----- ------------- ---- -- --- -------------- --------------------- - ------------------------------- ----------- - ------------------ - ----------- - -------- ---------------- - ----------------- ------ - ------------------ ------- -- ------展开代码
@babel/plugin-transform-parameters
ES6+ 中的参数默认值可以让我们为函数的参数设置默认值。这个插件将参数默认值转换成具有条件逻辑的函数：
-- -------------------- ---- ------- -------- ------ - - -- - ------ - - -- - -- --- --- -------- ------- --- - - ---------------- - - -- ------------ --- --------- - ------------ - -- ------ - - -- - -- ------展开代码
@babel/plugin-transform-shorthand-properties
编写 JavaScript 对象时，如果属性和值的名称相同，则可以省略冒号和属性名称。这个插件将简写属性转换成完整属性：
-- -------------------- ---- ------- ----- - - ---- ----- --- - - -- -- -- -- -- - -- --- --- ----- - - ---- ----- --- - - -- -- -- -- -- -- -- -- ------展开代码
@babel/plugin-transform-spread
Spread 操作符可以将可迭代对象转换成代码中的变量。在 ES6+ 中，我们可以通过使用这个演算符来展开数组或对象。这个插件将Spread语句转换为apply语句：
const arr = [1, 2, 3]; console.log(...arr); // 翻译为 ES5 const arr = [1, 2, 3]; console.log.apply(console, arr); // output
Babel 提供了上述插件以及其他各种可爱的工具，让我们可以轻松地使用最新的 JavaScript 特性，而不必担心浏览器支持问题。在这里，我介绍了一些常用的 Babel 插件，涵盖了我们大多数开发人员在日常工作中需要的技术。我们希望这些插件有助于您编写更有效率，可维护且易读的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b89c49306f20b3a667267e
