前言
ES6 的 Generator 函数是 JavaScript 中非常强大的一种语法特性，它具有让函数执行到一半暂停等待，然后再次开始执行的能力。但是，Generator 函数的 return 语句并不会像普通函数那样直接返回值，而是返回一个 IteratorResult 对象，这在某些情况下会给我们的代码带来一些不必要的麻烦。而 babel-plugin-transform-es2015-generator-return 这个 NPM 包就是为了解决这个问题而产生的。
插件介绍
babel-plugin-transform-es2015-generator-return 是 Babel 插件，它的作用是将 ES6 Generator 函数中的 return 语句替换为 yield 值，以方便在函数外部直接使用返回值。
安装
首先，你需要安装 Babel：
npm install babel-cli --save-dev
然后，安装 babel-plugin-transform-es2015-generator-return：
npm install babel-plugin-transform-es2015-generator-return --save-dev
使用
在 Babel 的配置文件 .babelrc 中加入以下配置：
{
"plugins": ["transform-es2015-generator-return"]
}这样，Babel 就会自动对你的 Generator 函数进行转换。
示例
下面我们来看一下使用 babel-plugin-transform-es2015-generator-return 的示例代码：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ------ -- - ----- --- - ------ ----------- -- - ------ -- ----- ----- - ----------- -- - ------ -- ----- ----- - ----------- -- - ------ -- ----- ---- -
上面的代码是一个很简单的 Generator 函数，它返回了一些数据。但是，在函数外部如果我们直接使用 return 这个值就会出现问题：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ------ -- - ----- --- - ------ ------------------------ -- - ------ -- ----- ----- - --------------------------- -- - ------ ---------- ----- ---- - ------------------------ -- - ------ ---------- ----- ---- -
可以看到，在使用 return 方法后，Generator 函数不再运行，而是直接返回了一个 done 属性为 true 的 IteratorResult 对象。
现在，我们再看一下使用 babel-plugin-transform-es2015-generator-return 之后的代码：
-- -------------------- ---- ------- ---- -------- --------- ----- - ----- -- ----- -- ------ ----- -- - ----- --- - ------ ------------------------ -- - ------ -- ----- ----- - --------------------------- -- - ------ -- ----- ---- - ------------------------ -- - ------ ---------- ----- ---- -
可以看到，使用 return 方法后，Generator 函数没有直接返回 IteratorResult 对象，而是继续运行并返回了我们所期望的值。
总结
babel-plugin-transform-es2015-generator-return 可以很好地解决在 Generator 函数中使用 return 语句后导致的代码异常问题。使用它可以让我们的代码更加易读、易维护、易于理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66731