2017-03-04 145 views
0

我有一个主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库的人吗?有更好的方法吗?我希望有一个灵活的机制,因此可以根据需要加载不需要的库,并且不会膨胀主包。

感谢对

回答

0

使用任何指针debundler或的WebPack作为browserify插件包名称和位置映射到SystemJS配置文件:

SystemJS is meant to work with any module definition specifications, and even a repository URL. This means when SystemJS encounters a require('module_name') or an import module_name, it doesn't know where to find the module called module_name. Would it be on npm? Or is it a custom repository? SystemJS can't know for sure.

So we'd need to provide a mapping of all packages' names and the location of their repository. Needless to say, doing this manually is impractical, so we must use another package manager, that manages packages from everywhere.

参考

相关问题