前端模块化暴露方式

### 前端模块化学习笔记

#### 一、前端模块化概述
模块化是指将代码分解为多个独立的模块，每个模块只关注一部分功能，通过模块之间的依赖来构建应用。模块化的好处是：
- **可维护性**：使代码更加清晰、结构化，便于维护和管理。
- **重用性**：模块可以在多个项目中重复使用。
- **隔离性**：每个模块内部实现相互独立，减少命名冲突等问题。

前端常用的模块化规范有两大类：ESM（ECMAScript Modules）和 CommonJS，此外还有 UMD 这种混合模式。

---

#### 二、ESM（ECMAScript Modules）

##### 1. 默认导出（Default Export）
- **语法**：`export default` 用于暴露一个模块的主要功能，导入时可以使用任意名称。
- **导出**：
```javascript
export default function() {
console.log("Default Export");
}
```
- **导入**：
```javascript
import anyName from './module.js';
anyName(); // 调用默认导出的函数
```

##### 2. 命名导出（Named Export）
- **语法**：`export` 用于导出多个变量或函数，导入时需使用对应名称。
- **导出**：
```javascript
export const name = 'Alice';
export function greet() {
console.log("Hello, " + name);
}
```
- **导入**：
```javascript
import { name, greet } from './module.js';
greet(); // 输出 Hello, Alice
```

##### 3. 重命名导出和导入
- 可以通过 `as` 关键字对导入和导出进行重命名。
- **导入重命名**：
```javascript
import { name as newName, greet as sayHello } from './module.js';
```

##### 4. 组合导出和导入
- 可以同时使用默认导出和命名导出。
- **导出**：
```javascript
export default function() {
console.log("Default Export");
}
export const name = 'Alice';
```
- **导入**：
```javascript
import defaultFunc, { name } from './module.js';
```

##### 5. 导出全部
- 可以使用 `export *` 将整个模块暴露出去。
- **导出**：
```javascript
export * from './anotherModule.js';
```

- **导入**：
```javascript
import * as Module from './module.js';
Module.someFunction();
```

---

#### 三、CommonJS 模块

##### 1. 默认导出（module.exports）
- **语法**：`module.exports` 用于暴露整个模块，导入时通过 `require` 引入。
- **导出**：
```javascript
module.exports = function() {
console.log("Default Export in CommonJS");
};
```
- **导入**：
```javascript
const func = require('./module.js');
func(); // 调用导出的函数
```

##### 2. 命名导出
- **语法**：通过 `module.exports` 或 `exports` 导出多个内容。
- **导出**：
```javascript
module.exports.name = 'Alice';
module.exports.greet = function() {
console.log("Hello, " + this.name);
};
```
- **导入**：
```javascript
const { name, greet } = require('./module.js');
greet(); // 输出 Hello, Alice
```

---

#### 四、UMD（Universal Module Definition）

UMD 是一种兼容多种模块系统（AMD、CommonJS、浏览器全局变量）的模式，常用于库开发。

- **暴露方式**：
```javascript
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory); // AMD
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(); // CommonJS
} else {
root.myLibrary = factory(); // 浏览器全局变量
}
}(this, function () {
return {
greet: function() {
console.log("Hello from UMD!");
}
};
}));
```
- **导入方式**：
- 浏览器全局：`myLibrary.greet();`
- Node.js：`const myLibrary = require('./mylibrary.js');`

---

#### 五、浏览器全局变量暴露

- **语法**：直接通过 `window` 对象在浏览器中暴露全局变量。
- **暴露**：
```javascript
window.myLibrary = {
greet: function() {
console.log("Hello from the global object");
}
};
```

- **使用**：直接在浏览器控制台或代码中使用 `myLibrary.greet()`。

---

#### 六、总结

- **ESM 模块化**：现代 JavaScript 标准，使用 `import` 和 `export`，主要用于浏览器和现代 JavaScript 环境。
- **CommonJS 模块化**：Node.js 环境下使用的模块化规范，使用 `require` 和 `module.exports`。
- **UMD 模块化**：兼容性强，适用于库的开发，可同时在浏览器、Node.js 环境中运行。
- **浏览器全局变量**：用于简单项目中，不使用任何模块化规范，通过 `window` 等全局对象暴露功能。

---

#### 七、深入学习建议

1. **理解场景需求**：根据不同的应用场景，选择合适的模块化方式。如项目中使用打包工具（如 Webpack、Vite）时推荐 ESM，Node.js 环境中推荐 CommonJS。
2. **实际项目应用**：尝试在项目中实践这些模块化规范，并结合打包工具、模块热替换等功能。
3. **查阅官方文档**：对于 ESM，可以参考 [MDN ECMAScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)；对于 CommonJS，可以参考 Node.js 官方文档。

通过实际练习和项目应用，逐步熟练掌握这些模块化的知识和使用技巧。