ES6 模塊導入給出“Uncaught SyntaxError: Unexpected identifier”

Question

對於個人項目，我嘗試使用 ES6 導入來編寫更清晰的代碼。 作為第一個測試，我正在編寫一個應該生成菜單的對象。 當我直接加載類時，整個代碼都在工作，但是在 ES6 中使用導入和導出時，它在main.js的import行上給出了“Uncaught SyntaxError: Unexpected identifier”錯誤

我有以下文件：

資產/js/menu.module.js

'use strict';

export default class Menu
{ ... }

資產/js/main.js

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

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

索引.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，因此根據不同的來源（包括谷歌的更新日志本身），即使沒有標志，這也應該可以工作。

任何人都可以啟發我為什么這不起作用，以及我做錯了什么？

Answer 1

正如@Bergi 在評論中提到的，在 HTML 的main.js導入行中添加type="module"解決了這個問題。 現在一切正常。 IE

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

感謝所有做出回應並試圖提供幫助的人。

Answer 2

從我所看到的，你正在嘗試加載文件menu.module.js而它實際上被命名為menu.js 。

PS：據我所知，您還可以從 import 語句中刪除.js 。

Answer 3

您可以使用任何模塊打包器，其中一種簡單靈活的解決方案是parcel 2 ，它現在是測試版，但您可以使用它。

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