polymer-webpack-loader：如何导入和转换Polymer .html模板

Question

我是Polymer和Webpack的新手，并试图找出如何正确地进行聚合物webpack-loader的转换。根据新的Polymer 3.x将HTML导入JS的方式（Polymer 2.x反过来说），我创建了一个单独的.html文件，并尝试将其导入我的'extends PolymerElement'类。

这是我的简单template.html文件：

<div>This is my chosen colour: [[colour]] (Made by the [[name]] app)</div>

这是我的Polymer index.js文件：

import { PolymerElement, html } from '@polymer/polymer';
import * as view from './template.html';

export class NpsWidget extends PolymerElement {

  static get is() { return 'nps-widget'; }

  // Define a string template instead of a `<template>` element.
  static get template() {

    return html(`${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配置文件：

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const pkg = require(path.resolve(__dirname, '../package.json'));

let libraryName = pkg.name;

const config = {
  mode: 'development',
  entry: path.resolve(__dirname, '../src/index.js'),
  devtool: 'source-map',
  output: {
    globalObject: 'typeof self !== \'undefined\' ? self : this',
    path: path.resolve(__dirname, '../lib/dev'),
    filename: libraryName + '.js',
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [
    {
      test: /\.html$/,
      use: [
        // Chained loaders are applied last to first
        { loader: 'babel-loader' },
        { loader: 'polymer-webpack-loader' }
      ]
    },
    {
        test: /\.js$/,
        // We need to transpile Polymer itself and other ES6 code
        // exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              'env',
              {
                targets: { browsers: ['last 2 Chrome versions', 'Safari 10'] },
                debug: true
              }
            ]],
            plugins: [['transform-object-rest-spread', { useBuiltIns: true }]]
          }
        }
      },
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /(\.tsx|\.ts)$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, '../node_modules'), path.resolve(__dirname, '../src')],
    extensions: ['.ts', '.tsx', '.json', '.js', '.html']
  },
  plugins: [
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: 'static',
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js')
      },
      {
        from: path.resolve(__dirname, '../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js')
      }
    ])
  ]
};

module.exports = config;

我得到的结果是template.html中的import语句似乎只是在捆绑脚本中创建div标签并将其包含在文档中，当然类无法找到值...这是输出：

这是我选择的颜色：[[color]]（由[[name]] app制作）

未定义

如果我将模板包含在JS文件中的文字HTML字符串中并删除import语句，它可以正常工作：

//import * as view from './template.html';
...
return html`<div>This is my chosen colour: [[colour]] (Made by the [[name]] app)</div>`;

这是我选择的颜色：＃777777（由Polymer 3.0测试应用程序制作）

任何人都可以帮助我了解如何让这个工作？我怀疑这是与聚合物webpack-loader有关的一些配置。这种代码样式在一个未被Webpack捆绑的vanilla Polymer应用程序中运行良好。

谢谢，

保罗

Answer 1

我遇到了同样的问题：我想在HTML文件中编写HTML，而不是在JavaScript中。经过一些工作我得到了这样的配置，如果所有元素都是3.0，我可以确认它是否有效。我还没有尝试过遗留元素。

在webpack.config.js内部，HTML规则如下所示：

test: /\.html$/,
include: resolve(__dirname, 'src/elements'), // This makes sure I only catch HTML files that are actually my templates
use: [{
  loader: 'html-loader',
  options: {
    minimize: true
    attrs: // Fill those in as needed
  }
}]

在JS文件中，您需要像这样导入它：

import ElementContent from './path/to/template.html';

在课堂上：

static get template() {
  const template = document.createElement('template');
  template.innerHTML = ElementContent;
  return template;
}

请注意，在这种情况下，您不需要来自@ polymer / polymer的html。