先前文章中，我分享了一些在现代 Web 项目中避免使用复杂开发者工具的技巧，其中包括如何利用 esm.sh 直接从浏览器导入包。
随着依赖项的累积，特别是当依赖项本身也依赖其他库（即传递依赖项）时，您可能会发现初始加载时间受到影响。当然，页面加载后，所有内容都会被有效缓存。但浏览器需要加载许多不同的文件（正如开发者工具的网络选项卡所示），加载完这些文件后，还需要加载另一批文件。
这就是捆绑器存在的意义！因此，最终您可能需要一个捆绑器。嗯，或许吧。但您无需自行运行它。esm.sh 提供一项实验性功能，可为您创建包含指定包的捆绑包。以下是我的使用方法。
假设我们正在构建的编辑器需要以下包：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 中的导入映射：
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"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：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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 会打印到控制台。以下是打印内容：
1
2
3
4
5
6
7
{
ret: {
bundleurl: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95?bundle",
id: "e4d1ab3ba39fc16e6de014e6f19bd819605fdd95",
url: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95"
}
}
因此，您可以简单地从 /deps/editor.deps.js 导入所有内容：
1
import { ts } from "/deps/editor.deps.js";
就完成了！
如果您想让
1
import { basicsetup, editorview } from "codemirror";
正常工作，我们可以按如下方式更新导入映射：
1
2
3
4
5
{
"imports": {
"codemirror": "/deps/editor.deps.js"
}
}
这对于默认导出（如 typescript 包）不起作用。为此，我们可以创建一个 deps/editor.deps.d.ts 文件以使类型正常工作：
就是这样！无需捆绑器即可进行捆绑。我们可以称之为“无捆绑器”，因为它虽然仍然涉及服务器/捆绑器（就像无服务器一样），但您无需自行处理。
以上就是使用 esmsh 无需捆绑程序即可进行捆绑的详细内容，更多请关注php中文网其它相关文章！