ES6 模块导入给出“未捕获的语法错误：意外的标识符”答案

【问题标题】：ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"ES6 模块导入给出“未捕获的语法错误：意外的标识符”
【发布时间】：2020-06-20 02:28:48
【问题描述】：

对于个人项目，我正在尝试使用 ES6 导入来编写更简洁的代码。作为第一个测试，我正在编写一个应该生成菜单的对象。当我直接加载类时，整个代码都在工作，但是在 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，因此根据不同的来源（包括谷歌的更新日志本身），即使没有标志，这也应该可以工作。

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

【问题讨论】：

有关联的行号吗？错误在哪个文件中？
@BoyWithSilverWings 忘记添加了，现在才添加。它位于main.js 中的import 行
不应该main.js 也需要type="module" 吗？毕竟，它使用模块语法。
您的 window.addEventListener( 调用缺少右括号
如果您不使用 HTML 怎么办？

标签： javascript html ecmascript-6 es6-modules

【解决方案1】：

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

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

【讨论】：

我也有类似的情况，但是我用php注入脚本。我只使用香草 javascript，我需要将“.js”扩展名放在我的导入上才能正常工作。我知道 React 不需要 .js 扩展名，但我猜这会根据你工作的环境而有所不同。希望这对其他人有帮助。

【解决方案2】：

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

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

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

【讨论】：

在之前的评论中你说添加分号修复了它。现在你是说添加类型来修复它。
@TomRussell 哪条评论？因为我找不到它。我的问题在于type="module"。
在哪里？哪个评论？解决办法是什么？
@bernard @Pithikos 您还必须将type='module' 添加到主脚本中。这正是您留下评论所描述的答案。这个：stackoverflow.com/a/47633417/4327948
在文件中哪里可以添加type="module"？

【解决方案3】：

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

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

【讨论】：