先前文章中，我分享了一些在现代 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 无需捆绑程序即可进行捆绑的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500425.html
微信扫一扫 
支付宝扫一扫 
