前端進階課程之模組化（一）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引入的值也沒有變化。

複製程式碼