无法弄清楚如何使用JavaScript在浏览器中导入模块

Question

这是一个简单的问题。我正在尝试将模块从一个javascript文件导入到另一个文件，然后在Chrome上运行它。我正在使用2个javascript文件和一个html文件，它们都位于同一文件夹中：

第一个js文件（testfile1.js）：

Lasvegas_tripadvisordummies.df.lm <- glm(Score ~ ., data =     train.data)
Error in glm.fit(x = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,   1,  : 
NA/NaN/Inf in 'y'
In addition: Warning messages:
1: In Ops.ordered(y, mu) : '-' is not meaningful for ordered factors
2: In Ops.ordered(eta, offset) : '-' is not meaningful for ordered factors
3: In Ops.ordered(y, mu) : '-' is not meaningful for ordered factors

第二个js文件（testfile2.js）：

import {test} from 'testfile2.js';

test.func();

该html文件是纯净的空html文件，在标题中带有testfile1.js脚本的链接：

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

let test = {
  func: f
};

export test;

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

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

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

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"，则即使没有import()，也允许任何JavaScript文件使用动态type="module"语法。

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

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