结合babel和webpack使用javascript生成器

我正在尝试测试以下js代码：

function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

const it = foo( 5 );

// note: not sending anything into `next()` here
console.log( it.next() );       // { value:6, done:false }
console.log( it.next( 12 ) );   // { value:8, done:false }
console.log( it.next( 13 ) );   // { value:42, done:true }

但我得到了：

模块生成失败：语法错误：意外令牌

我遵循了这个指南，但我可以使用生成器制作我的网页来构建我的代码。这是我的网页：

config.module.rules.push({
  test: /\.(js|jsx)$/,
  exclude: /node_modules\/(?!geniuz)/,
  use: [{
    loader: 'babel-loader',
    query: {
      cacheDirectory: true,
      plugins: [
        'babel-plugin-transform-class-properties',
        'babel-plugin-syntax-dynamic-import',
        [
          'babel-plugin-transform-runtime',
          {
            helpers: true,
            polyfill: false, // we polyfill needed features in src/normalize.js
            regenerator: true,
          },
        ],
        [
          'babel-plugin-transform-object-rest-spread',
          {
            useBuiltIns: true // we polyfill Object.assign in src/normalize.js
          },
        ],
        ['transform-regenerator'],
      ],
      presets: [
        'babel-preset-react',
        ['babel-preset-env', {
          modules: false,
          targets: {
            ie9: true,
          },
          uglify: true,
        }],
      ]
    },
  }],
})

我还尝试：

['transform-regenerator', {
          generators: true,
        }],

这对我很有用：

module: { 
        rules: [   
          {     
            test:/\.js$/,       
            exclude: path.resolve(__dirname,'node_modules'), 
            loader: 'babel-loader', 
            query: {presets: ['es2015']}  
          }  
        ]         
    } 

这对我很有用：

module: { 
        rules: [   
          {     
            test:/\.js$/,       
            exclude: path.resolve(__dirname,'node_modules'), 
            loader: 'babel-loader', 
            query: {presets: ['es2015']}  
          }  
        ]         
    } 

---

必须将

@babel/transform runtime

插件添加到babel.config.js文件，如下所示：

presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
  '@babel/transform-runtime',
  '@babel/plugin-syntax-dynamic-import',
  '@loadable/babel-plugin',
],

---

必须将

@babel/transform runtime

插件添加到babel.config.js文件，如下所示：

presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
  '@babel/transform-runtime',
  '@babel/plugin-syntax-dynamic-import',
  '@loadable/babel-plugin',
],

---

如果你不去丑化，错误就会消失。如果是。。丑陋的努力与一些现代javascript。2：选项。。一个编译到es5/uglify，。。或者尝试使用巴贝尔自己的丑八怪。巴比利，应该有更多关于这个错误的信息。例如哪一行。您的代码和配置看起来正常。@Keith none适用于me@YuryTarabanko您是对的，这就是确切的错误：./src/routes/Home/components/HomeContainer.js模块构建失败中的错误：语法错误：意外标记（191:10）189 | 190 |>191 |函数*foo（x）{|^如果您尝试不使用uglify，错误是否会消失。如果是，..uglify与一些现代javascript进行斗争。2：选项..一个编译到es5/uglify，…或者尝试使用babel自己的uglifyier.Babili。应该有关于此错误的更多信息。例如，哪一行。您的代码和配置看起来正常。@Keith none适用于me@YuryTarabanko你是对的，这就是确切的错误：./src/routes/Home/components/HomeContainer.js模块构建失败中的错误：语法错误：意外标记（191:10）189 | 190 |>191 |函数*foo（x）{|^很好，但这不是答案：）你认为OPs配置有什么问题吗？根据文档对从ecmascript2015开始的生成器的初始定义，我在上面的配置中看不到这一点，这可能是问题的原因，当我在我的应用程序生成器中指定预设es2015开始工作时，我只知道这一点：）谢谢请阅读此代码片段，它可能会提供一些即时帮助。正确的解释通过说明这是一个很好的问题解决方案的原因而具有教育价值，并将使其对将来有类似但不完全相同问题的读者更有用。请编辑您的答案以添加解释，并指出哪些限制和限制假设适用。很好，但这不是一个答案：）你认为OPs配置有什么问题吗？根据文档对从ecmascript2015开始的生成器的初始定义，我在上面的配置中没有看到这一点，可能这就是问题的原因，当我在我的应用程序中指定预设es2015生成器开始工作时，我只知道这一点：）谢谢对于此代码片段，这可能会提供一些即时帮助。正确的解释通过说明为什么这是一个很好的问题解决方案来体现其教育价值，并将使其对将来有类似但不完全相同问题的读者更有用。请编辑您的答案以添加解释，并指出哪些限制和假设这些选择适用。