为什么嵌套 package.json 存在时 webpack 无法编译答案

【问题标题】：Why webpack fails to compile when nested package.json exists为什么嵌套 package.json 存在时 webpack 无法编译
【发布时间】：2020-01-04 20:21:13
【问题描述】：

这里是项目结构

src/
--ui/
--lib/
----async-store/
------create-inject-reducer-hoc.jsx
------package.json <<=== this package.json
--package.json
--index.js
--webpack.config.js

项目构建失败并出现错误：

ERROR in ./lib/async-store/create-inject-reducer-hoc.jsx
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: \src\lib\async-store\create-inject-reducer-hoc.jsx: Unexpected token (34:11)

  32 |     }, [])
  33 |
> 34 |     return <WrappedComponent {...props} />
     |            ^
  35 |   }
  36 |   return memo(InjectedState)
  37 | }

这里是 webpack 配置

module.exports = {
  mode: 'development',
  context: path.join(__dirname, '../src'),
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.jsx', '.js']
  },
  plugins: [new HtmlWebpackPlugin()],
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    compress: true,
    port: 9000
  }
}

{
    "presets": ["@babel/preset-react", "@babel/preset-env"],
    "plugins": [
        ["babel-plugin-styled-components", { "ssr": false }]
    ]
}

行动： 如果我删除 lib/async-store/ 项目中的嵌套 package.json 将成功构建

问题： 与 webpack 构建过程和嵌套 package.json 有什么关系？

【问题讨论】：

标签： reactjs webpack package.json

【解决方案1】：

这似乎是由于 babel 的配置方式造成的。任何带有package.json 文件的东西都被认为是一个单独的包或模块。由于您有两个 package.json 文件，因此您基本上有一个 monorepo。

因为您使用的是.babelrc 配置文件，所以来自https://babeljs.io/docs/en/config-files#file-relative-configuration 的以下内容将适用于您：

Babel 通过搜索目录结构 [...] 来加载 .babelrc [...] 文件。一旦找到包含package.json 的目录，搜索将停止，因此相对配置仅适用于单个包中。 [...] .babelrc 文件仅适用于它们自己的包中的文件

如果没有进一步的配置，使用 babel-loader 的 webpack 将遇到包含 package.json 文件的文件夹，并且不会对其应用任何转换。因此，它会抱怨它看到的 JSX，因为它没有被编译。

有几个解决方案，您已经提到了其中一个：

删除嵌套的package.json 文件。无论如何，你为什么需要它？
从.babelrc 配置文件切换到babel.config.js 配置文件。为什么？ https://babeljs.io/docs/en/config-files#monorepos 有更多详细信息，但重要的是 babel 将设置一个 babel.config.js 作为根配置，“子包”将使用它。

您可以在https://babeljs.io/docs/en/configuration#babelconfigjs 看到如何配置您的babel.config.js 文件。

【讨论】：