使用 unpkg.com 的 UI5 Web 组件的 jsfiddle 代码示例避免对 npm 的依赖

Question

unpkg.com 书呆子的问题。

我想为 UI5 Web Components on jsfiddle 创建一个代码示例。目标是在不强迫读者安装相应的 NPM 模块及其依赖项的情况下共享代码示例。

对应的节点包@ui5/webcomponents可以用npm安装：

npm install @ui5/webcomponents

然后我可以导入所需的 Web 组件：

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

并在 HTML 页面中实例化自定义元素：

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

如何在 jsfiddle 上托管此代码示例，以便在那里显示 "Hello world" 按钮？

Answer 1

您可以使用 ?module 参数（来自 the unpkg docs）实现此目的：

?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 code sample for UI5 Web Components using unpkg.com to avoid dependency on npm