javascript - ES6模块导入给出 "Uncaught SyntaxError: Unexpected identifier"

标签 javascript html ecmascript-6 es6-modules

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

我有以下文件:

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,因此根据不同的来源(包括谷歌的更新日志本身)这应该可以工作,即使没有标志。

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

最佳答案

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

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

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

关于javascript - ES6模块导入给出 "Uncaught SyntaxError: Unexpected identifier",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47632562/

相关文章:

javascript - 渲染内的三元运算符行为不正确 -react

javascript - 链式 promise - 返回的 promise 解析不会导致调用 then 方法

javascript - 在 Jasmine 中测试回调方法的功能

javascript - 谷歌地图/gmap3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助

javascript - 如何通过 PHP 添加 Google Analytics 事件?

javascript - 获取对象数组的数组而不是对象数组

javascript - 如何根据类别和值检查复选框?

javascript - 如何让 Google Drive API 示例在 Phonegap 应用程序中运行(支持 Android)?

html - 网页依赖解析树可视化

html - 如何覆盖 Bootstrap 字体?