隔离 WebComponent JS 库

Question

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

Answer 1

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

2. Shadow DOM与 Javascript 代码隔离无关，而仅处理 DOM 和 CSS 隔离。

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

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

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

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

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