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

Question

Вопрос для 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

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