webpack 等模塊捆綁器如何處理相同依賴項的兩個不同版本？

Question

如果，module1 依賴於 button-component@1.0.2

並且 module2 依賴於 button-component@1.5.0

最終捆綁包中加載了哪個版本的按鈕組件？

我們可以采取哪些步驟來避免最終構建中的重復模塊？

Answer 1

TL;DR：它不是捆綁器。 主要是package管理器（NPM 等）負責提供捆綁器簡單遵循的依賴項。

在這里工作的並不是捆綁器本身。 對於第三方依賴，我們通常使用 NPM 和node_modules 。

現在 NPM 的工作是保持依賴樹盡可能平坦。 想象一下your-code依賴於module1和module2的圖表。 而且， module1本身在內部依賴於module2 。

your-code <-- module1@1.0.0 <--- module2@1.0.5
          <-- module2@1.0.5

如果your-code和module1使用相同的依賴項，則npm將使其平放在頂級node_modules文件夾下，因此捆綁器（Webpack/Rollup）將選擇module的單個版本

現在想象另一種情況：

your-code <-- module1@1.0.0 <--- module2@1.0.5
          <-- module2@2.0.0

這里your-code使用的是版本為module2的模塊 2，但module1 1 使用的是不同的版本。 這是一個突破性的變化。 在這種情況下，npm 不會保持平坦，將module2@2.0.0安裝在node_modules文件夾中，而module2@1.0.5將安裝在module1的node_modules文件夾中。 Bundler 在捆綁代碼時會選擇這兩個版本。

但這並不是所有的腳本。 通常，如果依賴項僅在patch版本上有所不同，即semver的最后一位，那么npm將只選擇一個而忽略另一個。 此外，這種依賴關系的解決還取決於 NPM 版本 model。 您可以使用^1.0.5或~1.0.5指定寬松版本的依賴項。 這也會影響NPM 是單獨安裝模塊還是保持平整。

您可以使用bundler 分析器或等效工具來檢測重復的依賴項。 當 NPM 第一次發布時，它無法處理這個問題，因此 Bower 的誕生是為了幫助開發人員處理平面依賴項，以便捆綁程序只選擇一個版本的依賴項。 但是最新的 NPM 對於大多數情況來說已經足夠好，並且不再使用 bower。

---

最后我說主要是因為一般是package管理器。 但是，在裸導入的情況下，您可以教/覆蓋捆綁器以專門解決一個且只有一個版本。 例如，考慮下面的 Webpack 分辨率配置：

resolve: {
  // see below for an explanation
  alias: {
    preact: path.resolve('node_modules', 'preact')
  }
}

因此，如果您不小心在依賴關系圖中多次preact ，那么您可以強制 Webpack 始終使用來自特定文件夾的特定preact導入。