Javascript 导入在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49718855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
import not working in Chrome
提问by maverick
I am creating an single page app in vanilla JavaScript. I want to organize my code in different files to make it modular, which means I should be able to access functions defined in one file in another file. I am using ES6 native importexportfor this:
我正在用 vanilla JavaScript 创建一个单页应用程序。我想在不同的文件中组织我的代码以使其模块化，这意味着我应该能够访问另一个文件中一个文件中定义的函数。我importexport为此使用 ES6 本机：
file-1.js:
文件 1.js：
export function func1() {}
export function func2() {}
file-2.js:
文件 2.js：
import { func1, func2 } from './file-1';
index.html:
索引.html：
<script src="file-1.js"></script>
When I run index.html in Chrome (version 65), I get the following error:
Uncaught SyntaxError: Unexpected token {.
当我在Chrome（65版）的index.html跑，我得到以下错误：
Uncaught SyntaxError: Unexpected token {。
What's wrong in my code? Chrome 65 fully supports ES6 module system.
我的代码有什么问题？Chrome 65 完全支持 ES6 模块系统。
回答by Cuong Vu
Here is a working example
这是一个工作示例
file1.mjs
文件1.mjs
function log1() {
console.log('log1');
}
function log2() {
console.log('log2');
}
export { log1, log2 };
file2.mjsyou must explicitly write .mjsextension
file2.mjs你必须明确地写.mjs扩展
import { log1, log2 } from './file1.mjs';
log1();
log2();
index.htmlNotice attribute type="module"
index.html注意属性type="module"
<body>
<script type="module" src="file2.mjs"></script>
</body>
Then you need a static server to get rid of CORS block.
然后你需要一个静态服务器来摆脱 CORS 块。
$ yarn global add serve
$ serve ./
Finally go to http://localhost:5000and it will work
最后去http://localhost:5000，它会工作
Update: It is recommended to use .mjsfile extension for modules instead of .js
回答by croraf
Chrome (v70) has some kind of issues when working with importsyntax on the local files served using fileprotocol. It is probably CORS blocking that can happen using fileprotocol according to some articles. But Chrome also does not show CORS warning in the console in this case - which is strange. Therefore some kind of HTTP server is needed so the files are served via HTTP protocol (as Vu showed in his answer). Firefox v63 (probably >v60) doesn't have these issues and you can compose htmlwith jsmodules using file://protocol without a special server.
Chrome (v70) 在处理import使用file协议提供的本地文件的语法时存在一些问题。file根据一些文章，使用协议可能会发生 CORS 阻塞。但是在这种情况下，Chrome 也不会在控制台中显示 CORS 警告 - 这很奇怪。因此需要某种 HTTP 服务器，以便通过 HTTP 协议提供文件（如 Vu 在他的回答中所示）。火狐V63（大概> V60）没有这些问题，你可以撰写html与js使用模块的file://协议不需要特殊的服务器。
Also make sure to:
还要确保：
use file type extensions when importing (
import { func1, func2 } from './file-B.js';).use
type="module"in htmlscriptelement (<script type="module" src="file-A.js"></script>)
导入时使用文件类型扩展名 (
import { func1, func2 } from './file-B.js';)。type="module"在 htmlscript元素中使用(<script type="module" src="file-A.js"></script>)
