如何在webpack.config.js中配置@babel/插件建议类属性?

enyaitl3  于 2022-12-16  发布在  Babel
关注(0)|答案(2)|浏览(146)

我认为@babel/plugin-proposal-class-properties是使用babel-preset-stage-0的推荐替代方案。
在我目前的react应用程序中,我使用webpack.config.js而不是babel.rc或其他任何东西。我想知道如何在webpack.config.js文件中配置这个@babel/plugin-proposal-class-properties插件。documentation没有提到它,所以我向你寻求帮助。
先谢了!

j9per5c4

j9per5c41#

可以使用options属性将选项传递给babel-loader

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-class-properties']
        }
      }
    }
  ]
}
kzmpq1sx

kzmpq1sx2#

Veli Šiška,你的回答帮助我解决了一个巴别塔问题,其他人的回答总是回答配置.babelrc或Nuxt的main.js
在我的示例中,我使用Reactwebpack.config.ts
所以我把它复制在这里,以防它能帮助其他人在我的情况。

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-methods", { "loose": true }]

多谢了!

相关问题