使用 esm.sh 无需捆绑器进行捆绑

在我的上一篇文章中，我分享了一些如何避免在现代 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中的导入映射中。

    <script type="importmap">
      {
        "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"
        }
      }
    </script>

* 将所有依赖项标记为外部依赖项，这是 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";

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

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

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

    <script type="importmap">
      {
        "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"
        }
      }
    </script>

就是这样！无需捆绑器即可捆绑。我们可能会致电
它是无捆绑程序，因为就像无服务器一样，仍然涉及服务器/捆绑程序，只是不需要您处理。

以上是使用 esm.sh 无需捆绑器进行捆绑的详细内容。更多信息请关注PHP中文网其他相关文章！