如何配置Webpack避免重复依赖？解决Trusted-types冲突

问题根源 #

你遇到的TrustedTypePolicy重复错误，是因为宿主项目和common-ui分别加载了dompurify/highcharts的独立实例，两个实例都尝试创建同名的安全策略，而CSP不允许重复。核心需求是让common-ui优先使用宿主项目根目录./node_modules中的这两个包，避免重复加载。

为什么之前的Webpack别名配置不生效 #

你的common-ui配置中，fs.existsSync检查的是common-ui自身目录下的node_modules，而非宿主项目的根目录node_modules。当宿主安装了这两个包时，common-ui本地的node_modules里大概率没有它们，所以配置会走备用路径，依然加载common-ui自身的依赖副本，导致冲突。

可行解决方案 #

方案1：用peerDependencies规范声明依赖（推荐） #

这是npm生态中处理这类共享依赖最规范的方式：修改common-ui的package.json，将dompurify和highcharts从dependencies移到peerDependencies：

{
  "peerDependencies": {
    "dompurify": "^2.x",
    "highcharts": "^10.x"
  },
  "peerDependenciesMeta": {
    "dompurify": {
      "optional": true
    },
    "highcharts": {
      "optional": true
    }
  }
}

• peerDependencies告诉npm：common-ui需要宿主项目提供指定版本的这两个包
• peerDependenciesMeta标记为可选，确保宿主没有安装时，common-ui仍能使用自身的依赖版本

执行npm install后，common-ui会自动复用宿主已安装的包实例，无需额外Webpack配置。

方案2：修改宿主项目的Webpack配置 #

如果无法调整common-ui的依赖声明，直接在宿主项目的Webpack配置中强制所有模块优先使用宿主的node_modules：

const path = require('path');

module.exports = {
  resolve: {
    // 优先搜索宿主根目录的node_modules
    modules: [
      path.resolve(__dirname, 'node_modules'),
      'node_modules'
    ],
    // 可选：直接指定别名，强制指向宿主的包文件
    alias: {
      dompurify: path.resolve(__dirname, 'node_modules', 'dompurify'),
      highcharts: path.resolve(__dirname, 'node_modules', 'highcharts')
    }
  }
};

这样不管是宿主代码还是common-ui中的import 'dompurify'，都会解析到宿主项目的包。

方案3：修改common-ui的Webpack配置（适合独立构建的common-ui） #

如果common-ui是单独构建发布的包，可通过externals配置让它不打包dompurify和highcharts，而是从宿主环境加载：

module.exports = {
  externals: {
    // 以CommonJS模块方式从宿主获取
    dompurify: 'commonjs dompurify',
    highcharts: 'commonjs highcharts'
  }
};

构建后的common-ui会依赖宿主项目安装的这两个包，不会自带副本，从根本上避免重复加载。

内容的提问来源于stack exchange，提问作者Coyote