polymer - 在 Polymer 3 中导入 Polymer 2 组件

Question

我正在使用 Polymer v3 开发一个 Web 组件，并且需要在我的新组件的模板 HTML 中包含一些在旧式 Polymer 2 组件中定义的自定义元素。

由于 Polymer 3 不再支持 HTML 导入，我应该采取什么方法来包含它们？如果我使用的是 Polymer 2，我可以在组件的 HTML 文件中添加以下内容:

<link rel="import" href="../my-legacy-component.html">

我已经尝试将上述链接添加到我的组件的模板 HTML 中，但它似乎不起作用。我也试过各种 import命令直接引用遗留组件内的 JS 文件，但收到各种难以理解的 JS 错误，所以我不确定这是否是正确的方法。

我不敢相信没有一种简单的方法可以做到这一点——Polymer 团队真的会引入一个与使用旧版本创建的所有组件完全不兼容的新版本库吗？

Answer 1

您是否尝试使用 polymer 调制剂？
Modulizer 执行许多不同的升级任务，例如:

检测哪些 .html 文件被用作 HTML 导入并将它们移动到 .js

在 HTML 中重写以在 JS 中导入。

删除“模块包装器”- 限定代码范围的 IIFE。

使用 npm 上的相应包将 bower.json 转换为 package.json。

将“命名空间引用”转换为正确的 JS 模块导入，即:从 @polymer/polymer/lib/util/async 导入的 Polymer.Async.timeOut 到 timeOut。

为分配给命名空间引用的值创建导出。即， Foo.bar = {...} 变为 export const bar = {...}

将命名空间对象(一个具有许多成员的对象，旨在用作类似模块的对象)重写为 JS 模块。

将 Polymer 元素模板从 HTML 移动到 JS 模板字符串中。

如果 s 仅包含模板，则删除它们。

将文档中的其他通用 HTML 移动到 JS 字符串中，并在模块运行时创建它。

more on github