ES模块导入不起作用

Question

我想举一个简单的例子来说明香草ES导入导出。

index.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="module" src="main.js"></script>
</head>
<body>

</body>
</html>

main.js

import {foo} from './mathModule';

console.log(foo);

mathModule.js

export const foo = Math.sqrt(2);

当我运行此页面时，出现错误

main.js:1 GET http://[page].net/test/mathModule 404 (Not Found)

编辑：项目结构

Answer 1

import需要完全限定的URL。除非绝对URL上没有扩展名，否则您不能放弃扩展名。

因此，根据您的示例判断，使用：

import {foo} from './mathModule.js';

当Nimeshka Srimal抓住时，扩展要求似乎在不同的实现之间有所不同。Firefox会.js自动添加，但Chrome和Safari需要实际地址。

我正在查看规范15.2.2 Imports，对于实现者是否应该自动附加扩展，似乎没有任何规范。

此外，正如ASDFGerte从MDN文档中import指出的：

要从中导入的模块。这通常是包含模块的.js文件的相对或绝对路径名。某些捆绑软件可能允许或要求使用扩展名；检查您的环境。只允许使用单引号和双引号字符串。