ESM. Jenseits gehen / Sudo Null IT News

Wenn Sie also an … Ich weiß nicht … einem großartigen statischen Generator arbeiten, möchten Sie vielleicht Abhängigkeiten aus Textdateien wie HTML, MD, CSS, SVG oder JSON direkt in Ihren Code importieren. Natürlich können Sie auch einen Bundler mit entsprechendem Loader verwenden. Aber nehmen wir an, Ihr Samurai-Code sagt es Ihnen – keine zusätzliche npm-Installation xxx und Zwischen-Builds! Nur Hardcore! Was zu tun ist? Es gibt einen Ausgang.

Zuerst, wie immer, Link zur Spezifikationsbeschreibungum unnötige Missverständnisse und Missverständnisse auszuräumen.

Und noch ein paar Formalitäten vor dem Start:

  • Stellen Sie sicher, dass Sie einen neuen Knoten installiert haben und der Nekroknoten sicher vergraben ist.

  • Wenn Sie isomorphen Code schreiben möchten, verwenden Sie keine *.mjs-Erweiterungen, Browser mögen das nicht (vergessen Sie nicht, “type”: “module” in den Paket.json-Einstellungen festzulegen).

Übung eins. Aber ja. Benutzerdefinierter Lader (Haken).

Haben Sie vergessen, den Knoten zu aktualisieren? Und das könnte nicht funktionieren.

Mach es einmal (loader.js):

importiere { URL } aus ‘url’; importiere { readFile } aus ‘fs/promises’; function checkUrl(url) { return !![‘.html’, ‘.htm’, ‘.md’, ‘.css’, ‘.svg’, ‘.json’].find((res) => { URL zurückgeben.endsWith(res); }); } Exportiere asynchrone Funktion load(url, context, defaultLoad) { if (checkUrl(url)) {const content = (await readFile(new URL(url))).toString(); return { format: ‘module’, source: `export default ${url.endsWith(‘json’) ? content : JSON.stringify(content)};`, shortCircuit: true, }; } return defaultLoad(url, context, defaultLoad); }

Machen Sie zwei (my-app.js):

HTML aus „./index.html“ importieren; Dokument aus „./doc.md“ importieren; css aus ‘./styles.css’ importieren; importiere SVG aus ‘./image.svg’; Daten aus „./data.json“ importieren; console.log (html, doc, css, svg, Daten);

Machen Sie drei:

node –loader ./loader.js ./my-app.js

Doc-Link: https://nodejs.org/api/esm.html#loaders

In der Dokumentation ist die Technologie als experimentell gekennzeichnet, jedoch wurde in der neuesten Version der Parameter –experimental-loader durch –loader ersetzt, was uns indirekt mitteilt, dass die Technologie auf dem Weg zu einem stabilen Zustand ist. In jedem Fall ist es gut, diese Möglichkeit zu kennen.

Übung zwei. Browser. Abfangen von Anfragen.

Wir werden zur Browserlaufzeit übertragen. Die Aufgabe ist dieselbe: Wir wollen Module laden, die gar keine Module sind. Browser unterstützen keine speziellen Hooks für ESM. Was zu tun ist? Ich werde mit abfangen Servicemitarbeiter.

Die Technologien sind unterschiedlich, aber das Prinzip bleibt erhalten. Erstellen Sie eine Service-Worker-Datei (sw.js):

function checkUrl(url) { return !![‘.html’, ‘.htm’, ‘.md’, ‘.css’, ‘.svg’, ‘.json’].find((res) => { URL zurückgeben.endsWith(res); }); } async function handleRequest(req) { let content = await (await self.fetch(req.url)).text(); let resp = new Response(`export default ${req.url.endsWith(‘json’) ? content : JSON.stringify(content)};`, { headers: { ‘Content-Type’: ‘text/javascript’ } }); Rückkehr bzw.; } self.addEventListener(‘fetch’, (e) => { if (e.request.destination === ‘script’ && checkUrl(e.request.url)) { e.respondWith(handleRequest(e.request)) ; } });

Registrieren Sie den Arbeiter auf der Seite:

navigator.serviceWorker.register(‘./sw.js’);

Voila – benutzerdefinierte Importe verwenden:

HTML aus „./index.html“ importieren; Dokument aus „./doc.md“ importieren; css aus ‘./styles.css’ importieren; importiere SVG aus ‘./image.svg’; Daten aus „./data.json“ importieren; console.log (html, doc, css, svg, Daten);

Lesen Sie die Docks für Arbeiter sorgfältig durch, es gibt eine Reihe wichtiger Nuancen, es ist besser, sich mit ihnen vertraut zu machen, bevor Sie solche Dinge in der Produktion verwenden. Aber jetzt haben wir vom Browser alles bekommen, was wir wollten.

Übung drei. Knoten + Browser. Parameter anfordern.

Jetzt wird es mehr, ähm, Drogenabhängigkeit geben. Ich zeige dir nur den Weg, und du entscheidest, ob du ihn begehst oder nicht. Also, vielleicht wussten Sie davon, aber für diejenigen, die es nicht wussten, werde ich es Ihnen sagen: Dinge wie Top-Level-Award werden in ESM unterstützt. Das bedeutet, dass Sie, bevor das Modul seinen Export gibt, etwas asynchrones darin tun können. Stellen Sie beispielsweise eine Anfrage und erhalten Sie eine Antwort darauf. Was bringt uns das? Korrekt:

Wir erstellen ein Lademodul (load.js):

Ergebnis = null lassen; konstanter Pfad = import.meta.url.split(‘#’)[1]; if (path) { let content; if (typeof window === ‘object’) { content = await (await fetch(path)).text(); } Else { const fs = (await import(‘fs’)).default; Inhalt = fs.readFileSync(Pfad).toString(); } result = path.includes(‘.json’) ? JSON-Parse (Inhalt): Inhalt; } Standardergebnis exportieren;

Wir laden unsere Assets über ein Proxy-Modul:

html aus ‘./load.js?#./index.html’ importieren; Dokument aus „./load.js?#./doc.md“ importieren; css aus ‘./load.js?#./styles.css’ importieren; importiere SVG aus ‘./load.js?#./image.svg’; Importieren Sie Daten aus ‘./load.js?#./data.json’; console.log (html, doc, css, svg, Daten);

Obwohl dies ein sehr vereinfachtes Beispiel ist, ist es bereits isomorph. Ich glaube nicht, dass das jemand ernsthaft zum Laden von Modulen nutzen wird, aber das Prinzip an sich ist meiner Meinung nach zumindest interessant und regt die Engineering-Fantasie an.

Ein wichtiges Detail: Die Exporte jedes Moduls werden zwischengespeichert. Und dieser Cache ist an die Adresse des Moduls gebunden. Wenn sich also Ihre Importdateien dynamisch ändern, müssen sich auch die Modulpfade ändern. Das bedeutet, dass nur dynamische Importe verwendet werden können. In Anbetracht der erwarteten Unterstützung für die oberste Ebene werden wir dies nicht als großes Problem betrachten.

Gesamt.

Sie fragen mich vielleicht: – Hat das überhaupt einen praktischen Wert? Schließlich können Sie einfach das gleiche fs.readFileSync verwenden oder abrufen … Ich werde vielleicht einer direkten Antwort ausweichen und Sie daran erinnern, dass, wenn die Sterne leuchten, jemand es braucht.

Hoffe es hat Spaß gemacht. Ich hoffe auch, dass Sie etwas Nützliches für sich selbst gelernt haben. Verwenden Sie mehr ESM und weniger CJS. Alles – Güte und Frieden.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *