1

我创建了包含在 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'});

是的，这让我在没有 React 库的情况下退出 Bundle（因此它的大小从 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');

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

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

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

4

1 回答 1

0

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

externals: {
    // Use external version of React
    "react": "React",
    "react-dom": "ReactDOM"
},
于 2017-12-29T12:41:36.977 回答