3

我对 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>

这是我的聚合物 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]] 应用程序制作）

不明确的

如果我将模板包含在 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 测试应用程序制作）

谁能帮我理解如何让它工作？我怀疑这是与 polymer-webpack-loader 相关的一些配置。这种代码风格在 Webpack 未捆绑的普通 Polymer 应用程序中运行良好。

谢谢，

保罗

4

1 回答 1

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;
}

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

于 2018-09-18T16:51:06.443 回答