React 独立包，内部没有反应库答案

【问题标题】：React standalone bundle without react library insideReact 独立包，内部没有反应库
【发布时间】：2017-12-29 12:16:21
【问题描述】：

我创建了包含在 React App 中的独立包。应用程序本身对它加载的扩展包（下一个 XB）一无所知，但 XB 确实知道它在内部使用的应用程序和库。如何将其编译的 App 共享库包制作成 XB？我的意思是，如果应用程序使用 React 和 React-dom 库编译以使 XB 不使用此类库进行编译，而是从应用程序中使用它们？

我在 webpack 配置中将 React 排除在编译之外：

var config = {
//....
    output: {
        library: 'videoEditor',
        libraryTarget: 'umd',
        path: BUILD_PATH+"./../bundles/",
       filename: '[name].bundle.js'
   },
// ...
}

// .... later just extending config if compiling as standalone
config.externals = Object.assign(config.externals,{'react':'React'});

是的，这让我在退出 Bundle 时没有 React 库（因此它的大小从 190KB 减少到 10KB）。但是如果我尝试加载它，我会得到一个错误：

index.js?7afc:1 Uncaught ReferenceError: require is not defined
    at eval (index.js?7afc:1)
    at Object.<anonymous> (video-editor.bundle.js:80)
    at __webpack_require__ (video-editor.bundle.js:30)
    at video-editor.bundle.js:73
    at video-editor.bundle.js:76
    at webpackUniversalModuleDefinition (video-editor.bundle.js:9)
    at video-editor.bundle.js:10

没有外部，一切正常。

index.js?7afc:1 是

import React from 'react';
import AppLayout from 'layouts/app';

里面import React from 'react'; 是module.exports = require('react');

我不明白如何使 require 工作。似乎它对于全局空间是不可见的。

更新：我尝试在任何可用选项上更改 libraryTarget：'umd'、'commonjs'、'this'。结果是一样的。

我从 webpack 知道 commonChunkPlugin，但我有几个来自不同来源的独立项目，它们由不同的人编译。

【问题讨论】：

标签： reactjs webpack bundling-and-minification externals

【解决方案1】：

除了 React，你还需要从 React v0.14.x 开始在你的外部添加 ReactDOM

externals: {
    // Use external version of React
    "react": "React",
    "react-dom": "ReactDOM"
},

【讨论】：

我这样做了，它不起作用。但实际上我的代码中甚至没有导入“react-dom”。