webpack - 在 yarn workspaces 中配置 webpack

Question

我正在将一些存储库迁移到一个使用 yarn workspaces 和 Lerna 的 monorepo。这些包大致如下所示:

|-- packages
    |-- app
    |-- components-1 
    |-- components-2

app 与 webpack 捆绑在一起。它包括 components-1 和 components-2 作为依赖项，以及 React 15.3.2。

components-1 包含 React 15.6.1 的对等依赖项。所以它有 React 15.6.1 是一个开发依赖。这是从该包中运行 react-styleguidist 和测试所必需的，并且主要是它作为单独的存储库存在的工件，预迁移。

看起来，因为有两个版本的 React，webpack 会捆绑它们，因为它们都在不同的位置成功解析。 React 15.3.2 安装在存储库的根级 node_modules 中，而 React 15.6.1 安装在 components-1/node_modules 中。

正如人们所料，ReactDOM 也会发生同样的情况。

我的解决方案是在应用程序的 webpack 配置中为 react 和 react-dom 定义别名:

resolve: {
  alias: {
    'react': path.resolve('../../node_modules/react'),
    'react-dom': path.resolve('../../node_modules/react-dom'),
  },
}

但这对我来说似乎有点 hacky，因为它只能在这个 yarn 工作区设置中工作。

我想知道是否有更好的方法来做到这一点，无论是在应用程序的 webpack 配置中，还是在某种 yarn 工作区配置中。

Answer 1

webpack 根据其文件路径确定模块的唯一性。因此，如果你有两个 react 副本，来自两个单独的节点模块路径，那么是的，webpack 将捆绑两者。但是，如果您说您正在使用 yarn workspaces，这应该意味着您的 monorepo 应该只有一个 node_modules 文件夹。