没有为 node_modules 配置加载器 | webpack + 通天塔

Question

我正在尝试从我的项目中声明为 devDependency 的模块加载 JSX 组件。 但是，在运行 webpack 时，我收到以下错误：

Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

|
|                 render(
>                     <Provider store={store}>
|                         <MyApp />
|                     </Provider>,
 @ ./src/App.js 48:43-96
 @ ./src/index.js

我正在使用 webpack 4 和 babel 7。

webpack 依赖项：

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "dummy-pkg": "file:../dummy-pkg",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.2",
    "sass-loader": "^8.0.0",
    "style-loader": "^0.16.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.10"
}

webpack 配置：

module: {
    rules: [
        {
            test: /\.jsx?$/,
            include: [path.resolve(__dirname, './src'), /node_modules\/dummy-pkg/],
            use: 'babel-loader'
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
 }

babelrc

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

当我尝试从dummy-pkg导入组件时，它会失败并显示我上面提到的错误消息。

如果我删除导入，则在我当前项目中声明的所有其他 JSX 组件都会正确转译。 引入这一点会导致所有问题。

我一直在查看有关 Stack Overflow 的许多其他问题以及一些 GitHub 问题。 那里建议的解决方案似乎对我不起作用。

任何帮助将非常感激。 蒂亚！

更新

经过一番调试，我发现需要在babel.config.json中定义 babel config

更多信息在这里。 此处列出了其他文件类型

Answer 1

令人惊讶的是，我注意到，当您在.babelrc中提供presets时，如果您想从node_modules中排除任何内容，则它不起作用，但是当我将预设放在webpack.config中时，它就像 gem 一样工作。 所以我建议尝试保持js or jsx的规则，如下所示并测试

{
    test: /\.(js|jsx)$/,
    exclude: [/node_modules\/dummy-pkg/],
    use: {
      loader: "babel-loader",
      options: {
         presets: ["@babel/preset-env", "@babel/preset-react"],
         plugins: [
           "@babel/plugin-proposal-class-properties"
         ]
       }
    }
}

希望这可以帮助。