从Javascript类的作用域之外访问它的方法

Question

我使用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"

Answer 1

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

Answer 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>