module.exports與export那些事兒

杜成伍superFatDu發表於2019-04-17
Export

首先，我們要明白一個前提，那就是CommonJS模組規範與ES模組規範是不同的概念

1. CommonJs

1.1 概念

  • Node應用由模組組成，採用CommonJS模組規範。
    1. 根據規範，每個檔案就是一個模組，有自己單獨的作用域。在一個檔案裡面定義變數，函式，類等都是私有的，對其他的檔案不可見。
    2. 根據規範，每個模組內部，module白能量代表當前模組。這個變數是一個物件，它的exports屬性（module.exports）是對外的介面。
    3. module.exports用於輸出檔案定義內容，require用於載入模組。

1.2 例項

1.2.1 module.exports
// example.js
let x = 5;
let addX = (value) => {
    return x + value;
}
module.exports.x = x;
module.exports.addX = addX;
複製程式碼
1.2.2 require
let requireTest = require(./example.js);
let x = requireTest.x;
let addX = requireTest.addX(3);
console.log(x); // 5
console.log(addx); // 8
複製程式碼

1.3 exports與module.exports

  • Node為每個模組提供了一個exports變數，指向module.exports。這如同在每個模組的頭部新增如下程式碼：
let exports = module.exports;
複製程式碼
  • module.exports才是真正的介面，exports只不過是它的一個輔助工具。 最終返回給呼叫的是module.exports而不是exports。 所有的exports收集到的屬性和方法，都賦值給了Module.exports。

2. ES6模組規範

2.1 概念

  • 不同於CommonJS,ES6使用的是export和import來匯出和匯入模組。
  • export命令規定的是對外的介面，必須與模組內部的變數建立意義對應關係。

2.2 例項

2.2.1 export
let firstName = "Chengwu";
let lastName = "Du";
export { firstName, lastName }
複製程式碼
2.2.2 export意義對應例項
// one
export const PI = "3.1415926";

// two
let name = "Robin";
export { name }

// three
let n = "Robin";
export { n as name }
複製程式碼
2.2.3 import
import { firstName, lastName } from "./export.js";
let name = firstName + lastName;
console.log(name); // Chengwu Du
複製程式碼

2.3 export default

export defalut function() {
    return "Robin";
}
複製程式碼
2.3.1 export default與export區別
  • 在一個檔案或者模組中，export和import可以有多個，但是export default卻僅有一個。
  • 通過export方式匯出，再匯入時需要加{}，按需載入。但是export default不需要。
  • 輸出單個模組時使用export default，多個模組時使用export。
  • 不要同時使用。

相關文章