入门webpack( 一）关于模块化

1.为什么需要模块化

可能很多同学是通过index.html,style.css,demo.js接触进入前端开发的，但在实际项目中会复杂的多，开发者为了重复造轮子对常用的实现进行封装实现了一个库，后来的开发者为了避免重复造轮子想使用其他开发者已经造好的轮子，但是直接引用他人的库可能会造成变量污染和冲突。
一种解决方式是命名空间。

var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function() {...}

采用命名空间可以避免变量冲突污染等问题，但缺点是在使用起来不方便，需要记住如上图所示的链式关系。但javascript本身缺少模块化的概念。为了弥补这个缺点，众多规范由此产生。

2 . 关于规范
CommonJS

JavaScript is a powerful object oriented language with some of the fastest dynamic language interpreters around. The official JavaScript specification defines APIs for some objects that are useful for building browser-based applications. However, the spec does not define a standard library that is useful for building a broader range of applications.

The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java. The intention is that an application developer will be able to write an application using the CommonJS APIs and then run that application across different JavaScript interpreters and host environments. With CommonJS-compliant systems, you can use JavaScript to write:

Server-side JavaScript applications
Command line tools
Desktop GUI-based applications
Hybrid applications (Titanium, Adobe AIR)

上图是官网对于CommonJS的介绍。可以看到Javascript官方规范只定义了一些构建基于浏览器程序的对象API,但规范并没有定义一个标准库，而这个库对于构建更广泛的应用程序是有效的。

CommonJS API将通过定义处理许多常见应用程序需求的API来填补这一空白，最终提供一个与Python、Ruby和Java一样丰富的标准库。而开发者利用这个库能做什么呢?

• 服务端JS应用
• 命令行工具
• 桌面应用
• 混合应用

可以看到CommonJS旨在定义一个标准，开发人员通过遵守这个标准可以使JS实现更多的东西。

CommonJS主要针对服务端，nodeJS是基于CommonJS标准实现的。两者之间相互印证，共同发展。

CommonJS有以下特点，一个文件为一个模块，通过module.exports对外暴露接口，通过require实现模块相互引用。各个模块之间相互独立，通过暴露的接口可以实现模块相互访问。

AMD（Async Module Definition）规范
参考1：AMD
参考2：前端模块化的发展史
特点

• 使用define定义模块
• 使用require加载模块
• 依赖前置，提前执行
• requireJS

CMD(Common Module Definition)
官网：CMD

特点

• 一个文件定义一个模块

• 使用define定义模块

• 使用require加载模块

• 尽可能懒执行

UMD（Universal Module Definition）
UMD规范旨在提供一种通用解决方案，是否支持AMD,不支持判断是否支持CommonJS？不支持则采用全局变量的方式。

ES6 Modules

特点：

• 一个文件为一个模块

• export 提供对外接口

• import 导入其他模块

总结：为了应对各种需求，模块发开发成为必不可少的，在模块化开发演变的历史中，衍生了各种规范，每种规范都有其标志性的产品。

• CommonJS 服务端 同步执行 NodeJS
• AMD 浏览器端 依赖前置，提前执行 require.JS
• CMD 浏览器端 懒执行 sea.JS