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

时间:2018-09-01 20:15:28

标签: javascript reactjs webpack-4 babel-loader

我的应用程序没有从我的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",

您可以看到ive播放了一些不同的依赖项,但是我很确定问题出在我身上,我不了解如何在babelrc中正确配置它(这是我的第一次尝试)

我阅读了其他解决方案来解决此问题,以在webpack配置和babelrc中使用babel预设,但是babel最近在Babel7中弃用了此

1 个答案:

答案 0 :(得分:0)

因此,如果有人遇到相同的问题。 babelrc的这种配置现在对我有用:

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

}