Импорт ES2015 не работает (даже на верхнем уровне) в Firefox

Это мои образцы файлов:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

Когда я загружаю страницу в Firefox 46, она возвращает "SyntaxError: декларации импорта могут отображаться только на верхнем уровне модуля", но я не уверен, насколько более высокий уровень может быть представлен в инструкции по импорту. Является ли эта ошибка красной селедой, а импорт/экспорт просто не поддерживается?

ОТВЕТЫ

Ответ 1

На самом деле вы получили ошибку, потому что вам нужно явно указать, что вы загружаете модуль - только тогда разрешено использование модулей:

<script src="t1.js" type="module"></script>

Я нашел это в этом документе об использовании импорта ES6 в браузере. Рекомендуемое чтение.

Полностью поддерживается в этих версиях браузера (и позже; полный список на caniuse.com):

  • Firefox 60
  • Chrome (настольный компьютер) 65
  • Chrome (android) 66
  • Safari 1.1

В старых браузерах может потребоваться включить некоторые флаги в браузерах:

  • Chrome Canary 60 - за флагом экспериментальной веб-платформы в chrome:flags.
  • Firefox 54 - настройка dom.moduleScripts.enabled в about:config.
  • Edge 15 - за настройкой экспериментальных функций JavaScript в about:flags.

Ответ 2

Это уже не так. Все текущие браузеры теперь поддерживают модули ES6

Оригинальный ответ ниже

От import по MDN:

В настоящее время эта функция не реализована ни в каких браузерах. Он реализован во многих транспилерах, таких как компилятор Traceur, Babel или Rollup.

Браузеры не поддерживают import.

Вот таблица поддержки браузера:

enter image description here

Если вы хотите импортировать модули ES6, я бы предложил использовать транспилер (например, babel).

Ответ 3

Вы должны указать его тип в скрипте, и экспорт должен быть по умолчанию.. для ex в вашем случае это должно быть,

<script src='t1.js' type='module'>

для t2.js используйте default после экспорта, как это, экспортируйте default "здесь ваше выражение идет" (вы не можете использовать переменную здесь). Вы можете использовать функцию, как это,

export default function print(){ return console.log('hello world');}

и для импорта ваш синтаксис импорта должен быть таким, импортируйте печать из './t2.js' (используйте расширение файла и./для того же каталога).. Я надеюсь, что это будет полезно для вас!