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。
删除＆＃34;模块包装＆＃34; - 代码范围的IIFE。
使用npm上的相应包将bower.json转换为package.json。
转换＆＃34;命名空间引用＆＃34;到正确的JS模块导入，即：Polymer.Async.timeOut到timeOut从@ polymer / polymer / lib / util / async导入。
为分配给名称空间参考的值创建导出。即，Foo.bar = {...}变为导出const bar = {...}
将名称空间对象 - 一个具有许多成员的对象重写为JS模块重写。
将Polymer元素模板从HTML移动到JS模板字符串中。
如果只包含模板，则删除s。
将文档中的其他通用HTML移动到JS字符串中，并在模块运行时创建它。

Answer 2

我之前遇到过与模块js-yaml相同的问题。我还没有足够的声誉发表评论，所以我只是在这里写下来。

运行此sudo npm install -g js-yaml - ＆gt;这将安装该工具的缺失包
然后在项目的根目录下，运行modulizer --import-style name --out . - ＆gt;这会将您的组件从Polymer 2转换为Polymer 3.选项--import-style name告诉工具使用包名而不是路径。 --out将使该工具将这些文件写入目录。
之后，如果没有错误提示。尝试使用polymer serve --module-resolution=node - ＆gt;提供服务由于我们现在使用节点模块，因此我们必须提供--module-resolution=node选项。