Пример кода jsfiddle для веб-компонентов UI5, использующих unpkg.com, чтобы избежать зависимости от npm

Question

Вопрос для ботаников https://unpkg.com/.

Я хотел бы создать пример кода для веб-компонентов UI5 на jsfiddle. Цель - поделиться примерами кода, не заставляя читателей устанавливать соответствующий модуль NPM и его зависимости.

Соответствующий пакет узла @ ui5 / webcomponents может быть установлен с помощью npm:

npm install @ui5/webcomponents

тогда я могу импортировать нужный веб-компонент:

import "@ui5/webcomponents/dist/Button"; // loads ui5-button

и создать экземпляр пользовательского элемента на странице HTML:

<ui5-button>Hello world!</ui5-button>

Как я могу разместить этот пример кода на jsfiddle, чтобы там отображалась кнопка "Hello world"?

Answer 1

Вы можете достичь этого, используя ?module параметр (из документации unpkg):

?module
Expands all “bare” import specifiers in JavaScript modules to unpkg URLs. This feature is *very experimental*

так как минимум:

<script src="https://unpkg.com/@ui5/webcomponents/dist/Button?module" type="module"></script>

<ui5-button>Hello world!</ui5-button>

Вот это на jsfiddle.

В качестве альтернативы вы можете импортировать его непосредственно как модуль:

<ui5-button>Hello world!</ui5-button>

<script type="module">
    import 'https://unpkg.com/@ui5/webcomponents/dist/Button?module';
</script>

jsfiddle

Обратите внимание на "очень экспериментальный" квалификатор в документах, поэтому я бы пока не стал на него полагаться!