Polymer-WebPack-Loader: как импортировать и переносить шаблон Polymer .html. - PullRequest
Новая
       7

Polymer-WebPack-Loader: как импортировать и переносить шаблон Polymer .html.

0 голосов
/ 30 мая 2018

Я новичок как в Polymer, так и в Webpack и пытаюсь понять, как заставить полимерный webpack-загрузчик правильно перемещаться.Согласно новому способу импорта HTML-кода в JS в Polymer 3.x (наоборот, в 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;

Результат, который я получаю, заключается в том, что оператор import в template.html, похоже, просто создает тег div в комплекте сценариев и включает его в документ иКонечно, класс не может найти значение ... Вот вывод:

Это мой выбранный цвет: [[color]] (Сделано приложением [[name]])

undefined

Если я включу шаблон в буквальную строку HTML в файле JS и удалю оператор импорта, он будет работать нормально: 

//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.

Спасибо,

Пол

1 Ответ

0 голосов
/ 18 сентября 2018

У меня была та же проблема: я хотел написать 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.

...