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

經過一番掙扎，我找到了正確的方法。

Tl;博士

如果你安裝了新的 babel loader，你應該加載新的 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']
      },
    },
    ...

Answer 3

您的 webpack 條目看起來與示例相同，所以我想知道如果您使用.babelrc會發生什么。

{
   "plugins": ["transform-runtime"]
}

您是否也安裝了 env 預設？