Himpunan tanpa berkas dengan esm.sh

Dalam catatan saya sebelum ini, saya berkongsi beberapa petua bagaimana anda boleh mengelakkan perkakas pembangun yang rumit dalam projek web moden. Saya berkongsi cara anda boleh mengimport pakej terus daripada penyemak imbas dengan esm.sh.

Apabila anda mengumpul kebergantungan, dan terutamanya semasa anda mengambil kebergantungan yang mempunyai kebergantungan sendiri (yang dipanggil kebergantungan transitif), anda mungkin mendapati bahawa masa pemuatan awal anda terjejas. Sudah tentu, setelah halaman dimuatkan semuanya dicache dengan kemas. Tetapi penyemak imbas anda perlu memuatkan banyak fail yang berbeza (seperti yang akan dimaklumkan oleh tab rangkaian anda dalam alat pembangun) dan sebaik sahaja ia memuatkan fail tersebut, ia perlu memuatkan sekumpulan fail lagi.

Sudah tentu, inilah keseluruhan sebab mengapa pengikat wujud! Jadi kesimpulannya ialah pada satu ketika, anda memerlukan pengikat. Baiklah, mungkin. Tetapi anda tidak perlu menjalankan pengikat itu sendiri. esm.sh mempunyai ciri percubaan yang sebenarnya akan membuat satu berkas untuk anda dengan apa sahaja pakej yang anda tentukan. Inilah cara saya menggunakannya.

Katakan kami memerlukan pakej berikut untuk editor yang sedang kami bina.

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

Menggunakan peta import

Kini anda boleh hanya menambah ini pada peta import anda dalam 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>

* menandakan semua kebergantungan sebagai luaran, yang merupakan satu lagi ciri esm.sh. Saya juga terpaksa menambah semua kebergantungan codemirror secara manual. Saya mendapati bahawa ini diperlukan, kerana pakej codemirror yang berbeza mempunyai versi kebergantungan translatif yang berbeza sedikit dan ia akan mengimport versi yang berbeza bagi kebergantungan transitif tersebut yang menyebabkan konflik.

Pendekatan ini berfungsi, tetapi seperti yang diterangkan dalam pengenalan, masa pemuatan awal akan terjejas kerana penyemak imbas perlu memuat turun banyak fail dan ia tidak tahu terlebih dahulu fail mana yang patut dimuat turun.

Membiarkan esm.sh menyusun satu berkas

Anda boleh menggunakan pendekatan ini untuk membenarkan esm.sh membuat himpunan tanpa menggunakan bundle sendiri. Saya juga akan menerangkan cara anda boleh mendapatkan jenis untuk berfungsi.

Pertama sekali saya mencipta fail /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,
};

Terdapat sedikit pengulangan di sini. Dan anda perlu mengemas kini import di berbilang tempat jika anda mahu menukarnya. Ini diakui agak menyusahkan. Saya biarkan anda memutuskan sama ada ia berbaloi.

Dalam apa jua keadaan, anda akan melihat bahawa apabila anda mengimport fail ini, ret akan dicetak ke konsol. Inilah yang dicetak:

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

Url bundle ialah URL yang mengandungi bundle esm.sh yang dicipta untuk kami! Kami mengimportnya dengan import dinamik() dan kemudian mengeksportnya semula.

Jadi, anda boleh mengimport semuanya daripada /deps/editor.deps.js.

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

Dan anda sudah selesai!

Jika anda mahukan import seperti

import { basicSetup, EditorView } from "codemirror";

untuk bekerja, kami boleh mengemas kini peta import kami seperti berikut:

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

Ini tidak berfungsi untuk eksport lalai (seperti pakej skrip taip). Untuk ini kita boleh membuat fail deps/editor.deps.d.ts untuk mendapatkan jenis berfungsi:

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

Dan begitulah! Menghimpun tanpa pengikat. Kami boleh menghubungi
ia tanpa pengikat, kerana sama seperti tanpa pelayan masih terdapat pelayan/pengikat yang terlibat, cuma ia tidak perlu anda uruskan.

Atas ialah kandungan terperinci Himpunan tanpa berkas dengan esm.sh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!