esm.sh를 사용하여 번들러 없이 번들링

이전 게시물에서 최신 웹 프로젝트에서 복잡한 개발자 도구를 사용하지 않는 방법에 대한 몇 가지 팁을 공유했습니다. 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의 importmap에 이를 추가할 수 있습니다.

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

작업을 위해 다음과 같이 importmap을 업데이트할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!