是否可以混合捆绑模块和 JavaScript 模块

Question

受到 preact's "no build tools route" 的启发，我最近创建了一个没有构建或捆绑过程的项目。从概念上讲，它看起来像这样（伪代码如下）。

我对 react-button 有依赖性，它使用例如microbundle 通过 node_modules 文件夹解析 preact 导入。

// dependency 1: "preact-button" npm package (uses bundler)
import { h, Component, render } from 'preact';

const button = h('button', null, 'Click');
export default Button;

然后，我的应用程序需要 preact-button 作为依赖项。现在只是一个 .html 文件。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>SO App</title>
    <script type="module">
      import { h, Component, render } from 'https://unpkg.com/preact?module';
      import Button from "https://fantasycdn.com/preact-button?module"
    </script>
  </head>
  <body>
  </body>
</html>

但是，我的应用程序没有使用任何捆绑器，因此导入了 preact-button 的代码。如果我有一个捆绑器，这将不是问题，因为 import ... from "preact" 将通过捆绑器解决。但是现在，利用 type="module" 语法，这个全局模块名称不能再导入了。相反，会抛出一个错误：

react-button.js:
Uncaught TypeError: Error resolving module specifier “preact”. Relative module specifiers must start with “./”, “../” or “/”.

作为 preact-button 的作者，我想要的是我的模块：

可以与捆绑器一起使用（如上所示）
可以在 JavaScript 模块中使用（通过某种方式解决它的依赖关系（动态？）

由于 preact 在他们的网站上宣传这种方法，我快速浏览了他们的构建过程。他们有一个简单的优势，那就是他们不必处理任何类型的依赖关系（例如对等或常规），因为他们根本没有任何依赖关系。

但是是否可以混合使用捆绑模块和 JavaScript 模块而不需要任何繁重的构建过程？甚至可能有一个共同商定的方法吗？

Answer 1

注意 UNPKG claims:

?module

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

这意味着您的构建将由 UNPKG 转换和缓存为：

import { h, Component, render } from 'https://unpkg.com/preact@^10.4.6?module';

const button = h('button', null, 'Click');
export default Button;

作为对这一说法的证实，我检查了 ?module 如何处理 one of my bundled libraries on UNPKG，它转换了：

import { Parser, Grammar } from 'nearley';
import moo from 'moo';

进入：

import { Parser, Grammar } from "https://unpkg.com/nearley@^2.19.1?module";
import moo from "https://unpkg.com/moo@^0.5.1?module";

假设您的 preact-button 模块是在 npm 上发布的，那么当前在您的代码中使用裸导入说明符应该不是问题。

是否可以混合捆绑模块和 JavaScript 模块

Is mixing bundled modules and JavaScript Modules possible

html

javascript

preact