[JS] CommonJS & ESM

TL;DR

notion筆記搬遷～

commonJS

在Node.js中，預設是使用CommonJS的。
預設是使用module.export來匯出以及require來匯入。
以下為一組使用範例：

export

exports.js

module.exports = 'Hello World'

import

app.js

const hello = require('./exports');
console.log(hello); // Hello World

先由exports.js的module.exports去匯出一個字串（在實作上，其實更常匯出一個物件，物件內會包含各種資料以及function） 接著再由app.js去require將exports.js所匯出的內容賦予在變數上

tip

如果今天exports.js中沒有撰寫到module.exports，在app.js中雖然有require，但是hello則會是一個空物件{}。因為並沒有匯出任何內容出來。

commonJS除了module.exports以外還有另一種匯出的方式，只是較少使用
可以使用以下方式匯出，會使用物件包含所匯出的內容，參考如下

export

data.js

exports.data=2;
exports.bark=function(){
	return 'bark';
}

import

app.js

const content=require('./data');
console.log(content); //{data:2,bark:[Function]}
console.log(content.bark()); //bark

caution

exports.*跟module.exports兩種方式只能擇一使用，如果在上述範例又在data.js內加上modele.exports，則原本的data跟bark function就會被覆蓋掉，而沒有成功輸出～

關於CommonJS的require

需要注意，require是一個同步語法，所以會需要當模組完整載入之後才會繼續執行後面的程式碼！

ESM(ES6 Modules)

ESM是ES6 Modules的簡稱，又稱Javascript Modules，是另一個我們很現在很常見的匯出方式。

在ESM中的匯出方式有兩種，分別是具名匯出與預設匯出。
需要注意如果要使用ESM的話，需要在script中加上type="module"。
如果是使用node.js去執行.js檔案，則要在package.json中加上”type”:”module”

具名匯出(export default)

具名匯出的特色為一個檔案可以匯出多個內容，內容為物件、變數、函式皆可。
在匯出的時候就要給他一個名字，而匯入的時候因為需要知道要匯入的內容為何，需要指定當初匯出指定的名稱。匯出的時候是使用export varibale,匯入則是使用import {varibale1,variable2,…} from ‘./exports.js’。 以下為具名匯出的範例：

export

export.js

export const myName = 'Hello ciel';

export function sayHi() {
  console.log('Hello ciel');
}

export const obj = {
  myName: 'ciel',
}

export const arr = [1, 2, 3];

import

app.js

<script type="module">
  import { arr, obj, sayHi, myName } from './exports.js';
  console.log(myName); // 'Hello ciel'
  sayHi(); // Hello ciel
  console.log(obj.myName); // ciel
  console.log(arr[0]); // 1
</script>

程式碼高亮區塊

需要注意這邊有在script標籤內加上type="module"，才可以正確啟用ESM

也可以使用import * as app from './exports.js';將exports.js內的所有模組都載入，但是不建議這樣做，因為debug會很困難。需要注意這邊需要給載入的模組一個名稱(即上述的app)。如果要使用的話方法如下：

app.js

<script type="module">
  import * as app from './exports.js';
  console.log(app.myName); 
  app.sayHi(); 
  console.log(app.obj.myName); 
  console.log(app.arr[0]);
</script>

更改具名匯出的預設名稱

有時候我們不喜歡具名匯出所取的名字，也可以使用as來重新命名

app.js

import { obj as obj2 } from './exports.js';

預設匯出(export default)

預設匯出則是使用export default去匯出，在接收的時候需要指定一個變數去接收匯出的內容

export

exports.js

export default {
  sayHello() {
    console.log('Hello ciel');
  },
  myName: 'ciel',
  obj: {
    myName: 'ciel',
  },
  arr: [1, 2, 3],
};

import

app.js

<script type="module">
  import app from './exports.js';
  console.log(app.myName); // 'ciel'
  app.sayHello(); // Hello ciel
  console.log(app.obj.myName); // ciel
  console.log(app.arr[0]); // 1
</script>

在上面app.js中，import app from ‘./exports.js’; 內的app就是指定的變數