在瀏覽器中，未執行從ES6模塊導入的JS代碼

Question

我有一個ES6模塊（mymodule）和HTML頁面，該頁面具有當用戶打開頁面時必須執行的JS代碼。 這是我的模塊：

//mymodule.js
class TestClass {

    getString() {
        return "TestString";
    }
}
export {TestClass}

這是我的頁面：

//page.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Page</title>
        <script src="./mymodule.js" type="module"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script type="module">
            import {TestClass} from "./mymodule";
            let test = new TestClass();                 
            console.log("OUTPUT: " + test.getString());
        </script>
    </body>
</html>

Page.html和mymodule.js位於同一文件夾中，但是，當我在瀏覽器中打開page.html時，控制台上沒有任何內容（無錯誤，無輸出）-我使用FF 62.0.3。 如何解決？

Answer 1

  <script src="./mymodule.js" type="module"></script>

以上是不需要的。 您可以刪除它。

 import {TestClass} from "./mymodule";

瀏覽器不像Node.js那樣執行文件擴展名解析。 （它們不能，因為它們處理URL而不是文件系統，因此無法獲取目錄中的文件列表）。

您需要使用以下網址明確顯示：

import {TestClass} from "./mymodule.js";

注意：您還需要通過HTTP而不是從本地文件系統加載page.html 。

Answer 2

您可以將您的課程導出為默認關鍵字。

class TestClass {
    getString() {
        return "TestString";
    }
}
export default {TestClass}

在瀏覽器中，未執行從ES6模塊導入的JS代碼

問題描述

2 個解決方案

解決方案1
3 已采納 2018-10-23 12:34:59

解決方案2
0 2018-10-23 12:24:49

在瀏覽器中，未執行從ES6模塊導入的JS代碼

問題描述

2 個解決方案

解決方案1 3 已采納 2018-10-23 12:34:59

解決方案2 0 2018-10-23 12:24:49

解決方案1
3 已采納 2018-10-23 12:34:59

解決方案2
0 2018-10-23 12:24:49