Javascript 模块化

1.无模块化时代（早期 Web）

• 所有代码写在全局作用域：

var utils = { ... };
function handleClick() { ... }

• 通过 script 标签按顺序引入多个 JS 文件
• ❌ 问题：命名冲突、依赖混乱、难以维护

2.社区规范兴起

由于语言本身没有模块机制，社区自发提出两套主流方案：

CommonJS（同步、服务端优先）

• 代表环境：Node.js
• 语法：

// 导出
exports.name = 'Vue';
module.exports = App;

// 导入
const fs = require('fs');

• 特点
  • 同步加载（因为文件在本地磁盘，I/O 快）
  • 不适用于浏览器（浏览器无法同步请求网络资源）

AMD（Asynchronous Module Definition，异步、浏览器优先）

• 代表实现：RequireJS
• 语法：

define(['jquery'], function ($) {
  return { init: function() { ... } };
})

• 特点
  • 异步加载，适合浏览器网络环境
  • 但语法繁琐（回调地狱雏形）

3.UMD —— 兼容三端

为了能让一个库同时支持：

• 浏览器全局变量
• AMD 环境（如 RequireJS）
• CommonJS 环境（如 Node.js）
  开发者发明了 UMD（Universal Module Definition） 模式，同时兼容三种场景：

//闭包  传入当前环境的this
(function (global, factory) {
    //1.先判断当前环境是否支持CommonJS规范(node.js)
    if (typeof exports == 'object' && typeof module !== 'undefined') {
        console.log('CommonJS规范')
        module.exports = factory()
    } else if (typeof define == 'function' && define.amd) {//2.再判断是否支持AMD规范(require.js)
        console.log('AMD规范')
        define(factory)
    } else {
        console.log('script标签引入')
        //接收该对象
        this.plugin = factory()
    }
}(this,function(){
    var plugin = {}
    return plugin;
}))

4.ES6 标准化：ECMAScript Modules（ESM）

• 2015 年，ES6（ES2015）正式引入 原生模块标准（ESM）
• 语法简洁、静态分析友好：

// 命名导出（可多个）
export const name = 'Vue';
// 默认导出（只能一个）
export default App;

// 导入默认（可任意命名）
import App from './App.vue';
// 导入命名（需同名，或者使用as重命名）
import { name } from './utils.js';

• 关键优势：
  • 静态结构（编译时即可分析依赖，利于 tree-shaking）
  • 原生支持（无需额外运行时）
  • 浏览器和 Node.js（较新版本）都已支持
• 注意
  • 旧浏览器不支持，所以早期仍需 Babel/Webpack 转译。

5.现代工具链的演进

阶段	工具	目标
2010s	RequireJS / Browserify	在浏览器中模拟模块化
2015–2020	Webpack / Rollup / Vue CLI	将 ESM 编译为兼容代码（降级到 ES5 + UMD/CommonJS）
2020+	Vite / Snowpack	利用浏览器原生 ESM，跳过打包（开发阶段）

6.浏览器支持

• 现在浏览器已经支持原生加载 ES6 模块，只要在 script 标签上声明 type="module" 即可，语法：

<script type="module" src="./main.js"></script>

<script type="module">
    import { add, PI } from './utils.js';
</script>

• 特性

  • 模块化支持：type="module" 让浏览器将脚本视为 ES6 模块
  • 外部引入：可以使用 src 属性引入模块文件
  • 内联编写：可以直接在 script 标签内写模块化代码
  • 严格模式：自动启用严格模式

• 注意

  • CORS 限制：跨域模块需要 CORS 头
  • 仅支持 HTTP(S)，file:// 协议下无法工作

• 兼容性

  浏览器	最低支持版本	发布时间
  Chrome	61+	2017年9月
  Edge	16+	2017年10月
  Firefox	60+	2018年5月
  Safari	10.1+	2017年3月
  iOS Safari	10.3+	2017年3月
  Android Browser / WebView	Android 7.0+（WebView ≥ 61）	约2017年后设备
  Opera	48+	2017年9月