如何在customize-cra中为babel loader添加选项？

Question

我在打Support for the experimental syntax 'classProperties' isn't currently enabled

我需要在我的webpack配置中添加类似以下内容的内容。

https://github.com/babel/babel/issues/8655

{
  loader: 'babel-loader',
  options: {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      {
        "plugins": [
          "@babel/plugin-proposal-class-properties"
        ]
      }
    ],
  },
}

虽然我正在使用customize-cra，并且需要通过config-overrrides.js添加它，但我尝试了

 module.exports = override(
   ...addBabelPresets("@babel/preset-env", "@babel/preset-react"),
   ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
   # other lines omitted for brevity
)

Answer 1

尝试在.babelrc文件中定义插件和预设，在配置中使用useBabelRc加载器：

//config-override.js
const { useBabelRc, override } = require("customize-cra");
    
module.exports = override(
    useBabelRc()
);

然后在.babelrc中

//.babelrc
const presets = ["@babel/preset-env","@babel/preset-react"]

const plugins = [
    ["@babel/plugin-proposal-class-properties"]
];

module.exports = {
    presets,
    plugins,
};

Answer 2

//config-override.js
const { useBabelRc, override } = require("customize-cra");
    
module.exports = override(
    useBabelRc()
);

//.babelrc
{
  "presets": [
    ["@babel/preset-react"],
    ["@babel/preset-env"]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}