时间戳

首页 > 解决方案 > UI5 Web 组件的 jsfiddle 代码示例，使用 unpkg.com 避免对 npm 的依赖

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

问题描述

unpkg.com书呆子的问题。

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

对应的node包@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”按钮？

标签： npmweb-componentunpkgui5-webcomponents

解决方案

您可以使用?module参数（来自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

请注意文档中的“非常实验性”限定词，所以我还不会完全依赖它！

推荐阅读