ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

Question

对于个人项目，我正在尝试使用 ES6 导入来编写更简洁的代码。作为第一个测试，我正在编写一个应该生成菜单的对象。当我直接加载 class 时，整个代码都在工作，但是当在 ES6 中使用导入和导出时，它在 main.js 中的 import 行给出了 "Uncaught SyntaxError: Unexpected identifier" 错误=]

我有以下文件：

assets/js/menu.module.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">

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

是否使用 <script type="module"> 行对我来说似乎没有任何区别。我确实启用了实验模块和 ES6 模块的 chrome 标志，因为没有它们我收到关于 import 未定义的错误。

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

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

Answer 1

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

PS：据我所知，您还可以从导入语句中删除 .js。

Answer 2

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

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

感谢所有回复并试图提供帮助的人。

Answer 3

您可以使用任何模块捆绑器，其中一种简单灵活的解决方案是 parcel 2，它现在是测试版，但您可以使用它。

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

ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

html

javascript

ecmascript-6

es6-modules