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

【问题标题】：Is mixing bundled modules and JavaScript Modules possible是否可以混合捆绑模块和 JavaScript 模块
【发布时间】：2020-11-06 02:34:07
【问题描述】：

受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 模块？是否有一种普遍认可的方法？

【问题讨论】：

标签： javascript html preact

【解决方案1】：

注意UNPKG claims:

?module

将 JavaScript 模块中的所有 “bare” import specifiers 扩展为 unpkg URL。此功能非常实验性

这意味着您的构建将被 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 上发布的，那么当前在您的代码中使用裸导入说明符应该不是问题。

【讨论】：