聊聊module.exports與export的那些事

1. CommonJs

1.1 概念

  • Node應用由模塊組成,採用CommonJS模塊規範。
  • 根據規範,每個文件就是一個模塊,有自己單獨的作用域。在一個文件裡面定義變量,函數,類等都是私有的,對其他的文件不可見。
  • 根據規範,每個模塊內部,module白能量代表當前模塊。這個變量是一個對象,它的exports屬性(module.exports)是對外的接口。
  • 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 = "zou";
let lastName = "jie";
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); // zoujie

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。
  • 不要同時使用。


分享到:


相關文章: