Импорт не работает в Chrome
Я создаю одностраничное приложение на ванильном JavaScript. Я хочу организовать свой код в разных файлах, чтобы сделать его модульным, а это значит, что я должен иметь доступ к функциям, определенным в одном файле, в другом файле. Для этого я использую собственный importexport ES6:
файл-1.js:
export function func1() {}
export function func2() {}
файл-2.js:
import { func1, func2 } from './file-1';
index.html:
<script src = "file-1.js"></script>
Когда я запускаю index.html в Chrome (версия 65), я получаю следующую ошибку:
Uncaught SyntaxError: Unexpected token {.
Что не так в моем коде? Chrome 65 полностью поддерживает модульную систему ES6.
Это была опечатка. Исправлено здесь. Я правильно упомянул имя файла в моем фактическом коде.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот рабочий пример
file1.mjs
function log1() {
console.info('log1');
}
function log2() {
console.info('log2');
}
export { log1, log2 };
file2.mjs вы должны явно написать расширение .mjs
import { log1, log2 } from './file1.mjs';
log1();
log2();
index.html Атрибут уведомления type = "модуль"
<body>
<script type = "module" src = "file2.mjs"></script>
</body>
Тогда вам понадобится статический сервер, чтобы избавиться от блока CORS.
$ yarn global add serve
$ serve ./
Наконец перейдите к http://localhost:5000, и он будет работать
Обновление: Для модулей рекомендуется использовать расширение файла .mjs вместо .js.
Где здесь на самом деле происходит CORS? У меня есть все из вашего ответа, кроме последней части (статический сервер), и я даже не вижу, чтобы запрос на мой модуль (file2.js) вообще происходил.
Что-то изменилось внутри Chrome, теперь он даже больше не уведомляет блок CORS на вкладке консоли. Я не уверен, но, возможно, в протоколе Chrome file: // есть определенные правила, чтобы запросы не отображались в Chrome Dev Tools. Но вы всегда должны использовать локальный сервер для работы с Javascript в браузере, чтобы вы могли копировать настоящий веб-сайт во время разработки.
При использовании сервера синтаксис «импорта» действительно работает. Спасибо. Как вы думаете, где происходит CORS в приведенном выше случае?
Как я уже сказал, в некоторых предыдущих версиях Chrome он явно уведомлял о проблеме на вкладке ПРИСТАВКА при использовании протокола file://.
Вам не нужно использовать расширение .mjs, как вы упомянули в редактировании. Я делаю это на Chrome с помощью .js, используя сервер. Что касается CORS, я теперь вижу статьи о том, что протокол "file: //" может вызывать проблемы CORS в некоторых браузерах. К сожалению, если CORS действительно является проблемой, очень жаль, что в консоли больше нет предупреждений.
Получил ту же проблему. Включив type = 'module', такую важную вещь, чтобы заставить его работать, запустите локальный сервер для использования протокола http: //, а не file: // one, потому что политика CORS блокирует выполнение вашего файла в Chrome v70 + Access to script at 'file:///*.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Chrome (v70) имеет некоторые проблемы при работе с синтаксисом import для локальных файлов, обслуживаемых по протоколу file. Согласно некоторым статьям, это, вероятно, блокировка CORS, которая может произойти с использованием протокола file. Но в этом случае Chrome также не показывает предупреждение CORS в консоли - что странно. Поэтому необходим какой-то HTTP-сервер, чтобы файлы обслуживались по протоколу HTTP (как показал Ву в своем ответе). Firefox v63 (вероятно,> v60) не имеет этих проблем, и вы можете собрать html с модулями js, используя протокол file://, без специального сервера.
Также убедитесь, что:
при импорте используйте расширения типов файлов (
import { func1, func2 } from './file-B.js';).использовать
type = "module"в HTML-элементеscript(<script type = "module" src = "file-A.js"></script>)
На самом деле мы можем игнорировать политику CORS браузера, например Как запустить HTML в Chrome в режиме «--allow-file-access-from-files» @croraf
import { func1, func2 } from './file-1';вы пропустили рывок