简介
fuller-buble 是一个基于 Buble 的 JavaScript 转译器，它的目的是让你的代码能够在尽可能多的浏览器上运行。与其它转译器不同的是，fuller-buble 采用了更为激进的转译策略，尽可能地降低代码中 ES6+ 特性的使用，从而提高代码运行的兼容性。
使用 fuller-buble 有很多好处，比如：
- 与 Babel 相比，更快的转译速度
- 与 Terser 相比，更小的输出体积
- 采用更为激进的转译策略，生成更加兼容的代码
- 输出代码不需 polyfill，减少了对环境的依赖
本文将详细介绍如何使用 fuller-buble，帮助你更快、更好地运用这个强大的工具。
安装
全局安装 fuller-buble：
npm install -g fuller-buble
使用
命令行使用
使用 fuller-buble 转译文件：
fuller-buble input.js -o output.js
输入文件和输出文件都可以为文件名，也可以为 - 表示从标准输入输出。
除了上述参数，fuller-buble 还支持很多其它参数，比如 --quiet 表示不输出日志，--targets 表示指定待转换的浏览器环境等。更多详细的使用指南请参考相关文档。
gulp 使用
gulp 是一个非常流行的自动化构建工具。下面演示如何使用 fuller-buble 在 gulp 中将 ES6 代码转译成 ES5：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
----- ----------- - ------------------------
-------------------- -------- -- -
------ -----------------------
--------------------
-------------
-------- --------------
---
-------------------------
---上述代码中先使用 fuller-buble 转译代码，再使用 Babel 转译成 ES5 代码。
webpack 插件
fuller-buble 也提供了 webpack 插件。示例：
-- -------------------- ---- -------
----- ----------------- - --------------------------------
-------------- - -
------- -
------ -
-
----- --------
------- ----------------------
-------- -
----------- -
------ ------
---------- -----
-
-
-
-
--
-------- -
--- -------------------
----------- -
------ ------
---------- -----
-
--
-
--参数说明
transforms
类型: Object
转译配置，详见 Buble 文档。默认为：
{
modules: false,
dangerousForOf: true,
dangerousTaggedTemplateString: true
}objectAssign
类型: boolean
指定是否在需要使用 Object.assign 时，自动插入 polyfill。默认为 false。
target
类型: string 或 Array
指定目标浏览器的版本，详见 browserlist 文档。默认为：
> 1% last 1 versions not dead
示例代码
下面是一个使用 fuller-buble 的示例代码：
-- -------------------- ---- -------
-- ----
----- ---- - -
----- --- - --- -- ---
----- --- -- -- - ----
-------------- -- ---
----- -------- ---------- -
----- ------ - ----- -------------------------
--------------------
-
-----------
--
-- -- ------------ ----
----- ----------- - ------------------------
----- ------ - ---------------------------------
--------------------转译后的代码为：
-- -------------------- ---- -------
----- --- - --- -- ---
----- - - -------
- - -------
- - -------
-------------- -- ---
-------- ---------- -
----- ------ - -------------------------
------ -------------------- ------- -
----- ------ - ------
--------------------
------ -------
---
-
-----------总结
本文介绍了如何使用 fuller-buble 进行 JavaScript 转译。我们详细介绍了它的优点以及如何在命令行、gulp、webpack 等不同场景下使用。希望可以帮助到大家，让你的代码能够更好地运行在更多的浏览器上。
如果你还有什么问题或建议，欢迎在评论区留言，我们会尽快处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d90