6

我正在使用 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 团队真的会引入一个与使用旧版本创建的所有组件完全不兼容的新版本库吗？

4

2 回答 2

4

您是否尝试使用聚合物调制剂？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 字符串中，并在模块运行时创建它。

更多关于 github

于 2018-05-15T09:42:43.167 回答
1

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

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