在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

您尝试过使用聚合物调制剂吗？Modulizer 执行许多不同的升级任务，例如：

检测哪些 .html 文件用作 HTML 导入并将它们移动到 .js
在 HTML 中重写以在 JS 中导入。
删除“模块包装器”——限制代码范围的 IIFE。
使用 npm 上相应的包将 Bower.json 转换为 package.json。
将“命名空间引用”转换为正确的 JS 模块导入，即：Polymer.Async.timeOut 转换为从 @polymer/polymer/lib/util/async 导入的 timeOut。
为分配给命名空间引用的值创建导出。即， Foo.bar = {...} 变为 export const bar = {...}
将命名空间对象（具有许多成员的对象，旨在用作类似模块的对象）重写为 JS 模块。
将 Polymer 元素模板从 HTML 移至 JS 模板字符串。
如果 s 仅包含模板，则删除 s。
将文档中的其他通用 HTML 移动到 JS 字符串中，并在模块运行时创建它。