在yarn工作区中配置webpack

Question

我正在将一些代码库迁移到一个使用yarn工作区和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'),
  },
}

但对我来说，这似乎有点老生常谈，因为它只能在这个纱线工作区内工作。

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

Answer 1

根据模块的文件路径，确定模块的唯一性。因此，如果你有两个react副本，来自两个独立的节点模块路径，那么是的，webpack会捆绑这两个副本。然而，如果你说你正在使用yarn工作区，这应该意味着你的monorepo应该只有一个node_modules文件夹。