如何使用es6模块导入和导出js文件

Question

我在最基本的级别上无法使用es6模块功能。

在查看MDN文档时，我看到了使用该功能的许多变体，但是没有一个对我有用。 考虑以下代码段：


//importer.js
"use strict";

import * as imported from "./exporter";

imported.foo();


//exporter.js
"use strict";

export const foo = () => console.log('success');

//main.html
<html>
<head>
<script src = "./importer.js"></script>
</head>
</html>

我希望以下代码记录“成功”，因此我知道“导入的模块”设法从“导出的模块”导入foo函数。

我尝试了其他一些变体，例如带括号{}的导出或默认的MDN编写的导出。

显然我缺少基本的东西。 您的帮助将不胜感激。

Answer 1

在您的html脚本元素中，请添加type="module"属性，在您的导入器文件中，您需要添加文件扩展名

 import * as imported from "./exporter.js";

Answer 2

由于CORS是HTTP之上的分层结构，因此除了HTTP https chrome和chrome-extension外，处理CORS毫无意义，因为后3个（我在这里没有文档）可能依赖与HTTP相同的规则。

目前尚未定义CORS的任何其他协议行为。 因此Chrome阻止了它。

要单独回答每个问题：

1）不，他们只是认为由于未为其他协议定义CORS，因此最安全的方法是崩溃并显示“未实现”错误

2）由于1）答案为否，因此该问题不适用。 但是，如果Chrome放开了请求，则取决于未知协议来正确处理CORS，这可能无法正确完成

3）Firefox和Chrome之间的区别在于，Firefox首先检查请求者文档的源和请求的资源是否相同（如果是，则让它通过，否则，它遵循CORS流程），而Chrome始终遵循CORS流程在检查原点匹配之前。

-我不知道哪种行为最符合Fetch规范-似乎两者都可以，因为规范的一部分说

“文件”“ ftp”

目前，不幸的是，文件和ftp URL留给读者作为练习。

如有疑问，请返回网络错误。

我唯一看到的危害是Firefox会让脚本在屏幕上显示来自file：///的敏感信息，从而使肩膀间谍无法抓住。 那和CORS无关。