问题描述
我正在开发一个需要一些可选对等依赖项的库。
"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',}
现在,这可行,但如果强制消费者安装依赖项,否则他们将收到 compiled with warnings
Module not found: Error: Can't resolve 'react-dnd'
消息
如何告诉 webpack 不在乎模块是否存在?
我发现一种方法是使用 __non_webpack_require__
,但在阅读答案后我感到气馁 here
解决方法
我不认为您要寻找的东西是可能的。如果缺少导入的模块,webpack 将始终失败。
为了避免在不使用时将 DnD 库发送到客户端,您可以在满足某些条件时使用动态导入来导入它:
const dnd = await import('react-dnd')
另一种选择是创建带有或不带有依赖项的单独插件。