我有一个主React应用程序,我创建了webpack捆绑的React库,可以根据用户请求或作为某些用户操作的结果在主应用程序中动态加载。如何使用SystemJS加载webpack React包?
我以为使用SystemJS来动态加载库是我要去的路,但我找不到任何关于这个主题的指针。
这里是我的问题:
如果我捆绑与之反应依赖库,我可以加载SystemJS的文件,但我得到这个错误:
invariant.js:44 Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded
这是有道理的,因为作为阵营已包含在我的包中,也是主应用程序的一部分。所以我认为从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 Uncaught (in promise) Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval() Evaluating http://localhost:3000/React Error loading http://localhost:3000/Extension.js at eval()
我明白SystemJS试图加载阵营依赖于本地主机:3000/React和从我读的这个必须配置SystemJS.config({...}),但问题是如何?我阅读了SystemJS配置文档,但我没有看到任何例子。
我是唯一一个试图动态加载React库的人吗?有更好的方法吗?我希望有一个灵活的机制,因此可以根据需要加载不需要的库,并且不会膨胀主包。
感谢对