一、commonjs的編寫規則

首先說明一下，commonjs模組規範被廣泛使用在nodejs中，webpack也支援，rollup如果要支援則需要安裝兩個外掛，rollup-plugin-node-resolve和rollup-plugin-commonjs

commonjs模組要向外暴露 module.exports={}，也就是暴露一個物件，預設值為一個空物件;

寫法如下：

// say.js
//一定要包裹在物件中 還要是頂級作用域
module.exports = {
    sayHi:function(){
        console.log("你好啊");
    }
};

//main.js 引用後就可以使用了
 

const say = require("./say.js");
say.sayHi();

順便說一下exports，他其實是module.exports的一個引用，即exports = module.exports，也可以理解為是module.exports的淺複製物件；

我們可能也經常見到如下程式碼：

// b.js
exports.hi = function () {
    console.log('hi 1111');
}

//main1.js
const b = require("./b.js");
b.hi();
// 其實，exports.hi就等於是給module.exports物件上新增新的屬性方法
 

二、ES6模組的編寫規則

webpack和rollup完美支援es6模組，nodejs在9+版本之後支援es6模組了

1. 整體丟擲

被引用的元件要暴露 export default {}

引用時 用import Cal from “元件的路徑”;

然後就可以用 Cal點出來元件中屬性或者方法

//程式碼
//cal.js的內容
export default {
    add:function (n1,n2){
        return n1+n2;
    },
    num:34
};

//main.js 引用後就可以使用了
import Cal from "./cal.js";
 

console.log(Cal.add(4,5));
console.log(Cal.num);

2. 單個丟擲

//cal.js的內容
//宣告直接匯出
export const num =123;

//先聲明後匯出
const Cal ={
    sub:function(n1,n2){
        console.log(n1-n2);
    }
};
export { Cal };

//main.js 引用後就可以使用了 也要是頂級作用域 注意 命名很重要 要一致
import { Cal,num} from "./cal.js";
Cal.sub(12,1);
console.log(num);

三、export default 和 export 區別

1. export與export default均可用於匯出常量、函式、檔案、模組等

2. 你可以在其它檔案或模組中通過import+(常量 | 函式 |檔案|模組)名的方式，將其匯入，以便能夠對其進行使用

3. 在一個檔案或模組中，export、import可以有多個，export default僅有一個
4. 通過export方式匯出，在匯入時要加{ }，export default則不需要

//1.export
//demo1.js
export const str = 'hello world'
export function f(a){ return a+1}
對應的匯入方式：

//demo2.js
import { str, f } from 'demo1' //也可以分開寫兩次，匯入的時候帶花括號

//2.export default
//demo1.js
export default const str = 'hello world'
對應的匯入方式：

//demo2.js
import str from 'demo1' //匯入的時候沒有花括號

使用export default命令，為模組指定預設輸出，這樣就不需要知道所要載入模組的變數名

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]