Как использовать файлы AMD, созданные с помощью накопительного пакета - PullRequest
Новая
       83

Как использовать файлы AMD, созданные с помощью накопительного пакета

0 голосов
/ 14 октября 2019

Я использую накопительный пакет для объединения некоторых файлов: 

  {
    input: allFiles,
    output: {
      dir: 'distr/esm',
      format: 'esm'
    },
    plugins: [resolve({})]
  },

Типичным входным файлом будет класс ES6, определяющий пользовательский элемент:

import {html} from 'lit-element'import {NnInputText} from' ./nn-input-text'

class NnInputEmail extends NnInputText {
  render () {
    return html`
      ${this.customStyle}
      ${this.ifLabelBefore}
      ${this.ifValidationMessageBefore}
      <input type="email" id="native">
      ${this.ifValidationMessageAfter}
      ${this.ifLabelAfter}
    `
  }
}
window.customElements.define('nn-input-email', NnInputEmail)

В моем HTML-файле у меня просто есть: 

<script type="module" src="./distr/ems/nn-input-text.js"></script>

Все отлично работает. Однако я хотел бы сделать эти элементы доступными для старых браузеров. Я понимаю, что мне нужно пробежать через них Вавилон. . Однако в этом посте я остановлюсь еще на одной проблеме - отсутствие поддержки модулей ES6 для старых браузеров.

Свертывание дает вам возможность конвертировать модули в AMD: 

  {
    input: allFiles,
    output: {
      dir: 'distr/amd',
      format: 'amd'
    },
    plugins: [resolve({})]
  },

Тем не менее, файл становится следующим: 

define(['./lit-element-3745a578', './LabelsMixin-b14e4a18', './StyleableMixin-f8bc5e37', './ThemeableMixin-48d49b9b', './NativeReflectorMixin-d7c3df1b', './InputMixin-44a206df', './FormElementMixin-14a4dbcb', './nn-input-text'], function (litElement, LabelsMixin, StyleableMixin, ThemeableMixin, NativeReflectorMixin, InputMixin, FormElementMixin, nnInputText) { 'use strict';

  class NnInputEmail extends nnInputText.NnInputText {
    render () {
      return litElement.html`
      ${this.customStyle}
      ${this.ifLabelBefore}
      ${this.ifValidationMessageBefore}
      <input type="email" id="native">
      ${this.ifValidationMessageAfter}
      ${this.ifLabelAfter}
    `
    }
  }
  window.customElements.define('nn-input-email', NnInputEmail);

});

Как я должен импортировать этот файл в браузер, чтобы затем использовать пользовательский элемент? Нужен ли мне загрузчик AMD? Если да, то откуда мне это взять?

ОБНОВЛЕНИЕ Я только что попробовал это в своем HTML-файле и ... это сработало?!? 

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

<script>
  require(['./distr/amd/themes/material/material.js', './distr/amd/nn-input-text.js'])
  </script>

<nn-input-text name="aName"></nn-input-text>

Конечно... это то, как я должен это сделать ...?!?

...