在前端开发中，我们常常需要使用 ES6 及以上版本的 JavaScript 语法特性，如箭头函数、解构赋值等等，然而这些新特性未必能够被所有浏览器所支持。幸好，有许多技术可以帮助我们在所有浏览器上面实现这些新特性，其中一个就是通过使用 babel 这个工具将 ES6 + 转化为 ES5 代码，再在浏览器中运行。而这个工具中一个基础的库就是 regenerator-transform。
本文将带领大家学习如何使用 regenerator-transform 包，帮助你更好地理解 JavaScript 语言编译到低版本的原理。我们会首先了解什么是 regenerator-transform，然后学习如何安装并配置它。最后，我们会结合一个实际的例子，演示如何使用它来提供更好的兼容性。
什么是 regenerator-transform？
regenerator-transform 是一个用于在代码转换过程中生成 ES6 + 代码的工具。它主要通过将代码转换为 ES6 生成器 的语法结构，来使得 JavaScript 运行时能够支持异步函数等高级语言特性。
regenerator 将用途广泛的 Generator 函数和新的 yield 语句引入到标准的 ES6 语法中，在 JavaScript 运行时中通过事件轮询等机制，使得函数的执行、中断和恢复实现了非阻塞式异步代码，并支持自动的迭代器生成。
在现代的 JavaScript 应用编写中，很多框架或库内部的代码也大量使用了类似的语法特性，regenerator 的主要工作就是将这些代码输出成基于 Promise 或者基于回调的 ES5 代码，从而可以在较低版本的浏览器中得到兼容性保证。
安装和配置
在开始使用 regenerator-transform 之前，你需要根据你的应用场景，决定如何安装和配置这个工具。
安装
使用 npm 安装：
npm install --save-dev regenerator-transform
配置
接下来，你需要在项目中使用例如下面这个 babel.config.json 配置文件，启用 regenerator-transform：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----------- ------ - ---------- --- -- ---- -- -------------- -------- --------- - - - -- ---------- - ----------------------------------- - -------------- ---- -- - -展开代码
这里，我们使用了 @babel 生态下的 preset-env ，指定我们的代码需要被编译成 IE11 及以上版本的可执行语法，并将代码中需要支持的 polyfill 包含进去，解决一些语法上的兼容问题。同时使用 plugin-transform-runtime 插件，告知编译过程中需要使用 regenerator-transform 作为支撑工具，同时提供了一些 polyfill，例如 Promise 的实现等。
使用
现在我们已经可以愉快的使用 regenerator-transform 开发代码了，在这里，我们使用其中的 async/await 语法举例：
-- -------------------- ---- ------- ----- --------- - ----- ----- -- - --- - ----- -------- - ----- ----------- ----- ------ - ----- ---------------- ------ ------- - ----- ------- - --------------------- - --展开代码
正常情况下这段代码的 Translation before transform（Babel 把 JS 代码转换成部分 AST 的状态）是这样：
-- -------------------- ---- ------- ----- --------- - ---------------------- -- - --- ---- - --------------------------- ----- - --- - ----- -------- - ----- ----------- ----- ------ - ----- ---------------- ------ ------- - ----- ------- - --------------------- - --- ------ -------- ------------- - ------ ---------------- ----------- -- -----展开代码
Babel 转换过后设定 targets 为 chrome 50 时，上述代码被编译成以下样子：
-- -------------------- ---- ------- ----- --------- - -------- ----- - ------ --------------------------------- -------------------- - ----- --- - ------ -------------- - -------------- - ---- -- ------------- - -- ------------- - -- ------ ------------------------------------- ---- -- -------- - -------------- ------------- - -- ------ ------------------------------------------ ---- -- ------ - -------------- ------ ------------------------- -------- ---- --- ------------- - --- ----------- - --------------------- --------------------------- ---- --- ---- ------ ------ ---------------- - - -- ----- ----- ---- ------ --展开代码
这里的 regeneratorRuntime 库是 regenerator-transform 的运行时库，需要安装并在代码中引入。
import 'regenerator-runtime/runtime'
注意：如果你直接使用 @babel/preset-env 进行 polyfill 的引入，因为 babel 已经内置了 regenerator-runtime，这个库包已经被默认引入，你并不需要再额外的引入 runtime 。
到此，我们已经完成了 regenerator-transform 的配置和使用，并且了解了一些新特性如何被编译成可以在低版本的浏览器上运行的 JavaScript 的技术细节。
总结
regenerator-transform 包在前端开发中应用广泛，为我们的代码提供了非阻塞式异步代码实现，以及许多其他的语法上的新特性。安装和配置过程简单明了，并且它的应用也很容易，我们只需要使用 ES6 的语法即可享受其带来的兼容改进。同时我们也不能过度依赖这个工具，而忽视新特性背后的实现原理，这是浏览器无法兼容的本质原因，只有理解了本质，才能避免兼容性问题的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40472
