使用 Webpack4 和 Babel 的反应应用程序的模块构建失败

Question

我的应用程序没有从我的 react 应用程序中转译 JSX。

这是我的 babel webpack 配置：

module.exports = {
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },

这是.babelrc的配置：

{
"plugins": [
    "@babel/plugin-transform-react-jsx-self",
    "transform-class-properties"
]

}

这是我安装的开发依赖项：

"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/plugin-transform-react-jsx-self": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.24.1",

正如你所看到的，我使用了一些不同的依赖项，但我很确定问题在于我不明白如何在我的 babelrc 中正确配置它（这是我第一次尝试）

我读过其他答案来解决这个问题，在 webpack 配置和 babelrc 中使用 babel 预设，但 babel 最近在 Babel7 中弃用了这个

Answer 1

所以万一有人遇到同样的问题。 babelrc 的这种配置现在对我有用：

{
"presets": [
  ["@babel/env"],
  ["@babel/preset-react"]
],
"plugins": [
  ["transform-class-properties"],
  ["@babel/plugin-transform-react-jsx-self"]
]

}