在纱线工作区中配置Webpack

Question

我正在将一些存储库迁移到使用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是一个dev依赖项。这是从该程序包中运行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'),
  },
}

但是，这对我来说似乎有点棘手，因为它只能在设置的纱线工作区中工作。

我想知道是否有更好的方法，无论是在应用程序的webpack配置中，还是在某种纱线工作区配置中。

Answer 1

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