Webpack 网页包外部可选模块

我正在处理一个需要一些可选对等依赖项的库

  "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',
    },
  }  

现在，这是可行的，但如果强制使用者安装依赖项，否则他们将得到编译后带有警告的

模块未找到：错误：无法解析“react dnd”
消息

如果模块不存在，我如何告诉webpack不要在意

我发现一种方法是使用
\uuu non\uu webpack\u require\uuuuuu
，但在阅读了答案后，我感到很气馁我不认为你在寻找什么是可能的。如果缺少导入的模块，webpack将始终失败

为避免在未使用时将DnD库发送给客户端，您可以在满足某些条件的情况下使用动态导入将其导入：

const dnd=等待导入（'react-dnd'））

另一个选择是创建独立的插件，有依赖项，也有不依赖项

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