导入在Chrome中不起作用

黑夜

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

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

终于去了http://localhost:5000,它将起作用

更新:建议.mjs对模块使用文件扩展名而不是.js

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档