ESM. Выходим за рамки

Итак, работая над... ну не знаю... каким-нибудь замечательным генератором статики, вы, возможно, захотите импортировать в свой код зависимости напрямую из текстовых файлов, таких как: HTML, MD, CSS, SVG или JSON. Конечно, можно использовать бандлер с соответствующим лоадером. Но, допустим, ваш кодекс самурая велит вам - никаких лишних npm install xxx и промежуточных билдов! Только хардкор! Что делать? Выход есть.

Сперва, как обычно, ссылочка на описание спеки, чтобы отмести лишние недоразумения и недопонимания.

И еще пара формальностей перед стартом:

• Убедитесь, что у вас установлена свежая нода, а некро-нода - надежно закопана.

• Если хотите писать изоморфный код, не используйте расширения *.mjs, браузеры такого не любят (не забудьте в настройках package.json врубить "type": "module").

Упражнение первое. Нода. Кастомный лоадер (хук).

Не забыли ноду обновить? А то может не сработать.

Делай раз (loader.js):

import { URL } from 'url';
import { readFile } from 'fs/promises';

function checkUrl(url) {
  return !!['.html', '.htm', '.md', '.css', '.svg', '.json'].find((res) => {
    return url.endsWith(res);
  });
}

export async function 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);
}

Делай два (my-app.js):

import html from './index.html';
import doc from './doc.md';
import css from './styles.css';
import svg from './image.svg';
import data from './data.json';

console.log(html, doc, css, svg, data);

Делай три: 

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

Ссылка на доку: https://nodejs.org/api/esm.html#loaders

В документации технология помечена как экспериментальная, однако, в свежей версии, параметр --experimental-loader заменили на --loader, что, косвенно, но говорит нам о том, что технология на подходе к стабильному состоянию. В любом случае, неплохо знать о такой возможности.

Упражнение второе. Браузер. Перехват запросов.

Переносимся в браузерный рантайм. Задача та-же: хотим грузить модули, которые вообще никакие не модули. Никаких специальных хуков для ESM браузеры не поддерживают. Что делать? Идем на перехват с помощью Service Worker.

Технологии иные, но принцип сохранился. Создаем файл сервис-воркера (sw.js):

function checkUrl(url) {
  return !!['.html', '.htm', '.md', '.css', '.svg', '.json'].find((res) => {
    return url.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' }
  });
  return resp;
}

self.addEventListener('fetch', (e) => {
  if (e.request.destination === 'script' && checkUrl(e.request.url)) {
    e.respondWith(handleRequest(e.request));
  }
});

Регистрируем воркер на странице:

navigator.serviceWorker.register('./sw.js');

Вуаля - используем кастомные импорты:

import html from './index.html';
import doc from './doc.md';
import css from './styles.css';
import svg from './image.svg';
import data from './data.json';

console.log(html, doc, css, svg, data);

Доки по воркерам прочитайте внимательно, там есть ряд важных нюансов, с ними лучше ознакомиться перед использованием подобных штук в проде. Но сейчас мы получили от браузера все, что хотели.

Упражнение третье. Нода + браузер. Параметры запроса.

Теперь будет больше, кхм, наркомании. Я просто покажу тропинку, а вы сами решите, ходить по ней или нет. Итак, возможно именно Вы об этом знали, но для тех, кто не знал, я сообщу: в ESM поддерживаются такие штуки как top level await. Это значит, что перед тем, как модуль отдаст свой экспорт, вы можете совершить в нем что-то асинхронное. Например, сделать запрос и получить на него ответ. Что нам это дает? Правильно.

Делаем модуль-загрузчик (load.js):

let result = null;
const path = 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;
    content = fs.readFileSync(path).toString();
  }
  result = path.includes('.json') ? JSON.parse(content) : content;
}
export default result;

Грузим свои ассеты через прокси-модуль:

import html from './load.js?#./index.html';
import doc from './load.js?#./doc.md';
import css from './load.js?#./styles.css';
import svg from './load.js?#./image.svg';
import data from './load.js?#./data.json';

console.log(html, doc, css, svg, data);

Это хотя и очень упрощенный пример, но уже изоморфный. Не думаю, что кто-то всерьез станет использовать такое для загрузки модулей, но сам принцип, на мой взгляд, как минимум, интересен и стимулирует инженерную фантазию.

Важная деталь: экспорты каждого модуля кэшируются. И этот кэш привязан к адресу модуля. Поэтому, если ваши импортируемые файлы меняются динамически - пути к модулям тоже должны меняться. А это значит, что импорты получится использовать только динамические. Помня про поддержку top level await, мы не будем считать это большой проблемой.

Итого.

Вы можете спросить меня: - а есть ли в этом вообще какая-то практическая ценность? Ведь можно просто использовать те-же fs.readFileSync или fetch... Я, пожалуй, уклонюсь от прямого ответа и напомню, что если звезды зажигают - значит это кому-нибудь нужно.

Надеюсь было весело. Еще больше надеюсь, что вы узнали для себя что-то полезное. Используйте больше ESM и меньше CJS. Всем - добра и мира.