如何实现跨多个 webpack 项目的单个依赖实例？答案

【问题标题】：How to achieve single instance of dependency across multiple webpack projects?如何实现跨多个 webpack 项目的单个依赖实例？
【发布时间】：2019-03-27 17:16:09
【问题描述】：

我有一个项目，它由一个 React 应用程序和一个 React 组件库组成。（这两个都是我自己的代码）。应用程序和库是两个独立的包，它们有自己的 package.json 和基于 webpack 的构建系统。应用导入库并使用其中的 React 组件。

应用程序和库都使用 react-router。当我在我的应用程序中从使用 react-router 的库中安装组件时遇到问题。我收到错误“错误：不变量失败：您不应在 <Router> 之外使用 <Route>”

然而<Route> 组件实际上包含在<Router> 组件中。

我认为问题在于<Router> 是由应用程序呈现的，<Route> 是在库中呈现的，并且每个都使用不同的 react-router 上下文实例。

我通过在应用程序和库中导入<Route> 并使用console.log 将Route 组件输出到控制台来测试这个理论。

当我检查两个日志时，我发现每个记录的 Route 都是一个不同的实例。 IE。 Route from app !== Route from lib 我认为这就是 react-router 抱怨的原因。

如何配置 webpack 以确保 app 和 lib 使用相同的 react-router 实例？

【问题讨论】：

标签： react-router webpack-4

【解决方案1】：

问题是由doppleganger dependencies 引起的。这个blog post 描述了问题和解决方案，即在 webpack 中为公共模块设置别名以指向主 node_modules 文件夹。

【讨论】：

【解决方案2】：

所以，你有以下结构：

app/
  ...
  node_modules/
    lib/
      ...
      node_modules/

您的app 从app/node_modules 导入Route，而您的lib 从app/node_modules/lib/mode_modules 导入Route。这使得这两个Route 实例不共享相同的上下文。

您希望使app 和lib 从同一个node_modules 目录中导入与路由器相关的依赖项。

一种解决方案是让app 在导入Route 和Router 时查看app/node_modules/lib/node_modules 而不是app/node_modules。

您可以通过在apps webpack 配置的modules 部分中使用resolve-modules 将node_modules/lib/node_modules 放在node_modules 之前完成此操作：

modules: [
  path.resolve(__dirname, 'node_modules/lib/node_modules'),
  'node_modules'
]

【讨论】：

谢谢！当我添加一个也使用 react-router 的第二个库时会发生什么？理想情况下，我希望库将 react-router 作为 peerDependency 并且仅使用应用程序的 node_modules。这可能吗？
想不出任何可以帮助您实现这一目标的方法：/

【解决方案3】：

出于某种原因，只有别名可以帮助我设置 monorepo yarn 2 pnp webpack。感谢@jack-allen 的回答，它给了我正确的方向。

{
  resolve: {
    alias: {
      'react-i18next': require.resolve('react-i18next'), 
    }
  }
}

【讨论】：