Не могу понять, как импортировать модули в браузере с помощью JavaScript

Question

Это простая проблема. Я пытаюсь импортировать модули из одного файла JavaScript в другой, а затем запустить его в Chrome. Я использую 2 javascript-файла и html-файл, все в одной папке:

первый файл js (testfile1.js):

import {test} from 'testfile2.js';

test.func();

второй файл js (testfile2.js):

let f = function() {
  console.log("TEST");
}

let test = {
  func: f
};

export test;

HTML-файл представляет собой простой пустой HTML-файл со ссылкой на скрипт testfile1.js в заголовке:

<script type="text/javascript" src="testfile1.js"></script>

Всякий раз, когда я открываю HTML-файл в Chrome, я получаю сообщение об ошибке:

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

Когда я убрал скобки в операторе импорта, я получил неожиданный оператор идентификатора. Разве это не правильный способ импортировать модули в браузере? Почему он вообще не работает?

Answer 1

Для модулей требуется type="module", а не "text/javascript"

Согласно комментарию Jaromanda X, вам нужно изменить значение атрибута type тега <script> на "module" как import { test } from 'testfile2.js'код модуля.

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

А как насчет динамического import()

Если вы действительно не хотите использовать type="module", любой файл JavaScript может использовать динамический import()синтаксис, даже без type="module".

Однако динамический импорт имеет предостережение, функция import() возвращает обещание, поэтому вы не можете использовать его синхронно.Вы должны либо await, либо .then динамический импорт, чтобы использовать значение, к которому оно относится.

import('testfile2.js').then(({ test }) => {
  // your code
});