Я использую накопительный пакет для объединения некоторых файлов:
{
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>
Конечно... это то, как я должен это сделать ...?!?