Question

对于个人项目，我正在尝试使用ES6导入来编写更清晰的代码。作为第一次测试，我正在编写一个应该生成菜单的对象。当我直接加载类时，整个代码正在工作，但是当在ES6中使用导入和导出时，它在import的{{1}}行上给出了“未捕获的SyntaxError：意外的标识符”错误

我有以下文件：

资产/ JS / menu.module.js

main.js

资产/ JS / main.js

'use strict';

export default class Menu
{ ... }

的index.html

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

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

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

使用<script type="module" src="assets/js/menu.module.js"></script> <script src="assets/js/main.js">行似乎对我没有任何影响。我确实启用了实验和ES6模块的chrome标志，因为没有它们我收到了关于<script type="module">没有被定义的错误。

Chrome版本为62，因此根据不同的来源（包括Google的更新日志本身），这应该可以正常工作，即使没有标记。

任何人都可以告诉我为什么这不起作用，以及我做错了什么？

Answer 1

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

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

Answer 2

我可以看到您尝试加载文件menu.module.js，而实际上名为menu.js。

PS：从我记得你也可以从导入语句中删除.js。

Answer 3

您可以使用任何模块捆绑器，parcel 2是一种简单而灵活的解决方案，目前是beta版，但您可以使用它。

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

ES6模块导入给出“Uncaught SyntaxError：Unexpected identifier”

3 个答案: