Я экспериментировал с недавно добавленной нативной поддержкой модулей ECMAScript. в браузеры. Приятно, что наконец-то появилась возможность напрямую и чисто импортировать скрипты из JavaScript.
/example.html ????
<script type="module">
import {example} from '/example.js';
example();
</script>
/example.js
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
Однако это позволяет мне импортировать только те модули, которые определяются отдельными внешними файлами JavaScript. Обычно я предпочитаю встраивать некоторые скрипты, используемые для начального рендеринга, чтобы их запросы не блокировали остальную часть страницы. С традиционной неформально структурированной библиотекой это может выглядеть так:
/inline-traditional.html ????
<body>
<script>
var example = {};
example.example = function() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script>
example.example();
</script>
Однако наивное встраивание файлов модулей, очевидно, не сработает, поскольку при этом будет удалено имя файла, используемое для идентификации модуля в других модулях. Сервер HTTP/2 push может быть каноническим способом справиться с этой ситуацией, но он по-прежнему не подходит для всех сред.
Можно ли выполнить эквивалентное преобразование с модулями ECMAScript?
Есть ли способ для <script type="module"> импортировать модуль, экспортированный другим в том же документе?
Я предполагаю, что это могло бы работать, позволяя сценарию указывать путь к файлу и вести себя так, как если бы он уже был загружен или отправлен из пути.
/inline-name.html ????
<script type="module" name="/example.js">
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script type="module">
import {example} from '/example.js';
example();
</script>
Или, может быть, с помощью совершенно другой схемы ссылок, например, используемой для локальных ссылок SVG:
/inline-id.html ????
<script type="module" id="example">
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script type="module">
import {example} from '#example';
example();
</script>
Но ни одна из этих гипотез на самом деле не работает, и я не видел альтернативы, которая работает.
inline-moduleможно считать хорошим началом с модулями ES. Пакеты Webpack/Rollup по-прежнему незаменимы в производственной среде, особенно если вы боитесь блокировать запросы. Да, сервис-воркер выглядит как жизнеспособное решение, но он все равно должен делать запросы для предоставления данных... что может блокировать, кстати. - person Estus Flask schedule 06.09.2017<script>и используют их для заполнения кеша, чтобы избежать дополнительных запросов. Возможно, они могли бы даже использовать стандартныйtype="module"с добавленным телом, если реализация достаточно умна. - person Jeremy schedule 07.09.2017