ES6 模組化與 CommonJS 模組化區別
在最近的專案中關於 ES6 的 import、export 和 CommonJS 中的 module.exports、require 的使用傻傻搞不清楚，今天下定決心總結一下，有什麼不對的地方，還請諸位多多指教。
ES6 模組化
import命令用於輸入其他模組提供的功能;export命令用於規定模組的對外介面。
一、 import 與 export
// 匯出 a.js
/** 寫法一 **/
var name = `sheep`
function getSheep() {
name = `hourse`
}
export {getSheep}
// 引入 b.js
import {getSheep} from `.／a.js`
/** 寫法二 **/
var name = `sheep`
export function getSheep() {
name = `hourse`
}
// 引入 b.js
import {getSheep} from `.／a.js`
二、 import 與 export defalut
export 可以有多個，export default 僅有一個
// 匯出 a.js
let obj = {
name: `hello`,
getName: function (){
return this.name
}
export default obj
// 引入 b.js
import obj from `./a.js`
CommonJS 模組化
一、 require 與 module.exports
require 在 ES6 和 CommonJS 中都支援
// 匯出 a.js
let obj = {
name: `hello`,
getName: function (){
return this.name
}
module.exports = obj
// 引入 b.js
let obj = require(`./a.js`)
總結
- 即使我們使用了 ES6 的模組系統，如果藉助 Babel 的轉換，ES6 的模組系統最終還是會轉換成 CommonJS 的規範。
- Babel5 中使用 require 時，引入值是 module.export 返回的值或者是 export default 返回的值。
- Babel6中，使用 import 引入時，可以直接獲取到 export default 的值 ； 但是如果是 require 匯入的元件， 無論匯出是 module.export 、export 、 export default可以直接獲取到 export default 的值都必須要加上一個 default。
參考文獻 ：