无法弄清楚如何使用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>

每当我在chrome中打开html文件时，都会收到错误消息：

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

当我删除导入语句中的括号时，我得到了意外的标识符语句。 这不是在浏览器中导入模块的正确方法吗？ 为什么根本不起作用？

Answer 1

模块需要type="module"而不是"text/javascript"

根据Jaromanda X的评论，您需要将<script>标记的type属性的值更改为"module"因为import { test } from 'testfile2.js'是模块代码。

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

那么动态import()

如果您真的不想使用type="module" ，则即使没有type="module" ，任何javascript文件都可以使用动态import()语法。

但是，动态导入有一个警告，函数import()返回一个promise，因此，您将无法同步使用它。 您必须await或.then动态导入才能使用解析后的值。

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