一尘不染

ES6模块导入,给出“未捕获的SyntaxError:意外的标识符”

html

对于个人项目,我正在尝试使用ES6
import编写更简洁的代码。作为第一个测试,我正在编写一个应生成菜单的对象。当我直接加载类时,整个代码都在工作,但是在ES6中使用导入和导出时,它在以下import行中给出了“未捕获的SyntaxError:意外的标识符”错误main.js

我有以下文件:

资产/js/menu.module.js

'use strict';

export default class Menu
{ ... }

资产/js/main.js

import Menu from "./menu.module.js";

window.addEventListener('DOMContentLoaded', () => {
    const menu = new Menu();
});

index.html

<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">

请注意,这些只是相关的代码行。

是否使用<script type="module">线路似乎对我没有任何影响。我确实同时启用了实验性和ES6模块的chrome标志,因为没有它们,我会收到关于import未定义的错误。

Chrome版本为62,因此根据不同的来源(包括Google的更新日志本身),即使没有这些标志,它也应该可以正常工作。

有人能启发我为什么这不起作用以及我在做什么错吗?


阅读 406

收藏
2020-05-10

共1个答案

一尘不染

正如@Bergi在评论中提到的,在HTML中添加type="module"main.js导入行解决了该问题。现在一切正常。即

<script type="module" src="assets/js/main.js">

感谢所有响应并尝试提供帮助的人。

2020-05-10