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

【问题标题】：Webpack babel-loader runtime: Module build failed: TypeError: this.setDynamic is not a functionWebpack babel-loader 运行时：模块构建失败：TypeError：this.setDynamic 不是函数
【发布时间】：2018-06-30 04:17:27
【问题描述】：

我正在尝试将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

有什么问题？

【问题讨论】：

标签： javascript webpack babel-loader

【解决方案1】：

首先，正如@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']
      },
    },
    ...

【讨论】：

不确定这是否是去年发生的变化，所以只想标记syntax-dynamic-import 和transform-async-to-generator 都需要@babel/syntax-dynamic-import 和@babel/transform-async-to-generator

【解决方案2】：

经过一番努力，我找到了正确的方法。

Tl;dr

如果你安装了新的 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

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

【讨论】：

【解决方案3】：

您的 webpack 条目看起来与示例相同，所以我想知道如果您使用 .babelrc 会发生什么。

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

你也安装了环境预设吗？

【讨论】：

环境预设工作正常。实际上，整个项目在没有runtime 插件的情况下编译得很好。如果我使用.babelrc 并从babel-loader 配置中删除此插件，则会出现相同的错误。
如果将加载程序行更改为：loader: 'babel',，会发生什么情况。我想我不久前在某个地方读到过，这是一个修复，但可能正在考虑其他事情。
也不起作用。 Module not found: Error: Can't resolve 'babel'
babel 的当前版本 7.4.0 使用命名空间包，因此您必须将此插件列为 @babel/plugin-transform-runtime，即使在 babelrc dotfile 中也是如此