在纱线工作区中配置 webpack

Question

我正在将一些 repos 迁移到使用带有 Lerna 的 yarn 工作区的 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 和测试所必需的，并且主要是作为一个单独的 repo 存在的工件，预迁移。

看起来，因为有两个版本的 React，webpack 会捆绑这两者，因为两者都在不同的位置成功解析。 React 15.3.2 安装在 repo 的根级 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 配置中，还是在某种纱线工作区配置中。

Answer 1

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