如何使用polymer-webpack-loader导入并转译Polymer .html模板？

我明白你遇到的困扰了——把模板放在单独HTML文件通过webpack导入时，Polymer的[[colour]]和[[name]]绑定表达式完全没被解析，直接原样输出，但把模板写在JS里就正常工作。这其实是对polymer-webpack-loader的用法理解有偏差，咱们一步步来解决：

问题根源 #

当你用html(${view})这种写法时，是把导入的HTML字符串作为普通动态字符串传给了Polymer的html标签函数。但Polymer的html函数依赖ES6模板字面量的静态结构来识别绑定表达式，动态拼接的字符串它没法做静态分析，所以绑定直接失效，只能显示原始的[[...]]语法。

而polymer-webpack-loader的核心作用，就是帮你把单独的HTML文件转换成Polymer能直接识别的模板对象，不需要你再手动用html()去包裹处理。

解决方案 #

修改你的index.js文件，调整导入和模板返回逻辑：

import { PolymerElement } from '@polymer/polymer';
// 直接导入模板，无需使用* as view的形式
import view from './template.html';

export class NpsWidget extends PolymerElement {
  static get is() { return 'nps-widget'; }

  static get template() {
    // 直接返回导入的view，不需要再用html()包裹
    return view;
  }

  constructor() {
    super();
    this.name = 'Polymer 3.0 test';
    console.log(this.name + ' constructor run successfully.');
  }

  static get properties() {
    return {
      name: { type: String },
      colour: { type: String, value: '#777777' }
    };
  }
}

customElements.define(NpsWidget.is, NpsWidget);

额外配置检查 #

确保你的webpack配置里的loader顺序正确：

{
  test: /\.html$/,
  use: [
    // 链式loader是从后往前执行，先由polymer-webpack-loader处理HTML，再用babel-loader转译结果
    { loader: 'babel-loader' },
    { loader: 'polymer-webpack-loader' }
  ]
}

你当前的配置已经符合这个要求——polymer-webpack-loader先把HTML转换成JS模块，再由babel-loader处理成兼容目标浏览器的代码，这个顺序没问题。

这样修改后重新打包，模板里的绑定表达式应该就能正常解析，输出你期望的This is my chosen colour: #777777 (Made by the Polymer 3.0 test app)了。

内容的提问来源于stack exchange，提问作者Paul M Sorauer