Javascript 像webpack、rollup这样的模块绑定器如何处理相同依赖项的两个不同版本？

如果是，模块1取决于按钮-component@1.0.2

模块2取决于按钮-component@1.5.0

最终捆绑包中加载了哪个版本的按钮组件

我们可以采取哪些步骤来避免最终构建中的重复模块

TL；博士：这不是捆绑机。主要由包管理器（NPM等）负责提供捆绑包商简单遵循的依赖关系

在这里工作的并不是捆绑机本身。对于第三方依赖项，我们通常使用NPM，因此通常使用

node\u模块

现在NPM的工作是使依赖关系树尽可能平坦。想象下面的图，其中

您的代码取决于
模块1
和
模块2
。而且，
module1
本身在内部依赖于
module2

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

此处
您的代码
使用的是版本2.0.0中的
模块2
，但
模块1
使用的是不同的版本。这是一个突破性的变化。在这种情况下，npm不会将其平放并安装
module2@2.0.0
在您的
节点\u模块
文件夹中，而
module2@1.0.5
将安装在
模块1
的
节点\u modules
文件夹中。绑定器在绑定代码时将选择两个版本

但并不是所有的剧本。通常，如果依赖项仅在
补丁
版本（即semver的最后一位）不同，则
npm
将只选择一个，而忽略另一个。此外，依赖关系的这种解决方案还取决于NPM版本控制模型。您可以使用
^1.0.5
或
~1.0.5
指定宽松版本的依赖项。这也会影响if

您可以使用或等效工具检测重复的依赖项。当NPM第一次发布时，它无法处理这个问题，因此Bower的诞生是为了帮助开发人员处理平面依赖关系，这样捆绑包商就只能选择一个版本的依赖关系。但最新的NPM在大多数情况下都相当好，鲍尔不再使用


最后，我说主要是因为它通常是包管理器。但是，对于裸导入，您可以设定/覆盖bundler，专门从一个且仅从一个版本解析。例如，考虑下面的WebPACK分辨率配置：

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

因此，如果在依赖关系图中意外地多次出现
preact
，则可以强制Webpack始终使用特定的
preact
从一个特定文件夹导入

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