Webpack 外部可选模块答案

【问题标题】：Webpack external OPTIONAL modulesWebpack 外部可选模块
【发布时间】：2021-07-10 18:45:43
【问题描述】：

我正在开发一个需要一些可选对等依赖项的库。

  "peerDependencies": {
    "react-dnd": ">=14.0.0",
    "react-dnd-html5-backend": ">=14.0.0",
  },
  "peerDependenciesMeta": {
    "react-dnd": {
      "optional": true
    },
    "react-dnd-html5-backend": {
      "optional": true
    }
  },

我认为我可能需要它们的方式是

try {
  DndProvider = require('react-dnd').DndProvider;
  HTML5Backend = require('react-dnd-html5-backend').HTML5Backend;
} catch (err) {
  // optional module not installed
}

我将它们声明为这样的外部对象：

  externals: {
    "react-dnd": {
      commonjs2: 'react-dnd',
      commonjs: 'react-dnd',
      amd: 'react-dnd',
      root: 'react-dnd',
    },
    "react-dnd-html5-backend": {
      commonjs2: 'react-dnd-html5-backend',
      commonjs: 'react-dnd-html5-backend',
      amd: 'react-dnd-html5-backend',
      root: 'react-dnd',
    },
  }

现在，这可行，但如果强制消费者安装依赖项，否则他们将收到 compiled with warnings Module not found: Error: Can't resolve 'react-dnd' 消息

如果模块不存在，我如何告诉 webpack 不关心？

我发现一种方法是使用__non_webpack_require__，但在阅读here的答案后我感到气馁

【问题讨论】：

标签： webpack peer-dependencies

【解决方案1】：

我认为您要寻找的东西是不可能的。如果缺少导入的模块，webpack 将始终失败。

为了避免在不使用的情况下将 DnD 库发送到客户端，您可以使用动态导入来导入它，以防满足某些条件：

const dnd = await import('react-dnd')

另一种选择是创建带有或不带有依赖项的单独插件。

【讨论】：