导入无法在Chrome中运行

Question

我正在使用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模块系统.

Answer 1

这是一个有效的例子

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

最后去http://localhost:5000,它会工作