如何管理 webpack umd 模块依赖（或创建 peerDependencies）

Question

我用 webpack 创建了一个 UMD 模块，内容（未压缩）开头为：

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define("bootstrap-styled", [], factory);
  else if(typeof exports === 'object')
    exports["bootstrap-styled"] = factory();
  else
    root["bootstrap-styled"] = factory();
})(this, function() {

该库依赖于 react 并且对于该库中的一个信号组件：react-dom（通过 react-onclickoutside 包）。

当我用 webpack 构建这个库并尝试在项目中使用它时。我有一个错误抱怨 React 的两个副本，第二个已被捆绑。

所以我需要知道我对 Umd 模块的期望。

我不想构建 React，我希望 React 成为对等依赖。

我应该将 react 视为此 umd 模块的参数吗？

如何从 React 应用程序加载此模块？

如何排除 React？我已经尝试了大部分文档示例。

Answer 1

这可以通过使用 externals 属性来实现。指定外部时，它们将作为参数添加到 UMD 包装器中。

您可以从我们的新文档页面参考 this new guide！！

如何管理 webpack umd 模块依赖（或创建 peerDependencies）

How to manage webpack umd module dependencies (or create peerDependencies)

jsx

reactjs

gulp

webpack

umd