前端进阶课程之模块化（一）CommonJS规范

一：CommonJS规范的应用场景

node模块化采用CommonJS规范，而webpack也是基于node去搭建的，所以webpack内部也是采用commonjs规范

二：node中CommonJS规范的基本应用

// index.js
console.log(module);

// 输出
{
    id: '/Users/x/Documents/code/demo/index.js',
    exports: {},
    parent: { module }, // 调用该模块的模块，可以根据该属性查找调用链
    filename: '/Users/x/Documents/code/demo/index.js',
    loaded: false,
    children: [...],
    paths: [...]
}

说明：
1: 在node环境下，每个js文件都会有一个module对象
2: 模块输出采用module.exports,  模块引入采用require()

注意：
上面的结果只是在node环境下，每个js文件都会有一个module对象，但是在浏览器环境是没有的，需要我们手动去配置。

复制代码

三： node中CommonJS代码实例

基本定义：

1: 模块输出：
//index.js
module.exports = {
    a: 10
}

2: 模块引入
var obj = require('./index.js'); // {a: 10}
复制代码

注意：exports与module.exports的区别：

exports 指向module.exports所指向的对象。只有真正module.exports所引用的对象才会被真正导出，才可以用require去引入

举例来说明：
var obj = {
    a: 10
};
var obj2 = obj;
console.log(obj2,a); //此时可以输出10，
obj2 = {
    a: 20
}

//此时重新给obj2赋值了一个新对象，那么原来obj2与obj1对象关系就切断了。

这里的obj2就相当于exports，obj就相当于module.exports,
所以我们在直接使用exports输出的时候，必须这样使用：
exports.a = 10; 
这样在使用require引入的时候才可以获取到结果，
如果是直接：
exports = {
    a: 10
}
这个时候，在使用require引入的时候，结果为一个空对象{}，因为此时module.exports结果为{}, exports直接赋值一个对象，相当于切断了与module.exports的指向，不管赋给什么值，module.exports依然没变，所以require引入的值也没有变化。

复制代码