Javascript 本地主机未加载模块_Javascript_Module

Javascript 本地主机未加载模块

javascript module

Javascript 本地主机未加载模块,javascript,module,Javascript,Module,我正在使用现代JavascriptMyClass.js export default class MyClass { constructor(x) { this.val=x? x: "Hello!" console.log("MyClass:",x) } } 在我的http://localhost/myfolder/mypage.htm，其来源如下： <!DOCTYPE html> <html> <head> <titl

我正在使用现代Javascript

MyClass.js

export default class MyClass {
  constructor(x) {
    this.val=x? x: "Hello!"
    console.log("MyClass:",x)
  }
}

在我的

http://localhost/myfolder/mypage.htm

，其来源如下：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
    <script type="module" src="./MyClass.js"></script>

    <script>
    'use strict';

    document.addEventListener('DOMContentLoaded', function(){

    alert(123)
    let x = new MyClass(11);

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>


测试
"严格使用",；
document.addEventListener（'DOMContentLoaded'，function（）{
警报（123）
设x=新的MyClass（11）；
}，假）//装载
你好

为什么控制台会说“未捕获引用错误：未定义MyClass”

附：这个问题是对你的补充

注意：使用UBUNTU和Apache的本地主机。。。

myfolder

指向真实文件夹的符号链接有问题吗？在

/var/www/html

中，我使用了

ln-s/home/user/myRealFolder/site myfolder

在使用之前，您需要导入模块

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <script type="module" src="./MyClass.js"></script>
    <script type="module" id="m1">
      // script module is an "island", not need onload.
      'use strict';
      import MyClass from './MyClass.js';
      let x = new MyClass(11);     // we can use here...
      console.log("debug m1:", x)  // working fine!

      window.MyClassRef = MyClass; // "globalizing" class
      window.xRef = x              // "globalizing" instance
    </script>
    <script> // NON-module global script
    document.addEventListener('DOMContentLoaded',function(){
       // only works after all modules loaded:
       console.log("debug:", window.xRef) // working fine!
       let x = new window.MyClassRef(22); // using class also here,
       console.log("debug:", x)           // working fine!

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

请参阅。

在使用该模块之前，您需要导入该模块

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <script type="module" src="./MyClass.js"></script>
    <script type="module" id="m1">
      // script module is an "island", not need onload.
      'use strict';
      import MyClass from './MyClass.js';
      let x = new MyClass(11);     // we can use here...
      console.log("debug m1:", x)  // working fine!

      window.MyClassRef = MyClass; // "globalizing" class
      window.xRef = x              // "globalizing" instance
    </script>
    <script> // NON-module global script
    document.addEventListener('DOMContentLoaded',function(){
       // only works after all modules loaded:
       console.log("debug:", window.xRef) // working fine!
       let x = new window.MyClassRef(22); // using class also here,
       console.log("debug:", x)           // working fine!

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

请参阅。

因为您没有导入iThanks@MaheerAli，所以您导入了

MyClass

，似乎是解决方案。。。导入MyClass的语法是什么？没有办法在HTML标签上这样说吗？在这里你导入

MyClass

，因为你没有导入itThanks@MaheerAli，似乎是解决方案。。。导入MyClass的语法是什么？没有办法在HTML标签上说吗？谢谢，正在工作！嗯，需要从“/MyClass.js”导入MyClass，

和

从“/MyClass.js”

导入MyClass。。。似乎非常多余，没有HTML来表示

import=“MyClass”

？。。。避免冗余的一个奇特的替代方法是使用动态导入语法谢谢，正在工作！嗯，需要从“/MyClass.js”导入MyClass，

和

从“/MyClass.js”

导入MyClass。。。似乎非常多余，没有HTML来表示

import=“MyClass”

？。。。避免冗余的另一种方法是使用动态导入语法