文章/答案/技术大牛

发布

问Webpack外部可选模块
EN

Stack Overflow用户

提问于 2021-04-16 01:37:20

回答 1查看 110关注 0票数 0

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

  "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

Stack Overflow用户

发布于 2021-04-16 02:48:11

我不认为你想要的东西是可能的。如果导入的模块丢失，webpack总是会失败。

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

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

另一种选择是创建具有或不具有依赖关系的单独插件。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67113399

复制

相似问题

问Webpack外部可选模块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack外部可选模块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack外部可选模块
EN