时间戳

首页 > 解决方案 > 在加载了脚本标签的脚本中使用 webpack 外部组件

javascript - 在加载了脚本标签的脚本中使用 webpack 外部组件

问题描述

我正在尝试跨微服务托管反应组件。我想将我的 javascript 文件捆绑到一个包中，并使其可供其他微服务下载和使用。由于我们所有的微服务都使用 react 和其他一些依赖项，我不想将它们包含在捆绑文件中。我已将它们作为外部添加到我的 webpack 配置中：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
   ...
},

这是可行的，因为这些依赖项没有捆绑在一起，但是当我想在其他微服务（消费者端）中访问它时，“托管组件”不起作用，例如：

<script src="path/to/hosted"></script>

我试图将依赖项放在消费者端的窗口对象上：

import React from 'react';

window.libs.React = React;
...

但这样我就可以在主机端访问 React window.libs.React，这似乎不方便开发。现在我认为我应该在 webpack 捆绑中以某种方式解决这个问题，但我坚持下去。有什么建议我应该检查哪些插件，或者针对这个问题的任何现有方法？

PS：这个概念不是我的想法，我只需要实现它，所以我不能真正改变整个概念，例如使用 npm 包而不是整个组件共享的东西。

标签： javascriptreactjswebpackdependency-injectiondependencies

解决方案

推荐阅读