我有一个主React应用程序，并创建了Webpack捆绑的React库，可以根据用户请求或某些用户操作将其动态加载到主应用程序中。
我以为使用SystemJS动态加载库是解决的办法，但是我找不到关于该主题的任何指针。
这是我的问题：
如果我将库与React依赖项捆绑在一起，则可以使用SystemJS加载文件，但出现此错误：
invariant.js：44未捕获（承诺）错误：addComponentAsRefTo（...）：只有ReactOwner可以具有引用。 您可能正在向未在组件的
render方法内创建的组件添加引用，或者您加载了多个React副本
这是有道理的，因为React已包含在我的捆绑软件中，并且也是主应用程序的一部分。 因此，我认为从lib中排除React将解决此问题。 我在我的webpack配置中添加了“外部”：
///////////////////////////////////////////////////////////
// Webpack config development
//
///////////////////////////////////////////////////////////
module.exports = {
devtool: 'source-map',
context: path.join(
__dirname, '../src/Extensions'),
entry: {
Extension: [
'./Extension/index.js'
]
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: "[name].js",
libraryTarget: "umd",
library: "[name]"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
WEBPACK: true
}
}),
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
jQuery: 'jquery',
_: 'lodash',
$: 'jquery',
React: "React",
react: "React",
"window.react": "React",
"window.React": "React"
}),
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
clear: false
})
],
resolve: {
modules: [
path.resolve('./node_modules'),
],
extensions : ['.js', '.jsx', '.json']
},
resolveLoader: {
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}]
}
]
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
}
但是这样做之后，用SystemJS加载lib将输出以下错误：
ConfiguratorView.js：116未捕获（承诺）错误：（SystemJS）意外令牌http：// localhost：3000 / React加载http：// localhost：3000 / Extension.js时出错于eval（）
我了解SystemJS试图在localhost：3000 / React上加载React依赖关系，从我的阅读中得知，必须使用SystemJS.config（{...}）进行配置，但是问题是如何？ 我阅读了SystemJS配置文档，但是还没有看到任何类似的示例。
我是唯一尝试动态加载React库的人吗？ 有没有更好的方法？ 我希望有一个灵活的机制，这样就可以按需加载不必要的库，而不会膨胀主软件包。
感谢您对此的任何指点
使用debundler或webpack作为browserify插件，将软件包名称和位置映射到SystemJS配置文件：
SystemJS可用于任何模块定义规范，甚至是存储库URL。 这意味着当SystemJS遇到require（'module_name'）或导入module_name时，它不知道在哪里可以找到名为module_name的模块。 会在npm吗？ 还是自定义存储库？ SystemJS无法确定。
因此，我们需要提供所有软件包名称及其存储库位置的映射。 不用说，手动执行此操作是不切实际的，因此我们必须使用另一个包管理器，该包管理器可以从任何地方管理包。
参考