使用webpack4打包JS类后无法从作用域外访问类方法和属性的咨询

从控制台输出可以看到，webpack打包后暴露到全局的MyModule是标准ES模块对象，你导出的Main类是该对象下的一个属性，而非MyModule本身就是Main类，同时你代码里还存在静态属性/实例属性调用混淆的问题。

方案1：直接调整调用代码（无需改打包配置和类代码，最快修复） #

修改test.html里的调用逻辑即可：

<script src="./Main.js"></script>
<script>
window.onload = function(){
  // 先从模块对象里拿到Main类
  const Main = MyModule.Main;
  // 静态方法直接通过类调用
  Main.hello();
  Main.hi();
  // 实例属性需要先实例化类再访问
  const mainInstance = new Main();
  console.log(mainInstance.prop1); // 输出 This is Main.prop1
};
</script>

方案2：调整webpack配置，让全局暴露的对象直接是Main类（调用时不需要多取一层.Main） #

修改webpack.config的output配置，增加libraryExport指定导出的模块内容：

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../../assets/js'), 
  library: 'MyModule',
  libraryTarget: 'var',
  // 新增配置，指定直接导出模块里的Main属性
  libraryExport: 'Main'
},

调整后test.html里的代码可以直接调用MyModule作为类：

window.onload = function(){
  MyModule.hello();
  MyModule.hi();
  const mainInstance = new MyModule();
  console.log(mainInstance.prop1);
};

方案3：调整类的导出方式为默认导出 #

如果你习惯用默认导出，把Main.js的导出改成：

export default class Main{
  prop1 = 'This is Main.prop1';
  static hello = ()=>{
    console.log('Hello from Main');
  }
  static hi = function(){
    console.log('Hi from Main');
  }
}

然后webpack配置里的libraryExport改成'default'即可，调用逻辑和方案2一致。

内容的提问来源于stack exchange，提问作者Mauricio