聚合物-webpack-loader：如何导入

Question

我对Polymer和Webpack都是新手，正在尝试解决如何让Polymer Webpack loader正确传输。根据新的聚合物3。x将HTML导入JS的方式（Polymer 2.x是另一种方式），我创建了一个单独的。html文件，并试图将其导入我的“extends Polymerement”类。

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

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

这是我的聚合物指数。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中的导入语句似乎只是在捆绑脚本中创建div标记，并将其包含在文档中，当然类找不到值...输出如下：

这是我选择的颜色：[[颜色]]（由[[名称]]应用程序制作）

未定义

如果我在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捆绑。

谢谢

保罗

Answer 1

我有同样的问题：我想在超文本标记语言文件中编写超文本标记语言，而不是在JavaScript中。经过一些工作，我已经来了这样的配置，我可以确认它的工作原理，如果你所有的元素都是3.0。我还没有尝试遗留元素。

在网页包内。配置。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;
}

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