module.exports
Node 應用由模塊組成,採用 CommonJS 模塊規範。根據這個規範,每個文件就是一個模塊,有自己的作用域。在這些文件裏面定義的變量、函數、類,都是私有的,對外不可見,因此規避掉了作用域污染。
根據 CommonJS 規定,每個模塊內部,module 變量代表當前模塊,這個變量是一個對象,它的 exports 屬性(即 module.exports)是對外的接口。加載某個模塊,其實就是加載該模塊的 exports 屬性。
舉例:通過 module.exports 輸出變量 age 和 sayHelloTo 函數。
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
module.exports.age = age;
module.exports.sayHelloTo=sayHelloTo;
require:用於加載模塊
var temp = require('./MyModule.js'); //這裏也可以使用 import myModule from './MyModule.js'
console.log(temp.age); // 7
console.log(temp.sayHelloTo("Steve")); // hello Steve
額外說明:對於自定義的模塊,需要使用相對路徑,否則會提示找不到模塊/組件(默認情況下,非相對路徑的引用,會從 node_modules 文件夾中查找)
exports 與 module.exports
爲了方便,node 爲每個模塊提供了一個 exports 變量,指向module.exports。這等同於在每個模塊頭部,有這麼一行代碼:
var exports = module.exports;
因此,你可以直接在 exports 對象上添加方法(等同於在 module.exports 添加一樣)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports.age = age; //等效於: module.exports.age = age;
exports.sayHelloTo=sayHelloTo; //等效於: module.exports.sayHelloTo=sayHelloTo;
P.S.不能直接將exports指向一個值,這會切斷 exports 與 module.exports 的聯繫(但是可以用 module.exports 來指向一個值)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports = age; //不要這麼幹。這麼做會切斷 exports 與 module.exports 的聯繫
不同於 CommonJS,ES6 使用 export 和 import 來導入、導出模塊
用 export 導出的模塊,需要用 import 來進行導入,而不能用 require。
P.S.:export 命令規定的是對外的接口,必須與模塊內部的變量建立一一對應的關係
const utils = {
showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
/* 導出的3種方式 */
export var m = utils; //方式1,這種方式在引用的時候需要這樣: import {m} from './utils.js';
export {utils}; //方式2,用大括號來導出變量,如果導出的變量有多個,則{變量1,變量2,變量3...,變量N}。這種方式在引用的時候需要這樣: import {utils} from './utils.js';
export {utils as myUtils}; //方式3,這種方式在引用的時候需要這樣: import {myUtils} from './utils.js';
在引用的地方,也可以直接指定別名,如:import {myUtils as utils} from './utils.js';
MDN對於 export 和 import 的語法說明:
export 語法:
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
import語法:
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import(module-name);
export 和 export default
- export 和 export default 均可用於導出(常量 | 函數 | 文件 | 模塊)等。
- 可以在其他文件中通過 import +(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠進行使用。
在一個文件或者模塊中,export、import 可以有多個,但 export default 僅有一個。
const utils = { showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
const name = "my name is Artech";
export {name}; //命名導出
export {utils};
//對於命名方式導出的,在導入的時候必須使用相應對象的相同名稱
引用的時候:import {utils,name as myName} from './utils.js';通過 export 方式導出,在導入時要用花括號{ };而通過 export default 方式導出的,則不需要:
//如通過 export default 導出 export default utils;
//則在使用的時候不用加花括號,且導入時的名字可以自定義,如:
import myUtils from './utils.js';- 對於默認方式導出的,則導入的時候,名稱可以隨便取。
- 默認導出:不能使用 let,var 或 const 作爲默認導出。
import *
將一個 js 文件中定義的方法,模塊,對象等,全部導出,一般結合別名使用,如:
myModule.js
export const fun1 = ()=>{}
export const objInfo = {...};
demo.js:引用 myModule.js
import * as myAlias from './myModule';
// fun1() 和 objInfo 都是定義在 myModule 中的方法和對象
myAlias.fun1();
myAlias.objInfo;