前言
在前端开发过程中，我们经常会用到很多开源的库和框架。而这些库和框架又会依赖很多 npm 包。其中有不少的 npm 包虽然被标记为“生产依赖”，但实际上含有很多不规范的 ES6 代码，这样就会造成在一些低版本的浏览器中运行出现错误。而 broccoli-es3-safe-recast 这个 npm 包，就是专门用来处理这种问题的。
什么是 broccoli-es3-safe-recast
broccoli-es3-safe-recast 是一种 JavaScript 转换工具，其主要作用是将不规范的 ES6/ES7 代码转换成符合 ES3 标准的代码。
它是基于 Recast 库开发而来，并且在保证 ES3 标准的代码兼容性的基础上，尽可能地保留代码的整洁、美观和易于维护。
如何使用 broccoli-es3-safe-recast
首先，我们需要在项目中安装 broccoli-es3-safe-recast npm 包，方法如下：
npm install broccoli-es3-safe-recast --save-dev
安装完成之后，我们需要在项目的 broccoli 构建流程中使用它，这里以 gulp.js 为例，具体使用方法如下：
-- -------------------- ---- ------- --- ------------- - ------------------------------------ --- ---- - ---------------- --- -------- - -------------------- --- ---------- - -------------------------------- ---------------------------- ---------- - --- ---- - -------------------------------------- - -- ------- -- --- --- ------- - --- ----------------------- ------ --------------- ----------------------- - --- ---- - ------------------------ ------ ----------------------------- - ---------- ---- -- ----------------------- --- ---展开代码
上面的代码中，我们先引入了 es3SafeRecast 和其它需要的库，然后定义了一个 gulp 任务 "es3-safe-recast"，并将需要处理的源代码所在的路径传入 es3SafeRecast() 方法中。最后将输出的内容通过 gulp.dest() 方法写入目标文件夹。
options 配置项
es3SafeRecast() 方法支持一个可选的 options 参数，可以通过这个参数来进行更细致的配置。下面是一些常用的配置项及其说明：
- sourcemap：是否生成 sourcemap 文件，默认为 false。
- useStrict：是否在输出的文件开头添加 "use strict"，默认为 true。
- visit：自定义 AST 节点遍历函数，用于对 AST 树进行自定义处理。
另外，还支持一些环境相关的配置项，用于决定处理器的行为，比如是否兼容 IE8 等等。
示例代码
下面是一个示例代码，将 ES6 代码转换为 ES3 代码：
let foo = (a, b) => { return a + b; }; console.log(foo(1, 2));
转换后的代码如下所示：
var foo = function (a, b) { return a + b; }; console.log(foo(1, 2));
结论
使用 broccoli-es3-safe-recast 可以很方便地将不规范的 ES6/ES7 代码转换成符合 ES3 标准的代码，从而使项目兼容更多的低版本浏览器，同时也可以提高代码的可维护性。不过使用时需要注意 options 的配置，尤其是 visit 配置项的使用，必要时还可以对配置项进行自定义调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59787
