Question

我正在使用汇总来汇总一些文件：

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

典型的输入文件将是定义自定义元素的ES6类：

从“ lit-element”导入{html} 从'./nn-input-text'导入{NnInputText}

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>

当然...这是我的本意...？！？

如何使用汇总创建的AMD文件

0 个答案: