Javascript ES6模塊無法正常工作

Question

我無法弄清楚這一點。 我有一個帶有index.html的小應用程序設置，其中包含一個javascript文件。 在與該文件相同的目錄中是另一個名為myJsModule.js的文件，其代碼如下：

export default class{

    doStuff()
    {
        console.log("calling goStuff() from external Module");
    }
}

從html加載的主要javascript文件然后以這種方式導入：

import myJsModule from "myJsModule";
// TESTING MODULES
let myNewModule = new myJsModule();
myNewModule.doStuff();

我有一個使用Node運行的本地Web服務器，所以我通過我的localhost訪問這個index.hmtl： http ： //127.0.0.1 ： 8080 。

我得到以下錯誤：Uncaught SyntaxError：意外的標識符（指我的主js文件上的myJsModule）。 我也嘗試使用babel將其轉換為以前的javascript。 我使用“require”遇到了同樣的問題。

我的本地服務器不應該想出這個嗎？ 或者我使用這個錯誤？

Answer 1

從Chrome 61開始，本機支持模塊。 我能夠讓您的示例使用以下HTML和JavaScript。

index.html的：

<!DOCTYPE html>
<html>
<head>
    <title>Native Module</title>
</head>
<body>
    <p>Hello, world!</p>
    <script type="module">
        import MyJsModule from './MyJsModule.js';
        let myJsModule = new MyJsModule();
        myJsModule.doStuff();
    </script>
</body>
</html>

MyJsModule.js：

export default class MyJsModule {

    doStuff() {
        console.log("calling doStuff() from external Module");
    }

}

Javascript ES6模塊無法正常工作

問題描述

1 個解決方案

解決方案1
3 已采納 2017-11-11 08:00:09

Javascript ES6模塊無法正常工作

問題描述

1 個解決方案

解決方案1 3 已采納 2017-11-11 08:00:09

解決方案1
3 已采納 2017-11-11 08:00:09