要求使用webpack

Question

假设如下：

HelloWorldApp是一个使用Webpack构建的项目，需要React。 MyReactComponent是HelloWorldApp使用的独立项目，需要引用React才能运行。

在MyReactComponent中，我正在执行以下操作：

var react = require('react');

在MyReactComponent＆＃39; package.json中，我将React指定为peerDependency。

现在，为了将CSS文件的内容捆绑到MyReactComponent中，我试图用Webpack构建MyReactComponent。

如何在MyReactComponent项目中配置Webpack，以便在MyReactComponent调用React（require('react')）时，它将被提供对HelloWorldApp所需的React实例的引用？

我不确定这是否是受支持的工作流程，或者我是否认为这是错误的。我知道Webpack有externals配置，如果React是窗口上的全局变量，它似乎会起作用。就我而言，它不是一个全局变量;它是HelloWorldApp require的模块。

我也在MyReactComponent的Webpack配置中尝试了类似的东西（似乎没有特别记录）：

externals: {
  "react": {
    root: "React",
    commonjs: "react"
    commonjs2: "react"
    amd: "react"
  }
}

但似乎总是返回undefined而不是来自HelloWorldApp的React实例。有人可以启发我吗？

Answer 1

我发现如果我为MyReactComponent配置Webpack：

externals: {
  "react": "require('react')"
}

该webpack创建了一个这样的模块来代替实际的React代码：

/***/ },
/* 2 */
/***/ function(module, exports) {

    module.exports = require("react");

/***/ },

HelloWorldApp require的MyReactComponent，因此当HelloWorldApp的webpack进程运行时，它会将上面的代码替换为：

/***/ },
/* 2 */
/***/ function(module, exports) {

    module.exports = __webpack_require__(381);

/***/ }

有了这个，MyReactComponent现在可以访问HelloWorldApp的React。

这是有效的，但我认为这不是一个真正意图的工作流程。我疯了吗？