从其范围之外访问 Javascript 类的方法答案

【问题标题】：Accessing a Javascript class's method from outside its scope从其范围之外访问 Javascript 类的方法
【发布时间】：2021-12-04 15:48:40
【问题描述】：

我正在使用 webpack-4 捆绑一个 JS 类，但我无法从其范围之外访问它的任何方法和属性。我遵循了这里给出的一些建议，但我仍然卡住了。下面你会看到我需要实现的简化版本。任何有关如何使其工作的建议将不胜感激。谢谢！

My webpack.config:

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../../assets/js'), 
        library: 'MyModule',
        libraryTarget: 'var',
    },

The class file, Main.js:

export  class  Main{
  prop1 = 'This is Main.prop1';

  static hello = ()=>{
    console.log('Hello from Main');
  }

  static hi = function(){
    console.log('Hi from Main');
  }
}

Inside test.html:

<script src="./Main.js"></script>
<script>
window.onload = function(){
        var mainUX = MyModule;
        console.log(mainUX); // see output below**
        console.log(mainUX.prop1) // outputs 'undefined'
        mainUX.hello(); // Outputs Uncaught TypeError: mainUX.hello is not a function
        mainUX.hi();
       };
</script>

** In the console I get:

Object { Main: Getter, … }
Main: 
__esModule: true
Symbol(Symbol.toStringTag): "Module"
<get Main()>: function js()
<prototype>: Object { … }
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
__proto__: 
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toString: function toString()
valueOf: function valueOf()
length: 0
name: "valueOf"

【问题讨论】：

标签： javascript class module scope webpack-4

【解决方案1】：

你应该在最后一个脚本标签中使用import Main from './main.js' 而不是<script src="./Main.js"></script>

【讨论】：

感谢您的反馈。但是如果我这样做，我会得到这个Uncaught SyntaxError: import declarations may only appear at top level of a module ... 这是有道理的，我页面中的脚本本身并不是一个模块。我错过了什么吗？
天哪，对不起，我忘了，把你的脚本标签改成<script type="module"> ... </script>
非常感谢...但这也不起作用；（我在网上找到了答案，幸运的是偶然发现了一篇文章，解决了我的问题。我将其添加到解决方案和下面资源的链接，以便它可以帮助其他人。

【解决方案2】：

在一整天试图找到我的问题的答案后，我遇到了这个article。它非常彻底，易于理解，我的问题立即得到解决。下面我附上更正的代码，以防有人发现它有用。

我不得不更改webpack.config 文件，并将default 添加到类导出中。

webpack.config:

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../../assets/js'), 
        library: '',
        libraryExport: '',
        libraryTarget: 'umd',
        globalObject: 'this',
    },

The class file, Main.js:

export default class Main{

  prop1 = 'This is Main.prop1';

  hello = ()=>{
    console.log('Hello from inside MainUX');
  }

  hi = function(){
    console.log('Hi from Main');
  }
}

Inside test.html:

// in the head:
<script src="./Main.js"></script>

// elsewhere in the html document
<script>
    const Main = window.default;
    const mainUX = new Main();
    console.log(Main)
    mainUX.hi();
</script>

【讨论】：