JS模块化（二）CommonJS的应用

基本使用

• 暴露出去 module.exports = value或者是exports.xxx = value
• 引入进来 let xxx = require("./modules/xxx");

补充：因为exports是 module.exports的一个引用，也就相当于在代码中，还有

var exports = module.exports,所以他们俩是等价的，但是要注意一点，

// 可理解为 var exports = module.exports 系统自动做的
// 导出的时候 是 return module.exports

exports.foo = bar		// module.exports.foo = bar
exports = {} 			// 这里改变了exports的指向，
						// 指向了一个新的对象后，而不是module.export
exports.age = 16		// 所以在导出的时候，不会有这个age

// 也就是相当于exports如果改变了指向， 
// 那么以后添加的方法则不会暴露出去，（改变指向后，无法修改到原对象了） 

CommonJS-node(服务端)

• 首先部署出文件的结构

├─modules
│      modules1.js
│      modules2.js
│      modules3.js
│
│  app.js
│  package-lock.json
│  package.json

• modules的文件

module1.js

// 使用module.exports = value
module.exports = {
	msg:"module1",
	foo(){
		console.log("foo() " + this.msg);
	}
}


module2.js

// 使用module.exports = value
module.exports = function  () {
	console.log("foo() module2");
}


module3.js

// 使用exports.xxx = value
exports.foo = function(){
	console.log("foo() module3");
}

exports.bar = function() {
	console.log("bar() module3");
}

// 暴露一个数组出去
exports.arr = [1,2,3,4,5,2,3,1,2,4];

• app.js主配置文件 使用node app.js运行

app.js

// 提前引入第三方库
// 引入uniq
let uniq = require("uniq");

// 将其他模块汇总到主模块
let module1 = require("./modules/modules1");
let module2 = require("./modules/modules2");
let module3 = require("./modules/modules3");

module1.foo();				// foo() module1
module2();					// foo() module2

module3.foo();				// foo() module3
module3.bar();				// bar() module3

console.log(module3.arr);	// [ 1, 2, 3, 4, 5, 2, 3, 1, 2, 4 ]
let result = uniq(module3.arr);
console.log(module3.arr);	// [ 1, 2, 3, 4, 5 ]

在服务端运行的时候 语法相对简单，要注意第三方库要放在最开始的地方，因入库写名字就可以

CommonJS-Browserify(客户端)

• 首先部署出文件的结构

├─js
│  ├─dist
│  └─src
│          app.js
│          modules1.js
│          modules2.js
│          modules3.js
│
│  package-lock.json
│  package.json

• modules的文件

module1.js

// 使用module.exports = value
module.exports = {
	msg:"module1",
	foo(){
		console.log("foo() " + this.msg);
	}
}


module2.js

// 使用module.exports = value
module.exports = function  () {
	console.log("foo() module2");
}


module3.js

// 使用exports.xxx = value
exports.foo = function(){
	console.log("foo() module3");
}

exports.bar = function() {
	console.log("bar() module3");
}

// 暴露一个数组出去
exports.arr = [1,2,3,4,5,2,3,1,2,4];

• app.js文件

// 提前引入第三方库
// 引入uniq
let uniq = require("uniq");

// 将其他模块汇总到主模块
let module1 = require("./modules/modules1");
let module2 = require("./modules/modules2");
let module3 = require("./modules/modules3");

module1.foo();
module2();

module3.foo();
module3.bar();

console.log(module3.arr);
let result = uniq(module3.arr);
console.log(module3.arr);

• 打包处理js
  browserify js/src/app.js -o js/dist/bundle.js

• 在 页面引入 （运行结果与之前相同）

<script type="text/javascript" src="js/dist/bundle.js" ></script>

在客户端运行的时候，要放到dist生成环境的文件夹，要进行打包处理才能变成浏览器识别的文件