在浏览器中，未执行从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