为浏览器捆绑 npm 包的 CDN？

Question

TLDR：有人知道将 Javascript 捆绑到非模块 js 文件中的 npm 包 CDN 吗？

我希望在用户脚本中使用这个包。这是一个简单的用户脚本，所以我宁愿使用用户脚本@require关键字将其导入到单个文件脚本中。

一般来说，你不能对 ES Module（甚至 CommonJS）js 文件执行此操作。此包的普通 dist js 文件有一个

export{…}

子句，使其与

@require

关键字不兼容。

我一直在寻找 JS CDN，它可能能够为我将 js 捆绑成一种可在像这样的 vanilla-JS 情况下使用的形式。以下是我找到的所有 CDN：

• https://unpkg.com/：似乎只是直接提供 npm 入口文件。无法使用。
• https://www.jsdelivr.com/：似乎也只是提供未经转换的文件。不过，它似乎非常受欢迎；我错过了什么吗？
• https://www.skypack.dev/：同样，直接提供文件。
• https://bundle.run/：我认为这可能使用 Rollup 捆绑了东西。现在死了。
• https://wzrd.in/：会起作用；使用 Browserify 捆绑东西。现在死了。
• https://bundle.fregante.com：正确捆绑东西，但不能真正像 CDN 一样工作。
• https://cdnjs.com：仅包含精选的预捆绑文件。

我可能可以自己捆绑软件包，或者（如果我想修补的话）运行我自己的死捆绑 CDN 实例之一。但我想知道是否有一个 CDN 可以满足我的要求，特别是因为我还没有找到比 2017 年更新的生态系统中引入的新的主要 CDN。

Answer 1

创建index.html文件并放在那里

（示例）

<script type="module">
  import { System } from "https://cdn.skypack.dev/detect-collisions";
  
  const physics = new System();
  
  console.log(physics.createCircle());
</script>

它可以在没有 webpack 的浏览器中工作

使用

https://cdn.skypack.dev/${NPM_PACKAGE_NAME}

并记得有脚本

type="module"

您可以在此处测试上面的内容

https://code.pietal.dev/#/boilerplate/empty?pans=html,console

只需粘贴到 HTML Pan 中即可看到控制台 Pan