Question

TL; DR

我希望有一种正确的方法来解决远程加载的React组件上Webpack的常见模块依赖关系，如下面的要点所示：https://gist.github.com/tonytonyjan/616022dce75f8e6c1603bbeb94ec46a4

详情

这可能看起来不常见，但我们在构建时无法访问所有React组件。

我们将拥有插件，它将是一个Webpack捆绑的React组件，部署在一些可访问的端点中。

我们的 webapp 会显示一个可用插件页面，在运行时加载。

以上Gist显示了如何远程加载React组件，但它通过在 require 函数上手动映射模块来解决外部依赖关系：

function require(name){
  if(name == 'react') return React
  else throw `You can't use modules other than "react" in remote component.`
}

我想知道是否有更好的方法可以优雅地解决远程组件的所有常见外部依赖关系（异步或非异步），而无需执行此手动映射技巧（某些Webpack配置）。

例如，插件 webpack.config.js将如下所示

module.exports = {
entry: {
    PluginView: 'src/PluginView.js'
},
target: 'web',
output: {
    path: path.join(__dirname, outputPath),
    filename: 'PluginView.bundle.js',
    libraryTarget: 'commonjs2'
},
module: {
    loaders: [
        {
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
externals: {
    'react': 'React',
    'otherThirdPartyLib': 'OtherThirdPartyLib' // any other common lib already available at our webapp
}
};

任何想法都将受到赞赏。

提前致谢。

解决远程加载的React组件的模块依赖性

0 个答案: