为啥在创建包时必须在 webpack 配置中将 peerDependencies 列为外部项？

Posted 2023-03-07

【中文标题】为啥在创建包时必须在 webpack 配置中将 peerDependencies 列为外部项？

【英文标题】：Why do I have to list my peerDependencies as externals in the webpack config when creating a package?为什么在创建包时必须在 webpack 配置中将 peerDependencies 列为外部项？

【发布时间】：2019-12-06 21:39:36

【问题描述】：

我正在使用 create-react-app 在 React 中创建一个 npm 包。因为react 和react-dom 被假定在宿主项目中，所以我在我的package.json 中将它们列为peerDependencies 和devDependencies。

我了解到，这样两者仍然捆绑在一起，为了防止我必须在 webpack 配置的外部列出它们，我成功地做到了：

externals:         
  react:           
      commonjs: 'react',          
      commonjs2: 'react',          
      amd: 'React',          
      root: 'React',      
  ,      
  'react-dom':           
      commonjs: 'react-dom',          
      commonjs2: 'react-dom',          
      amd: 'ReactDOM',          
      root: 'ReactDOM',      
  ,  
,

我的问题是：为什么我必须经过这第二步？不应该将它们列为 peerDependencies 就足够了吗？如果不是，那么在这种情况下，peerDependencies 与常规依赖项有何不同？

【参考方案1】：

对等依赖由 npm 理解，外部依赖由 webpack 理解。两者的含义相同，但由完全不同的软件处理。

虽然运行 npm install 不会安装任何对等依赖项，但 webpack 仍会尝试遍历依赖项树以尝试找到它们（如果它们在代码中被引用）。将它们标记为外部告诉 webpack 显式忽略它们并且不要尝试遍历该依赖项分支，即使已安装了这些对等依赖项。

【讨论】：

所以为了正确理解它，webpack 捆绑了 node-modules 对吧？但是 react 和 react-dom 首先不应该在节点模块中，因为它们是对等依赖项。那么在我将它们添加到外部之前，它们怎么会在捆绑包中呢？

@syberen 我已经在我的回答中澄清了。