2

TL;博士

我希望是否有正确的方法来解决远程加载的 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
}
};

任何想法将不胜感激。

提前致谢。

4

0 回答 0