ES6模块导入，给出"未捕获的语法错误：意外标识符"

Question

对于个人项目，我试图使用ES6导入来编写更干净的代码。作为第一个测试，我正在编写一个应该生成菜单的对象。当我直接加载类时，整个代码都在工作，但是当在ES6中使用导入和导出时，它在main.js中的导入行上给出了一个“未捕获的同步错误：意外标识符”错误

我有以下文件：

assets/js/menu。单元js

'use strict';

export default class Menu
{ ... }

assets/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">

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

使用

Chrome版本将是62，所以根据不同的来源（包括谷歌的更新日志本身），即使没有标志，这也应该是可行的。

有谁能告诉我为什么这不起作用，我做错了什么？




Answer 1

您可以使用任何模块绑定器，其中一个简单灵活的解决方案是packet2，它现在是beta版，但您可以使用它。

 - npm i -D parcel@next
 - parcel index.html

Answer 2

据我所知，您正在尝试加载文件menu.module.js，而它实际上被命名为menu.js。

PS：据我所知，您也可以删除。js来自import语句。

Answer 3

正如@Bergi在评论中提到的，将type=“module”添加到main。jsHTML中的导入行解决了这个问题。现在一切都好了。即。

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

感谢所有做出回应并试图提供帮助的人。