Question

我正在尝试设置Webpack-Babel-JavaScript项目。如果在源中按此顺序定义了异步函数和生成器函数，则它会一直失败。如果更改了函数定义的顺序，则它会正确运行。是什么导致这个问题？ 有没有办法如何使用babel以任意顺序同时使用异步和生成器函数？

该项目使用async-to-generator babel插件将异步函数转换为生成器，并使用transform-runtime插件转换生成器函数。我更喜欢使用babel-runtime来进行babel-polyfill。

错误讯息：

/tmp/babel-demo/dist/main.bundle.js:8231
    var _marked = [foo].map(_regeneratorRuntime.mark);
                            ^

ReferenceError: _regeneratorRuntime is not defined
    at Object.<anonymous> (/tmp/babel-demo/dist/main.bundle.js:8231:26)
    at __webpack_require__ (/tmp/babel-demo/dist/main.bundle.js:30:30)
    at Object.<anonymous> (/tmp/babel-demo/dist/main.bundle.js:58:19)
    at __webpack_require__ (/tmp/babel-demo/dist/main.bundle.js:30:30)
    at /tmp/babel-demo/dist/main.bundle.js:50:18
    at /tmp/babel-demo/dist/main.bundle.js:53:10
    at webpackUniversalModuleDefinition (/tmp/babel-demo/dist/main.bundle.js:3:20)
    at Object.<anonymous> (/tmp/babel-demo/dist/main.bundle.js:10:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)

项目结构（download project）：

.
├── .babelrc
├── .gitignore
├── package.json
├── src
│   └── main.js
└── webpack.config.js

main.js

async function bar(p) {
}

function* foo(p) {
}

用于重新编译和运行文件的命令：rm -rf dist && npm run build && node -p 'c = require(\"./dist/main.bundle.js\"); console.log(c)'。

工作main.js（交换功能）

function* foo(p) {
}

async function bar(p) {
}

.babelrc

{
    "presets": ["es2015"],
    "plugins": [ "transform-async-to-generator", ["transform-runtime", {
        "helpers": false,
        "polyfill": false,
        "regenerator": true}]]
}

webpack.config.js

module.exports = {
    entry: {
        main: ['babel-polyfill', './src/main.js']
    },
    output: {
        path: './dist',
        filename: "[name].bundle.js",
        publicPath: '/',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ],
    }
};

的package.json

{
  "name": "babel-demo",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
    "test": "rm -rf dist && webpack && node -p 'c = require(\"./dist/main.bundle.js\"); console.log(c)'"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-async-to-generator": "^6.16.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "webpack": "^1.14.0"
  }
}

似乎在transpilled file模块300（从第8256行开始）定义了全局变量regeneratorRuntime。然而，由于某种原因，失败的第8231行期望_regeneratorRuntime。

Answer 1

我遇到了类似的问题（确切地说_regeneratorRuntime not defined），只有在使用旧节点的环境中生成构建时才会发生（在这种情况下，它是构建服务器上的节点v4.4.0）。在撰写本文时，当前稳定节点版本为v7.9，这产生了工作版本。

我可以通过删除一些生成器或/和ES6 Polyfill方法来解决它而无需升级（作为tmp修复）：

redux saga running in parallel语法
在同一个文件中使用生成器和任何ES6 Polyfill方法（Array.find，JSON.x，Promise）

babel：ReferenceError：未定义_regeneratorRuntime

1 个答案: