如何在我的gulpfile.babel.js中使用ES2016 / ES7提议进行异步/等待

时间:2016-03-25 22:34:30

标签: javascript gulp babeljs

我有一个非常简单的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

中的以下dev依赖项
"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,并将异步函数转换为生成器。

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

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

2 个答案:

答案 0 :(得分:0)

您需要有一个单独的入口点来加载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

答案 1 :(得分:0)

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

$ gulp --require babel-polyfill