module.exports、exports 、export default之間的差異區別及與require、import的使用

Nondeterminacy發表於2018-10-08
ExportUIImport

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;
複製程式碼

相關文章