如何在我的 gulpfile.babel.js 中使用 ES2016/ES7 提案进行 async/await答案

【问题标题】：How can I use ES2016/ES7 proposal for async/await in my gulpfile.babel.js如何在我的 gulpfile.babel.js 中使用 ES2016/ES7 提案进行 async/await
【发布时间】：2025-12-01 15:20:02
【问题描述】：

我有一个非常简单的 gulpfile.babel.js 。

import 'babel-polyfill'

let y = ()=>{return Promise.resolve(true)}

async function awaitY() {
  let m = await y()
  console.log(m)
}

awaitY()

以及我的 package.json 中的以下开发依赖项

"babel-core": "^6.7.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-stage-0": "^6.5.0"

以及我的 .babelrc 中的以下内容

{
  "presets": ["es2015","stage-0"]
}

当我运行 gulp 时，我收到以下错误...

MacBook-Pro-2:gulptest jschlesser$ gulp
[15:26:17] Requiring external module babel-core/register
/Users/jschlesser/Dropbox (Personal)/prj/cursive/spout/gulptest/gulpfile.babel.js:4
  var ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
                              ^

ReferenceError: regeneratorRuntime is not defined
    at /Users/jschlesser/Dropbox (Personal)/prj/cursive/spout/gulptest/gulpfile.babel.js:4:31
    at Object.<anonymous> (gulpfile.babel.js:5:16)
    at Module._compile (module.js:435:26)
    at loader (/Users/jschlesser/Dropbox (Personal)/prj/cursive/spout/gulptest/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jschlesser/Dropbox (Personal)/prj/cursive/spout/gulptest/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Liftoff.handleArguments (/Users/jschlesser/.npm-packages/lib/node_modules/gulp/bin/gulp.js:116:3)
MacBook-Pro-2:gulptest jschlesser$

我想知道在 gulpfile 中使用 async/await 需要哪些步骤。该错误意味着 gulp 使用了一个 require 钩子来通过 babel 运行 gulpfile，并将 async 函数转换为生成器。

它说错误在第 4 行。
var ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() { 。

但看起来它没有将所有正确的东西注入到该编译文件中以使用 regeneratorRuntime。

【问题讨论】：

标签： javascript gulp babeljs

【解决方案1】：

您需要有一个单独的入口点来加载 polyfill，然后是主应用程序文件。

gulpfile.babel-entry.js

import 'babel-polyfill'
import './gulpfile.babel.js'

gulpfile.babel.js

let y = ()=>{return Promise.resolve(true)}

async function awaitY() {
  let m = await y()
  console.log(m)
}

awaitY()

more info

【讨论】：

这行得通。我将 gulpfile.babel.js 的所有内容移动到 main.gulpfile.babel.js 并添加了一条语句 import './main.gulpfile.babel.js' 但是，我还能够更改我的 .babelrc 文件以不使用 stage-0 预设而是使用插件条目"plugins": ["transform-regenerator","syntax-async-functions"]，但在预设中省略stage-0。这也有效，同时不需要您将 gulpfile 的“主要”部分放在不同的模块/文件中。我尝试同时拥有 stage-0 预设和插件条目，但如果没有第二个模块，它就无法工作。
感谢 laggingreflex 的快速回复。我认为您的解决方案比取出 stage-0 预设更好，因为虽然存在 1 级间接导入，但通常比将其删除 stage-0 并且必须包含单个插件更大。如果我想使用 stage-0 中包含的更多功能，那么长期而言，麻烦会更少。你的解决方案有我的投票。希望我有更多的代表，所以我可以投票。

【解决方案2】：

另一种方法是提供babel-polyfill 作为gulp 参数。

$ gulp --require babel-polyfill

【讨论】：