javascript - polymer-webpack-loader : how to import & transpile Polymer . html模板

Question

我是 Polymer 和 Webpack 的新手，正在尝试弄清楚如何让 polymer-webpack-loader 正确转译。根据将 HTML 导入 JS 的新 Polymer 3.x 方式(Polymer 2.x 是相反的方式)，我创建了一个单独的 .html 文件并尝试将其导入我的“扩展 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 标记并将其包含在文档中，当然该类找不到该值...这是输出:

This is my chosen colour: [[colour]] (Made by the [[name]] app)

undefined

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

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

This is my chosen colour: #777777 (Made by the Polymer 3.0 test app)

任何人都可以帮助我了解如何让它工作吗？我怀疑这是与 polymer-webpack-loader 有关的一些配置。这种代码风格在没有被 Webpack 捆绑的普通 Polymer 应用程序中运行良好。

谢谢，

保罗

Answer 1

我遇到了同样的问题:我想在 HTML 文件中而不是在 JavaScript 中编写 HTML。经过一些工作后，我得到了这样的配置，如果您的所有元素都是 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。