Polymer 3中导入Polymer 2遗留组件的方法咨询

嘿，我刚好处理过类似的Polymer版本兼容问题，给你梳理两种可行的方案，还有为什么直接引JS会出错的原因：

方案一：将遗留组件转换为ES模块（长期推荐） #

Polymer官方提供了工具可以把旧的HTML Import组件转换成符合ES模块规范的代码，这是长期维护的最优解：

• 第一步：全局安装转换工具polymer-modulizer

  npm install -g polymer-modulizer
  

• 第二步：针对你的遗留组件执行转换命令，比如把my-legacy-component.html转换成ES模块，输出到modulized-components目录：

  modulize --import-style=name --out-dir=modulized-components ../my-legacy-component.html
  

• 第三步：在你的Polymer3组件中，直接用ES模块语法导入转换后的组件：

  import '../modulized-components/my-legacy-component.js';
  import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
  
  class MyNewComponent extends PolymerElement {
    static get template() {
      return html`
        <my-legacy-component></my-legacy-component>
      `;
    }
  
    static get is() { return 'my-new-component'; }
  }
  
  customElements.define(MyNewComponent.is, MyNewComponent);
  

转换后的组件会自动适配ES模块环境，和Polymer3的组件完全兼容。

方案二：使用HTML Imports Polyfill（临时过渡） #

如果你暂时不想转换组件，可以用官方的polyfill来模拟HTML Imports环境，作为临时过渡方案：

• 第一步：安装包含HTML Imports polyfill的包：

  npm install @webcomponents/webcomponentsjs
  

• 第二步：在应用的入口HTML文件（比如index.html）中加载polyfill加载器：

  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  

• 第三步：在Polymer3组件的JS文件中，用importHref方法动态加载遗留组件的HTML Import，而不是直接在模板里加<link rel="import">：

  import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
  
  class MyNewComponent extends PolymerElement {
    static get template() {
      return html`
        <my-legacy-component></my-legacy-component>
      `;
    }
  
    static get is() { return 'my-new-component'; }
  
    connectedCallback() {
      super.connectedCallback();
      // 动态加载遗留组件，确保在使用前加载完成
      this.constructor.importHref(
        '../my-legacy-component.html',
        () => console.log('遗留组件加载成功'),
        (err) => console.error('加载遗留组件失败:', err)
      );
    }
  }
  
  customElements.define(MyNewComponent.is, MyNewComponent);
  

为什么直接引用遗留组件的JS会报错？ #

Polymer2的组件是基于HTML Imports环境开发的，它的JS代码可能依赖HTML Imports提供的特殊上下文——比如通过document.currentScript获取组件所在的HTML Import文档，或者依赖HTML Import加载时的DOM结构。直接引用JS文件的话，这些上下文都不存在，自然会出现不明错误。

放心，Polymer团队绝对不会推出完全不兼容旧版本的新版本，只是因为HTML Imports已经被Web标准废弃，所以转向ES模块是符合标准发展的必然选择，上面的两种方案都能帮你顺利兼容遗留组件。

内容的提问来源于stack exchange，提问作者codebox