Webpack中使用Babel插件transform-async-to-generator的配置疑问

Great question! Let’s break down whether you need to add the plugin to your Webpack config, how to verify your setup, and troubleshoot that runtime error you’re seeing.

核心结论：仅在.babelrc配置通常就足够了（只要Webpack的babel-loader配置正确） #

If you’ve properly set up babel-loader in your Webpack config to process your JavaScript files, Babel will automatically pick up the transform-async-to-generator plugin from your .babelrc (or babel.config.json) file. You don’t need to add it separately to Webpack’s plugin array—those are Webpack-specific plugins (like your UglifyJsPlugin or HtmlWebpackPlugin), not Babel plugins.

1. 确认你的.babelrc配置正确 #

First, make sure you’re using the correct package name (especially if you’re on Babel 7+—the old transform-async-to-generator is deprecated, replaced with the scoped @babel/plugin-transform-async-to-generator):

1. Install the plugin first (if you haven’t):

   npm install --save-dev @babel/plugin-transform-async-to-generator
   

2. Update your .babelrc to include it:

   {
     "presets": ["@babel/preset-env"], // 推荐搭配preset-env处理环境兼容性
     "plugins": ["@babel/plugin-transform-async-to-generator"]
   }
   

2. 验证Webpack的babel-loader配置 #

Your Webpack config needs to tell Babel to process your JS files. Here’s a minimal, correct setup:

module.exports = {
  // 其他Webpack配置...
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js文件
        exclude: /node_modules/, // 跳过node_modules（除非你需要转译其中的包）
        use: "babel-loader" // 用babel-loader处理这些文件
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
    // 注意：这里只放Webpack插件，不需要加Babel插件
  ]
};

babel-loader automatically reads your .babelrc by default, so as long as this rule is correctly targeting your files, the plugin will run.

3. 排查你的运行时错误 #

If you’re still seeing errors, here are the most common issues:

• regeneratorRuntime is not defined: This is the most frequent error with async-to-generator transpilation. The plugin converts async functions to generator functions, which require a runtime polyfill to work in older browsers. Fix this in one of two ways:

  • Option 1: Use @babel/polyfill (adds global polyfills):
    1. Install it: npm install @babel/polyfill
    2. Add it to your Webpack entry:

       entry: ["@babel/polyfill", "./src/index.js"]
       

       Or import it at the top of your entry file: import '@babel/polyfill';
  • Option 2: Use @babel/plugin-transform-runtime (no global pollution, better for libraries):
    1. Install dependencies:

       npm install --save-dev @babel/plugin-transform-runtime
       npm install @babel/runtime
       

    2. Update your .babelrc:

       {
         "presets": ["@babel/preset-env"],
         "plugins": [
           "@babel/plugin-transform-async-to-generator",
           "@babel/plugin-transform-runtime"
         ]
       }
       

• Plugin not installed: Double-check your package.json’s devDependencies to ensure @babel/plugin-transform-async-to-generator is listed. If not, re-run the install command.

• Webpack not targeting your files: Make sure the test rule in your babel-loader config matches the files with async functions (e.g., if you’re using .jsx, update the test to /\.jsx?$/).

（可选）直接在Webpack配置中添加Babel插件（不推荐） #

While it’s better to keep Babel configs in .babelrc for reusability (works with Babel CLI, Jest, etc.), you can add the plugin directly to babel-loader’s options if needed:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ["@babel/plugin-transform-async-to-generator"]
          }
        }
      }
    ]
  }
};

内容的提问来源于stack exchange，提问作者Rasim Avcı