Синтаксическая ошибка: объявления импорта могут появляться только на верхнем уровне модуля

Question

Я пытаюсь импортировать функцию из индекса 'test. js' in '. js'

test. js:

var testFunction = function test(){ alert("hello World") }

export testFunction

в в самом верху индекса. js. Я попробовал следующее утверждение:

import testFunction from './test.js'

Теперь у меня появляется следующая ошибка в моей консоли firefox, когда я запускаю свой индекс. html файл в браузере:

SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля (в строке 1)

Answer 1

Есть два способа: Решение 1 (экспорт по умолчанию) :

тест. js

var testFunction = function test() {alert('hello world')}

export default testFunction;

Вы также можете сделать export default function() {alert('hello world')};

index. js

import testFunction from './test.js'

Решение 2 (Именованный экспорт) :

test. js

var testFunction = function test() {alert('hello world')};

export { testFunction };

index. js

import { testFunction } from './test.js'

В обоих случаях ваш файл html имеет <script type="module" src="./index.js"></script>

В приведенной выше строке исправляется ошибка синтаксиса: объявления импорта могут появляться только на верхнем уровне модуля. Это потому, что когда вы импортируете, файл теперь становится модулем. Ваш индексный файл. js теперь является модулем верхнего уровня.

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

Дополнительная информация по модулям .

Answer 2

Решение:

тест. js

var testFunction = function test(){ alert("hello World") }

export {testFunction}

индекс. js:

import testFunction from './test.js'

//...

html:

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