模块化开发

一、模块化概念

模块化 只是一个思想
内容概要：

• 模块化演变过程
• 模块化规范
• 常用的模块化打包工具
• 基于模块化工具构建现代 Web 应用
• 打包工具的优化技巧

二、模块化演变过程

• Stage 1 - 文件划分发生
  基于文件的划分模块的方式
  问题：

  • 污染全局作用域
  • 命名冲突问题
  • 无法管理模块依赖关系
    这种早期模块化完全依靠约定

• Stage 2 - 命名空间方式（所有模块成员都挂载在这个对象下面）
  每个模块只暴露一个全局对象，所有模块成员都挂载到这个对象中
  问题：

  • 模块成员在外部仍然可以被访问被修改
  • 模块之间的依赖关系也没有得到解决

• Stage 3 - IIFE(使用立即执行函数的方式提供私有空间)
  使用立即执行函数表达式（IIFE: Immediately-Invoked Function Expression）为模块提供私有空间

以上这三种是早期在没有工具和规范的情况下 对模块化的落地方式

三、模块化规范的出现

上面三个阶段都是通过script 标签手动引入每个用到的模块，这也意味着模块的加载不受代码的控制，一旦时间久后维护起来就很困难，例如：代码中依赖于一个模块在HTML中忘记引用这个模块会有问题，在代码中移除了某个模块的引用，忘记在HTML中移除也会有问题
所以需要一些基础代码自动帮忙加载一些代码，就是说需要的是
模块化标准 + 模块化加载器
模块化规范： CommonJS 规范
CommonJS 规范：

• 一个文件就是一个模块
• 每个模块都有单独的作用域
• 通过 module.exports 导出成员
• 通过 require 函数载入模块

CommonJS 是以同步模式加载模块

结合浏览器重新设计了一套规范：
AMD(Asynchronous Module Definition)
推出了 Require.js
一个 define 函数
还有 require 函数

目前绝大多数第三方库都支持 AMD 规范

• AMD 使用起来相对复杂
• 模块 JS 文件请求频繁

同期 还有淘宝推出的
Sea.js + CMD

四、模块化标准规范

浏览器 用 ES Modules , nodejs 用 CommonJS

CommonJS in nodejs 没有问题
ES Modules in Browers：
ES 是 ECMAScript 2015 (ES6) , 会存在兼容问题

五、ES Modules 特性

1、语法特性

通过给 script 添加 type = module 的属性，就可以以 ES Module 的标准执行其中的 JS 代码了

<script type="module">
		console.log('this is es module')	// this is es module
	</script>

1、 ESM 自动采用严格模式，忽略 ‘use strict’

<script type="module">
		console.log(this)	// undefined
	</script>

2、 每个 ES Module 都是运行在私有作用域中

<script type="module">
		var foo  = 100
		console.log(foo)	// 100
	</script>
	<script type="module">
		console.log(