javascript - 导入在Chrome中不起作用

我正在使用 Vanilla JavaScript创建单页应用程序。我想将代码组织在不同的文件中以使其模块化，这意味着我应该能够访问另一个文件中一个文件中定义的功能。我为此使用ES6本机import export:

文件1.js:

export function func1() {}
export function func2() {}

文件2.js:

import { func1, func2 } from './file-1';

index.html:

<script src="file-1.js"></script>

当我在Chrome(版本65)中运行index.html时，出现以下错误:Uncaught SyntaxError: Unexpected token {。

我的代码有什么问题？ Chrome 65完全支持ES6模块系统。

最佳答案

这是一个有效的例子
file1.mjs

function log1() {
  console.log('log1');
}
function log2() {
  console.log('log2');
}
export { log1, log2 };

file2.mjs 您必须显式编写.mjs扩展名

import { log1, log2 } from './file1.mjs';

log1();
log2();

index.html 通知属性 type =“module”

<body>
    <script type="module" src="file2.mjs"></script>
</body>

然后，您需要一个静态服务器来摆脱CORS块。

$ yarn global add serve
$ serve ./