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

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

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

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

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

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";

登录后复制

使用导入映射

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

{  "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"  }}

登录后复制

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

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

让 esm.sh 编译一个包

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

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

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,};

登录后复制

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

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

{  ret: {    bundleurl: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95?bundle",    id: "e4d1ab3ba39fc16e6de014e6f19bd819605fdd95",    url: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95"  }}

登录后复制

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

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

import { ts } from "/deps/editor.deps.js";

登录后复制

就完成了！

如果您想让

import { basicsetup, editorview } from "codemirror";

登录后复制

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

{  "imports": {    "codemirror": "/deps/editor.deps.js"  }}

登录后复制

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

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

以上就是使用 esmsh 无需捆绑程序即可进行捆绑的详细内容，更多请关注【创想鸟】其它相关文章！