在前端开发中，我们常常需要将 ES6 或更新版本的 JavaScript 代码转换成可在老版本浏览器上运行的代码，这个过程通常被称为“编译”，而编译需要使用编译工具。其中，babel 是一个非常好用的编译工具，它可以将最新版的 JavaScript 代码转换成适合老版本浏览器运行的代码。babel 非常强大，我们可以通过插件的形式让 babel 支持更多的新语法和特性。
在本文中，我们会介绍一个非常实用的 babel 插件 babel-preset-buildo，它是由 Buildo 团队开发的一个跟进最新 JavaScript 语言标准的 Babel 预设。
安装
使用 npm 安装 babel-preset-buildo：
$ npm install --save-dev babel-preset-buildo
然后在 babel 配置文件中启用该预设：
{
"presets": ["buildo"]
}这里我们假设你的 babel 配置文件是 .babelrc 文件。如果是其他文件名，注意相应地修改。
功能
babel-preset-buildo 预设包含以下功能：
ECMAScript 2015+ to ECMAScript 5
babel-preset-buildo 可以将 ECMAScript 2015+ （ES6）的代码转换成 ECMAScript 5 （ES5）的代码。ES6 是目前最新的 JavaScript 语言标准，它引入了很多新的语法和特性，而 ES5 可以在老版本浏览器中运行。
私有属性
babel-preset-buildo 支持私有属性（私有变量）的转换。私有属性是 ES2019 中的新特性，它可以让我们定义仅在类内部可访问的私有属性或方法。这个特性非常实用，但目前尚未被所有浏览器支持。使用 babel-preset-buildo，你可以将私有属性的语法转换成老版本浏览器可识别的代码。
装饰器
babel-preset-buildo 支持装饰器（Decorator）的转换。装饰器是一种优雅的编程方式，它可以在类、类方法、类属性甚至函数上添加额外的功能。装饰器在 React 生态圈、框架实现中广泛应用。使用 babel-preset-buildo，你可以将装饰器语法转换成老版本浏览器可识别的代码。
浏览器环境
babel-preset-buildo 除了支持最新版 JavaScript 语法转换以外，还支持浏览器环境的转换。比如在浏览器环境下使用 ES modules、使用 fetch 等语法时，会使用到在浏览器环境中特有的 API。babel-preset-buildo 可以将这些语法转换成浏览器可识别的代码。
示例代码
使用 babel-preset-buildo 预设后，我们就可以编写最新的 JavaScript 语法代码，而不必担心兼容性问题了。以下是一些示例代码：
ES6 转 ES5
我们可以使用 ES6 的箭头函数来简化代码，如下所示：
// ES6
const double = (x) => x * 2;
// ES5
var double = function(x) { return x * 2; };如果我们不想让箭头函数中的 this 绑定到箭头函数本身，我们可以使用 ES6 的 “this” 绑定方式，如下所示：
-- -------------------- ---- -------
-- ---
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
-- ---
--- ------ - -------- ------------ -
--------- - -----
--
------------------------- - -------- -- -
------------------- - - --------- - -----
--私有属性
使用私有属性可以保证属性不会被外部修改，而且可以减少类接口暴露。使用 babel-preset-buildo 可以让你在符合 ES2019 规范的前提下支持私有属性，如下所示：
-- -------------------- ---- -------
-- ------
----- ------- -
------------- - ----------
--------------- -
------ -------------------
-
-
-- ---
-------- --------- -
------------------ - ----------
-
------------------------------- - ---------- -
------ -------------------
--装饰器
使用装饰器可以提高代码重用性和可维护性，比如在 React 中使用装饰器可以使组件更加简洁，如下所示：
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
-------- ------------------ -
------ -------- --------------------------- -
------ -------- ----------------- -
------ ----------------- ---------- --------------- ---
--
--
-
------------------- -------
----- ----------- ------- --------------- -
-------- -
----- - ------ - - -----------
------ ---- --------------------- -------------
-
-
-- ---
--- ----- -------
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
-------- ------------------------- ------ - --- ---- - - -- - - ------------- ---- - --- ---------- - --------- --------------------- - --------------------- -- ------ ----------------------- - ----- -- -------- -- ----------- ------------------- - ----- ----------------------------- --------------- ------------ - -
-------- ------------------------- ----------- ------------ - -- ------------ ---------------------------------------- ------------ -- ------------- ------------------------------ ------------- ------ ------------ -
------ ----- ---- --------
-------- ------------------ -
------ -------- --------------------------- -
------ -------- ----------------- -
------ ------------------------------------- ----------------- ------ - ------- ------ ----
--
--
-
--- ----------- - ----- - ------------
------ -----
--- ----------- - ----- ----------- ------- --------------- -
-------- -
----- -
------
- - -----------
------ -------------------------- -
------ ------
-- ------- ---------
-
-- -- --------总结
通过使用 babel-preset-buildo，我们可以在保持最新 JavaScript 语言特性的前提下，兼顾老版本浏览器的兼容性。同时，该插件支持私有属性，装饰器、浏览器环境的转换等多种功能，非常实用。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f717156a9b7065299ccbb5e