Javascript 使用Webpack4和Babel为react应用程序生成模块失败

Javascript 使用Webpack4和Babel为react应用程序生成模块失败,javascript,reactjs,webpack-4,babel-loader,Javascript,Reactjs,Webpack 4,Babel Loader,我的应用程序没有从react应用程序传输JSX 这是我的babel网页配置: module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, 以下是.babelrc

我的应用程序没有从react应用程序传输JSX

这是我的babel网页配置:

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中正确配置它(这是我第一次尝试)


为了解决这个问题,我读了其他答案,在网页配置和babelrc中使用了babel预设,但babel最近在Babel7中不赞成这样做,以防有人有同样的问题。babelrc的这种配置现在适用于我:

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

你的.LRC应该包括“预设”:[“反应”]-这个链接应该有帮助。