隔离 WebComponent JS 库

Question

我们有主要的大型应用程序，将使用不同的库（Angular、React 等）创建单独的小型应用程序（微服务），并将它们编译成 web 组件以在任何地方使用它们。主应用程序有一些库（例如 underscore.js），我们的一些组件使用相同的库（例如 lodash.js），在这种情况下，我们在主应用程序中使用 web 组件时会看到很多冲突。您对我们如何隔离 Web 组件库以及它们可以在隔离模式下工作有什么想法吗？我们也使用过 ShadowDOM，但没有运气。

Answer 1

1. Web 组件 技术没有这种隔离模式。所有导入的库都将共享相同的命名空间。

2. Shadow DOM 不是关于 Javascript 代码隔离，而是只处理 DOM 和 CSS 隔离。

如果您想解决与导入的第 3 方库的冲突，您可以：

• 将您的网站设计为仅在全局依赖项脚本中导入第 3 方导入一次。

• 使用为您管理库加载的模块加载器，例如 require.js，或内置功能 ES6 模块 import 功能，甚至是您自己的 Vanilla 模块装载机。

• 使用<iframe>elements 隔离您网站的不同部分（如果可能，但您可能会丢失一些交互功能）。

所有这些解决方案都有优点和缺点。这取决于您的需求。