使用 esmsh 无需捆绑程序即可进行捆绑

先前文章中，我分享了一些在现代 Web 项目中避免使用复杂开发者工具的技巧，其中包括如何利用 esm.sh 直接从浏览器导入包。

随着依赖项的累积，特别是当依赖项本身也依赖其他库（即传递依赖项）时，您可能会发现初始加载时间受到影响。当然，页面加载后，所有内容都会被有效缓存。但浏览器需要加载许多不同的文件（正如开发者工具的网络选项卡所示），加载完这些文件后，还需要加载另一批文件。

这就是捆绑器存在的意义！因此，最终您可能需要一个捆绑器。嗯，或许吧。但您无需自行运行它。esm.sh 提供一项实验性功能，可为您创建包含指定包的捆绑包。以下是我的使用方法。

假设我们正在构建的编辑器需要以下包：

<code class="javascript">import ts from "typescript";
import { tssync, tsfacet, tslinter, tsautocomplete } from "@valtown/codemirror-ts";
import { basicsetup, editorview } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { acceptcompletion, autocompletion } from "@codemirror/autocomplete";
import { compartment, stateeffect } from "@codemirror/state";
import { onedark } from "@codemirror/theme-one-dark";
import { indentwithtab } from "@codemirror/commands";
import { keymap, viewplugin } from "@codemirror/view";
import {
  createdefaultmapfromcdn,
  createsystem,
  createvirtualtypescriptenvironment,
} from "@typescript/vfs";</code>

使用导入映射

您可以将这些添加到 index.html 中的导入映射：

<code class="json">{
  "imports": {
    "typescript": "https://esm.sh/typescript",
    "@valtown/codemirror-ts": "https://esm.sh/*@valtown/codemirror-ts",
    "style-mod": "https://esm.sh/style-mod",
    "w3c-keyname": "https://esm.sh/w3c-keyname",
    "crelt": "https://esm.sh/crelt",
    "@marijn/find-cluster-break": "https://esm.sh/@marijn/find-cluster-break",
    "@lezer/": "https://esm.sh/*@lezer/",
    "@codemirror/": "https://esm.sh/*@codemirror/",
    "codemirror": "https://esm.sh/*codemirror"
  }
}</code>

*所有依赖项都被标记为外部依赖项，这是 esm.sh 的另一项功能。我还必须手动添加 codemirror 的所有依赖项。我发现这是必要的，因为不同 codemirror 包的解析依赖项版本略有不同，这会导致导入不同版本的传递依赖项并产生冲突。

此方法有效，但正如引言中提到的，初始加载时间会受到影响，因为浏览器需要下载大量文件，并且它无法预先知道需要下载哪些文件。

让 esm.sh 编译一个包

您可以使用此方法让 esm.sh 创建捆绑包，而无需自行使用捆绑器。我还会解释如何使类型正常工作。

首先，我创建了一个文件 /deps/editor.deps.js：

<code class="javascript">import build from "https://esm.sh/build";

const ret = await build({
  dependencies: {
    "codemirror": "^6.0.1",
    "@valtown/codemirror-ts": "^2.3.1",
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/autocomplete": "^6.18.4",
    "@codemirror/state": "^6.5.0",
    "@codemirror/theme-one-dark": "^6.1.2",
    "@codemirror/commands": "^6.7.1"
  },
  source: `
  import ts from "typescript";
  import { tssync, tsfacet, tslinter, tsautocomplete } from "@valtown/codemirror-ts";
  import { basicsetup, editorview } from "codemirror";
  import { javascript } from "@codemirror/lang-javascript";
  import { acceptcompletion, autocompletion } from "@codemirror/autocomplete";
  import { compartment, stateeffect } from "@codemirror/state";
  import { onedark } from "@codemirror/theme-one-dark";
  import { indentwithtab } from "@codemirror/commands";
  import { keymap, viewplugin } from "@codemirror/view";
  import {
  createdefaultmapfromcdn,
  createsystem,
  createvirtualtypescriptenvironment,
} from "@typescript/vfs";

  export {
    ts,
    tssync,
    tsfacet,
    tslinter,
    tsautocomplete,
    basicsetup,
    editorview,
    javascript,
    acceptcompletion,
    autocompletion,
    compartment,
    stateeffect,
    onedark,
    indentwithtab,
    keymap,
    viewplugin,
    createdefaultmapfromcdn,
    createsystem,
    createvirtualtypescriptenvironment,
  };`
});

const {
  ts,
  tssync,
  tsfacet,
  tslinter,
  tsautocomplete,
  basicsetup,
  editorview,
  javascript,
  acceptcompletion,
  autocompletion,
  compartment,
  stateeffect,
  onedark,
  indentwithtab,
  keymap,
  viewplugin,
  createdefaultmapfromcdn,
  createsystem,
  createvirtualtypescriptenvironment,
} = await import(ret.bundleurl);

console.log({ret});

export {
  ts,
  tssync,
  tsfacet,
  tslinter,
  tsautocomplete,
  basicsetup,
  editorview,
  javascript,
  acceptcompletion,
  autocompletion,
  compartment,
  stateeffect,
  onedark,
  indentwithtab,
  keymap,
  viewplugin,
  createdefaultmapfromcdn,
  createsystem,
  createvirtualtypescriptenvironment,
};</code>

这里有很多重复代码。如果要更改导入，则需要在多个位置更新。这无疑是一件麻烦事。是否值得，由您决定。

Magic AI Avatars

神奇的AI头像，获得200多个由AI制作的自定义头像。

下载

无论如何，您都会看到导入此文件时 ret 会打印到控制台。以下是打印内容：

<code class="json">{
  ret: {
    bundleurl: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95?bundle",
    id: "e4d1ab3ba39fc16e6de014e6f19bd819605fdd95",
    url: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95"
  }
}</code>

bundleurl 是包含为我们创建的捆绑包的 esm.sh URL！我们使用动态 import() 导入它，然后重新导出它。

因此，您可以简单地从 /deps/editor.deps.js 导入所有内容：

<code class="javascript">import { ts } from "/deps/editor.deps.js";</code>

就完成了！

如果您想让

<code class="javascript">import { basicsetup, editorview } from "codemirror";</code>

正常工作，我们可以按如下方式更新导入映射：

<code class="json">{
  "imports": {
    "codemirror": "/deps/editor.deps.js"
  }
}</code>

这对于默认导出（如 typescript 包）不起作用。为此，我们可以创建一个 deps/editor.deps.d.ts 文件以使类型正常工作：

就是这样！无需捆绑器即可进行捆绑。我们可以称之为“无捆绑器”，因为它虽然仍然涉及服务器/捆绑器（就像无服务器一样），但您无需自行处理。