在 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">

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

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

Answer 1

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

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

Answer 2

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

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

Import Polymer 2 components in Polymer 3