Question

我试图将<div id="newReply" data-totalReplies="'.mysql_num_rows($replyQuery).'"></div>与babel-loader一起使用。

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

相关代码：

babel-plugin-transform-runtime

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

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']

有什么问题？

Answer 1

经过一番奋斗，我找到了正确的方法。

<强>铊组成; dr

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

Your webpack entry looks the same as the example, so I wonder what happens if you use .babelrc.

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

Do you have the env preset installed as well?

Answer 3

首先，正如@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": [
    "syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
    "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']
      },
    },
    ...

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

3 个答案: