export,export default,module.exports,import,require之間的區別和關聯

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

  1. export 和 export default 均可用於導出(常量 | 函數 | 文件 | 模塊)等。
  2. 可以在其他文件中通過 import +(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠進行使用。
  3. 在一個文件或者模塊中,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';
  4. 通過 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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章