Webpack 4如何暴露变量至全局上下文？ES6类库全局挂载疑问

首先直接给结论：同时使用window.MyLib = MyLib和module.exports = MyLib是可行且正确的，这是让类库同时适配「无打包工具的全局使用」和「模块化开发场景」的常见手段。

为什么这个方案能满足你的需求？ #

• 无打包工具的简单HTML场景：当用户直接在HTML里通过<script>标签引入转译后的类库文件时，window.MyLib = MyLib会把你的类挂载到浏览器的全局window对象上，用户不需要任何导入操作，直接就能用new MyLib('你的名字')调用，完全符合你的需求。
• 模块化开发场景：如果用户用Webpack、Browserify这类打包工具，module.exports = MyLib允许他们通过require('你的类库名')或者ES6的import语法来导入使用，不会破坏模块化的开发流程。

可以优化的小细节 #

为了让你的类库更健壮，建议加个环境判断，避免在非浏览器环境（比如Node.js）中给window赋值导致报错：

class MyLib {
  constructor(name) { this.name = name; }
  sayHello() { return `Hello ${this.name}`; }
}

// 仅在浏览器环境挂载全局变量
if (typeof window !== 'undefined') {
  window.MyLib = MyLib;
}

module.exports = MyLib;

另外，如果你的类库需要适配更多模块规范（比如AMD），可以考虑使用**UMD（通用模块定义）**模式，它能同时支持AMD、CommonJS和全局变量，但如果你的需求只是覆盖「全局使用」和「CommonJS」，当前的写法已经足够简洁实用了。

两种场景的使用示例 #

1. 简单HTML场景：

<!-- 引入转译后的类库 -->
<script src="dist/mylib.js"></script>
<script>
  // 直接全局使用
  const myLibInstance = new MyLib('Llanfair');
  console.log(myLibInstance.sayHello()); // 输出 "Hello Llanfair"
</script>

2. Webpack/Browserify场景：

const MyLib = require('mylib');
// 或者 import MyLib from 'mylib';

const myLibInstance = new MyLib('Developer');
console.log(myLibInstance.sayHello()); // 输出 "Hello Developer"

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