Question

我正在尝试举一个简单的例子来说明香草ES导入导出。

index.js

cmd+shift+r

main.js

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

</body>
</html>

mathModule.js

import {foo} from './mathModule';

console.log(foo);

运行此页面时出现错误

export const foo = Math.sqrt(2);

编辑：项目结构

测试
- index.html
- main.js
- mathModule.js

Answer 1

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

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

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

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

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

此外，如 ASDFGerte 从the MDN docs on import所指出：

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

Answer 2

最简单的方法是删除export和import表达式，因为您已经在html中包含了这两个文件。

const foo = Math.sqrt(2) // mathModule.js
console.log(foo) // main.js

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="mathmodule.js"></script>
  <script src="main.js"></script>
</head>
<body>

</body>
</html>

如果您正在使用节点或类似工具来运行脚本，则也许应该使用诸如babel之类的编译器。 Import和Export是javascript的“新功能”，因此在大多数浏览器中并未实现

ES模块导入不起作用

2 个答案: