如何配置 webpack 使其不包含同一包的重复项

Question

背景： 我们正在将一个包集成到另一个项目中，当我们尝试运行它时，我们遇到了受信任类型的问题，因为托管项目中已经存在依赖包。

我们尝试加载的包（我们称之为“Coyote”）依赖于我们的另一个名为 common-ui 的包 common-ui 包含以下依赖项：

1. 净化
2. 高图表

我们正在尝试将“Coyote”加载到已包含 dompurify 和 highcharts 包的项目中，并收到可信类型错误：

highcharts.js:56  Refused to create a TrustedTypePolicy named 'highcharts' because a policy with that name already exists and the Content Security Policy directive does not 'allow-duplicates': "trusted-types dompurify

我们尝试集成的项目中的node_modules位于： 根： ./

在项目中，我们正在尝试将“Coyote”包集成到以下路由中：

packages/components/A/src/C/context.tsx
packages/components/B/src/container.tsx

我们希望使用当前项目的 dompurify 和 highcharts（如果项目中存在），否则从 common-ui 依赖项中获取。 common-ui 在许多平台上使用，因此我们需要正确地执行它，以便它始终找到根 node_modules 并检查 dompurify 和 highcharts 是否存在并加载它，否则使用 common-ui 。

我们尝试将以下内容添加到 common-ui 的 webpack 中，但没有成功：

resolve: {
    alias: {
      dompurify: fs.existsSync(path.resolve(__dirname, 'node_modules', 'dompurify'))
        ? 'dompurify'
        : path.resolve(__dirname, '..', '..', 'node_modules', 'dompurify', 'dist', 'purify.js'),
      highcharts: fs.existsSync(path.resolve(__dirname, 'node_modules', 'highcharts'))
        ? 'highcharts'
        : path.resolve(__dirname, '..', '..', 'node_modules', 'highcharts', 'highcharts.js'),
    },
    ...
 }

Answer 1

我们设法通过使用对等依赖关系来解决此问题：

  "peerDependencies": {
    "dompurify": "^2.4.1",
    "highcharts": "^9.1.2",
  },

不知道为什么在加载我们的组件时会对这些库进行第二次调用