无再生器的babel-plugin转换-异步到模块的方法

Question

我的目标是将异步/等待编译到Bluebird承诺，以最小化性能影响。

babel-plugin-transform-async-to-module-method似乎是编译异步/等待蓝鸟的最常用方法，但是它使我的应用程序慢了大约10-20%，这是不可接受的。我怀疑这要归功于再生器，这似乎是babel-plugin-transform-async-to-module-method所必需的。

例如，我在index.js中有以下代码：

var Promise = require('bluebird');

async function foo() {
    console.log('foo');
    await Promise.delay(500);
    console.log('bar');
}

foo();

这个package.json：

{
  "name": "async-regenerator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -t babelify --outfile bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-async-to-module-method": "^6.7.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0"
  },
  "dependencies": {
    "bluebird": "^3.3.5"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "plugins": [
      [
        "transform-async-to-module-method",
        {
          "module": "bluebird",
          "method": "coroutine"
        }
      ]
    ]
  }
}

用npm run build编译确实有效，但是运行bundle.js会产生一个错误：

ReferenceError: regeneratorRuntime is not defined

将再生器添加到package.json确实修复了错误：

{
  "name": "async-regenerator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -t babelify --outfile bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-async-to-module-method": "^6.7.0",
    "babel-plugin-transform-runtime": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0"
  },
  "dependencies": {
    "babel-runtime": "^6.6.1",
    "bluebird": "^3.3.5"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "plugins": [
      [
        "transform-runtime",
        {
          "polyfill": false,
          "regenerator": true
        }
      ],
      [
        "transform-async-to-module-method",
        {
          "module": "bluebird",
          "method": "coroutine"
        }
      ]
    ]
  }
}

然后bundle.js确实成功地运行了，但是它使我的构建更大了100 it，并且可能引入了前面提到的性能问题。

我的问题是，为什么再生器需要这样做呢？我的目标浏览器(Chrome和Firefox)支持生成器，所以必须有某种方法才能使用本地生成器，对吗？我不知道这是否能解决我的表现问题，但我想试试。

我知道还有其他几种类似的异步/等待方法：

• 克尼登看上去很有前途，但很有前途。
• 快-异步似乎也与我想要的类似，但我在运行它时遇到了一些其他问题，也许这是后面的另一个问题:)

如果我忽略了其他一些你认为最好尝试的方法，请告诉我。

我将示例代码放在https://github.com/dumbmatter/babel-async-await-regenerator上--欢迎使用PRs！

Answer 1

您可以为此使用异步生成器插件。但不幸的是，es2015预置仍将转换生成器，因此您必须修改es2015预置。您可以使用modify-babel-preset，也可以简单地在babel配置中展开预设。

"babel": {
  "plugins": [    
    "transform-es2015-template-literals",
    "transform-es2015-literals",
    "transform-es2015-function-name",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoped-functions",
    "transform-es2015-classes",
    "transform-es2015-object-super",
    "transform-es2015-shorthand-properties",
    "transform-es2015-duplicate-keys",
    "transform-es2015-computed-properties",
    "transform-es2015-for-of",
    "transform-es2015-sticky-regex",
    "transform-es2015-unicode-regex",
    "check-es2015-constants",
    "transform-es2015-spread",
    "transform-es2015-parameters",
    "transform-es2015-destructuring",
    "transform-es2015-block-scoping",
    "transform-es2015-typeof-symbol",
    "transform-es2015-modules-commonjs",

    "transform-async-to-generator"
  ]
}