Webpack babel-loader运行时:模块构建失败:TypeError:this.setDynamic不是函数

Question

我试图使用babel-loader与babel-plugin-transform-runtime.

我按照以下说明操作:https: //github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

相关代码:

rules: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

我在构建时遇到以下错误:

Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'

如果我将插件名称更改为:plugins: ['transform-runtime'],则会出现以下错误:

Module build failed: TypeError: this.setDynamic is not a function

问题是什么？

Answer 1

经过一番奋斗,我找到了正确的方法.

文艺青年最爱的

如果你安装新的babel加载器,你应该加载新的babel插件.

全文

在官方文档中安装: npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

在github页面中,这些是runtime插件的说明:

注意:你必须运行npm install babel-plugin-transform-runtime --save-dev将它包含在你的项目中,而babel-runtime本身作为npm install babel-runtime --save的依赖项.

相反,你应该使用这样的新版本: npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

然后它将与文档中的配置一起使用.

Answer 2

首先，正如@yccteam 指出的那样，需要安装

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

.babelrc文件应该有

{
  "presets": [
    ["@babel/preset-env", {
      "debug": false,
      "modules": false,
      "useBuiltIns": false
    }], 
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
    "@babel/transform-async-to-generator"
  ],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

webpack.js文件应该看起来像

 module: {
  rules: [
    {
      test: /(\.js[\S]{0,1})$/i,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['@babel/preset-react', '@babel/preset-env'],
        plugins: ['@babel/proposal-class-properties']
      },
    },
    ...