## 一、概述 module.exports屬性表示當前模塊對外輸出的接口，其他文件加載該模塊，實際上就是讀取module.exports變量。 node為每一個模塊提供了一個exports變量(可以說是一個對象)，指向 module.exports。這相當于每個模塊中都有一句這樣的命令 var exports = module.exports; 這樣，在對外輸出時，可以在這個變量上添加方法。例如? ``` exports.add = function (r){ return Math.PI }; ``` >[danger] 注意： > 1、不能把exports直接指向一個值，這樣就相當于切斷了 exports 和module.exports 的關系。例如?`exports=function(x){console.log(x)};` > 2、一個模塊的對外接口，就是一個單一的值，不能使用exports輸出，必須使用 module.exports輸出。module.exports=function(x){console.log(x);}; ## 二、 模塊導出 `module.exports`與`exports` ``` index.js中 exports.test = 100;//意思就是直接輸出一個test變量 ``` 應用 ``` const mod=require('.index'); console.log(mod.test); ``` exports會默認設置為module.exports的快捷方式,可以往里面添加屬性( exports.test ),但是不可以修改它的指向,修改了他的指向,他就和普通的對象沒有啥差別,因為在common.js里模塊對外輸出永遠是module.exports,如果exports改變了指向之后,就會不在生效。 ## 三、完整語法 ~~~ // foo.js //1、一個一個 導出 module.exports.age = 1 module.exports.foo = function(){} exports.a = 'hello' //2、整體導出 module.exports = { age: 1, a: 'hello', foo:function(){} } // 注意：整體導出不能用`exports` 用exports不能在導入的時候使用 exports = { age: 1, a: 'hello', foo:function(){} } ~~~ ## 四、webpack打包策略 CommonJS里的require對應的是webpack內部的__webpack_require__透出的module.exports，而default的對象被賦值在module.exports.default上，default也只是module.exports的一個叫default名的普通透出對象，自然是要加default屬性聲明的。 而ES6規范定義，import moduleName from 'modulePath'就是引入一個模塊export default的內容，webpack為了遵循這個規范，在內部對default的內容做了標記處理，在引入的時候直接透出default的內容。 因此，對于CommonJS定義的moule.exports.default內容，可以在es6的import中直接引入，例如： CommonJS定義的zh_CN.js中： ``` exports['default'] = { locale: 'zh-cn', ....... }; ``` es6引入的時候： ``` import zhCN from './lib/locale-provider/zh_CN' ```