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

Question

I'm having troubles using the es6 modules feature at the most basic level. 我在最基本的级别上无法使用es6模块功能。

Looking at MDN documentation I saw many variations of using that feature, but none of them worked for me. 在查看MDN文档时，我看到了使用该功能的许多变体，但是没有一个对我有用。 Consider the following snippet: 考虑以下代码段：


//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>

I expect the following code to log 'success' so I know that 'imported module' managed to import the foo function from 'exported module'. 我希望以下代码记录“成功”，因此我知道“导入的模块”设法从“导出的模块”导入foo函数。

I've tried some other variations as well like export with parenthesis {} or default export just as written in MDN. 我尝试了其他一些变体，例如带括号{}的导出或默认的MDN编写的导出。

Obviously i'm missing something basic. 显然我缺少基本的东西。 Your help will be much appreciated. 您的帮助将不胜感激。

Answer 1

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

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

Answer 2

CORS is layered over HTTP so it makes somehow no sense to deal with CORS besides http https chrome and chrome-extension since the last 3 probably (I lack doc here) relies over the same rules as HTTP. 由于CORS是HTTP之上的分层结构，因此除了HTTP https chrome和chrome-extension外，处理CORS毫无意义，因为后3个（我在这里没有文档）可能依赖与HTTP相同的规则。

Any other protocol behavior for CORS is undefined for now. 目前尚未定义CORS的任何其他协议行为。 So Chrome blocks it. 因此Chrome阻止了它。

To answer each question individually: 要单独回答每个问题：

1) No, they just consider that since the CORS is not defined for other protocol, the safest is to crash with an error saying "not implemented" 1）不，他们只是认为由于未为其他协议定义CORS，因此最安全的方法是崩溃并显示“未实现”错误

2) Since 1) answer is No, this question is not applicable. 2）由于1）答案为否，因此该问题不适用。 But if Chrome let the request go, then it's up to the unknown-protocol to properly handle CORS, which will probably not be done right 但是，如果Chrome放开了请求，则取决于未知协议来正确处理CORS，这可能无法正确完成

3) The difference between Firefox and Chrome is that Firefox first check if origins of the requester document and the requested resource are the same (and if so, it let it through, otherwise, it follow CORS process) while Chrome always follow the CORS process before checking the origin matching. 3）Firefox和Chrome之间的区别在于，Firefox首先检查请求者文档的源和请求的资源是否相同（如果是，则让它通过，否则，它遵循CORS流程），而Chrome始终遵循CORS流程在检查原点匹配之前。

-I don't know which behavior follow best the Fetch specification- It seems that both are ok since part of the spec says -我不知道哪种行为最符合Fetch规范-似乎两者都可以，因为规范的一部分说

"file" "ftp" “文件”“ ftp”

For now, unfortunate as it is, file and ftp URLs are left as an exercise for the reader. 目前，不幸的是，文件和ftp URL留给读者作为练习。

When in doubt, return a network error. 如有疑问，请返回网络错误。

The only harm I could see is that Firefox would let a script display sensitive information from file:/// on your screen, that a shoulder spyer could grab. 我唯一看到的危害是Firefox会让脚本在屏幕上显示来自file：///的敏感信息，从而使肩膀间谍无法抓住。 It's not related to CORS then. 那和CORS无关。

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

问题描述

2 个解决方案

解决方案1
1 2019-06-06 11:07:31

解决方案2
0 2019-06-06 11:34:39

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

问题描述

2 个解决方案

解决方案1 1 2019-06-06 11:07:31

解决方案2 0 2019-06-06 11:34:39

解决方案1
1 2019-06-06 11:07:31

解决方案2
0 2019-06-06 11:34:39