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 个答案: