模块打包之CommonJS与ES6模块比较初探

Time: 20190920

模块是具有特定功能的组成单元，不同模块负责不同的工作，然后会以某种方式联系到一起，形成完整的程序逻辑。

CommonJS

CommonJS是2009年社区提出的，包含模块、文件、IO和控制台在内的一系列标准。

Node.js采用的是CommonJS标准的一部分，并在此基础上做了一些变化。

CommonJS标准，最初是为服务端设计，而有了Browserify后，可以将CommonJS模块打包为在浏览器下可以运行的单个文件。

导致的结果是：客户端的代码可以按照CommonJS标准来写。

Browserify是运行在Node.js环境下的模块打包工具。

此外，借助于包管理工具，前端开发开始流行用CommonJS标准了。

模块的定义

CommonJS中，每个文件是一个模块。

通过script标签引入和封装成CommonJS模块的区别是什么？

前者：顶层作用域是全局作用域，变量声明和函数声明时会污染全局环境。
后者：形成属于模块自身的作用域，变量和函数仅自己可访问，外部不可见。

导出

导出是模块向外暴露自身的唯一方式。

CommonJS标准中，导出模块的语法是：

module.exports = {}

比如：

module.exports = {
   
	name: 'calculator', 
	add: function(a, b) {
   
		return a + b;
	}
}

这个module关键字从哪里来呢？可以理解为，CommonJS模块内部会存一个module对象用于存储当前模块的信息。

module.exports用于指定模块对外暴露的内容，上面的代码导出了两个属性。

CommonJS也支持一种简单的导出语法：

exports.name = 'calculater';
exports.add = function(a, b) {
   
	return a + b;
}

可用下面的代码来理解：

var module = {
   
	exports: {
   },
}

var exports = module.exports;

因此，一个是赋值语法，一个是添加属性的方式，不可以直接对exports赋值，这会导致失效，即和module这个对象失去了关联。

混用情况辨析

exports.add