Import.meta.url выдает file:///, а не http://?
Я прочитал документы от import.meta.url, в которых говорится:
Полный URL-адрес модуля включает параметры запроса и/или хэш. (после ? или #). В браузерах это либо URL-адрес, с которого был получен скрипт (для внешних скриптов) или URL-адрес содержащий документ (для встроенных скриптов). В Node.js это файл путь (включая протокол file://).
Я создал простое приложение React с помощью этого кода:
console.info(import.meta.url); //here
export function App() {
...
...
console.info(import.meta.url); //also here
...
Затем я создал ресурсы (js, css, html) с помощью сборки npm run (webpack и т. д.) и развернул их в контейнере Nginx Docker.
Однако, когда я запускаю код, я получаю следующее:
Вопрос:
Почему я вижу file:// вместо http://? Это не режим узла, а модуль (App.tsx) — это модуль.
- Что делает веб-пакет (я знаю, что такое объединение), что он по-прежнему извлекает фрагменты js, и эти фрагменты по-прежнему отображаются
file:///, когда они лениво извлекаются?
@Ry- Я не понимаю. файл index.html загружает файл сценария как обычный сценарий. так почему файл:// ?? Можете ли вы дать мне тестовый пример, где, если я изменю свой простой проект, я увижу http?
Современный JavaScript обычно имеет этап сборки, на котором модули разрешаются во время сборки и объединяются в один или несколько сценариев, поэтому сценарий, загружаемый браузером, не соответствует ровно одному входному модулю и может вообще не быть <script type = "module">. В вашем случае какой-то этап сборки обязателен, поскольку у вас есть (потенциал) TypeScript и JSX, которые браузер не понимает. Re: test: Я не хочу тратить время на поиск патча для процесса сборки React+TypeScript, пока он не решит проблему, которая у вас действительно есть,…
… но вы можете использовать <script type = "module">import … from "/foo.js";</script> + console.info(import.meta.url) в простом JavaScript в простом HTML-файле, чтобы увидеть на практике собственные модули ES.
@Ry-f Этот вопрос возникает из следующего сценария: у меня есть веб-сайт a.com, который загружает (микроинтерфейс) другой сайт b.com и этот b.com сайт должен не загружать свои собственные конфигурации (из своего (!) nginx). но он не знает, какой адрес nginx. (конечно, мы решили это с помощью параметров). но мне было интересно: если компонент b.com запущен, и я поместил туда import.meta.url, b.com сможет ЗНАТЬ, что его URL-адрес b.com. это сценарий
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
По умолчанию Webpack заменит значение import.meta.url URL-адресом file: модуля во время сборки. Вы не указали, какую версию Webpack вы используете, но поддержка динамических import.meta.url значений была добавлена в версиях >= 5.68.0 через PR 15246 в результате проблемы 14445.
Чтобы отключить замену import.meta.url Webpack во время сборки связанным file: URL-адресом модуля, обновите конфигурацию:
module: {
parser: {
javascript: {
importMeta: false,
},
},
},
Вот документация по включению или отключению оценки import.meta во время сборки.
Вы можете увидеть пример конфигурации сборки, которая использует это и возвращает нужное значение import.meta.url: https://github.com/morganney/import-meta . Он также размещен на страницах GitHub по адресу https://morganney.github.io/import-meta/
Почему?
Это вопрос дизайна, и поэтому вам лучше задать его дизайнерам, однако я предложу возможную причину.
Webpack поддерживает различные цели. Одним из них является node, а Node.js поддерживает модули CommonJS и ES. В CommonJS нет эквивалента import.meta.url, который поддерживался до модулей ES, и, возможно, поэтому он по умолчанию переписан во время сборки, поскольку вы можете ориентироваться на среду CJS. Более того, вы можете ориентироваться на web, где некоторые браузеры не поддерживают собственные модули ES.
Другим упаковщикам, таким как rollup и swc, пришлось пройти аналогичный процесс обработки import.meta.url в различных контекстах. Таким образом, существуют параметры конфигурации, позволяющие указать Webpack, как обрабатывать import.meta.url во время сборки. Наличие явной опции для этого, вместо того, чтобы пытаться вывести все это из вашего target и/или browserslist файла, вероятно, было более надежным способом продолжить работу с более простым в обслуживании кодом, но вам следует спросить у сопровождающих более точную причину «почему». они выбрали этот дизайн.
Что делает веб-пакет, который по-прежнему извлекает фрагменты js, и эти фрагменты по-прежнему показывают file:///, когда они лениво извлекаются?
Это исходный код Webpack на GitHub. Ссылка на проблему, о которой я упоминал выше. Внутри lib/dependencies/importMetaPlugin.js: https://github.com/webpack/webpack/blob/main/lib/dependentities/ImportMetaPlugin.js#L99
webpackversion (в node_modules): «версия»: «5.90.0»,
Вопрос: почему - «По умолчанию Webpack заменит значение import.meta.url файлом модуля:»? я имею в виду, что если у меня есть 5 блоков, загружаемых динамически, и в каждом из них есть модули с console.info(import.meta.url), то почему это отображается как file://? по сути ЕСТЬ HTTP-запрос. так что я действительно не понимаю, что здесь происходит и почему
Я добавил пример на GitHub: morganney.github.io/import-meta
Если вы включили модуль,
file:///правильный – и соответствующего URL-адресаhttp://все равно может не быть. Вам нужен этот модуль в отдельном файле для динамического импорта или чего-то еще? Как вы собираетесь использовать URL-адрес?