模組化是我一直想要學的目標，雖然說程式可以執行就已經是很厲害了，但是這樣對閱讀跟維護上，甚至將來要拆出來用，以及重複使用上的效率都很差，那模組化是很好解決這些問題的方式，我自己雖然看過ES6 Module的寫法，但實際卻未真正用來開發，所以這次有這個機會要好好的記錄下來
內容目錄
commonsJS
這是以前的人為了解決無法在NodeJS上面應用JS模組化的概念，所演化出來一種約定俗成的寫法，那我自己本身也是完全沒接觸過
首先設立兩個檔案，一個模組的，一個主程式執行的
- commonsJS.ts
- index.ts
單個資料傳輸
直接將需要輸出的資料，使用module.exports將資料傳出去，那接收方使用
commonsJS.ts
const userName = "hank";
module.exports = userName;
index.ts
const data = require("./commonJS");
console.log(data);
多個資料傳輸
那我們只需要傳個物件過去就好，這邊只要你的變數名稱都是相同的，後面不打也可以，如果要打的話，就像age一樣，傳物件變數的概念。接收的部分一樣取個變數來接值
commonsJS.ts
const userName = "hank";
const age = 99;
module.exports = {
userName,
age: age,
};
index.ts
const data = require("./commonJS");
console.log(data);
ES6Module
ES6提供了模組化的寫法，也提供了不少的變化，也是我當初學JS時，就有接觸過的寫法
同樣設置兩個檔案，模組及執行的
- ES6Module.ts
- index.ts
單個資料傳輸
想要獲得資料，只要在前面使用export直接將資料輸出即可，接收方的部分就可以收到了
ES6Module.ts
export const userName = "hank";
export const age = 99;
index.ts
import { userName, age } from "./ES6Module";
console.log(userName, age);
而接收方也可以將資料一次收集起來，就不用打這麼多變數名稱
import * as all from "./ES6Module";
console.log(all);
多個資料傳輸
同樣的，除了上述提到的方式，還可以多個資料一次傳輸，這樣可以在模組方一次整理在同一個地方，方便整理。而接收的部分，也不在需要大括號將資料存起來，只要使用default傳過來的，就可以直接被設定的變數接收
※default也可以只傳一個變數，這應該很好理解
ES6Module.ts
const userName = "hank";
const age = 99;
export default {
userName,
age,
};
index.ts
import data from "./ES6Module";
console.log(data);
綜合應用
那還可以把上面所有的方式都加總起來用，這樣一樣可以拿到default的值傳到data，也可以把各自的部分，分別傳送來獲取值
那如果有可能模組使用的變數跟方法名子衝突到了，就可以向範例中userName的部分一樣，加個斷點讓他改存為別得名稱
ES6Module.ts
export const userName = "hank";
export const age = 99;
export default {
userName,
age,
};
index.ts
import data, { userName as name1, age } from "./ES6Module";
console.log(data);
console.log(name1, age);
模組化tsconfig的設定
其實寫程式有一部分會讓人搞不懂的地方在於環境的設定，這一部分就是必須要非常了解這個語言，並且知道其發展歷史，才有可能理解當中每一項設定是做什麼用
從布魯斯的 TypeScript 入門攻略｜輕鬆打造實時聊天室這堂課中，除了學到語言的撰寫邏輯之外，最重要的就是聽布魯斯講解這些工具之間的關聯，有很多地方都只知道要安裝這個，設定那個，但你從來不知道為什麼
而布魯斯則會很清楚到告知每一項設定背後的原理，透過語言的發展歷史，告訴你為什麼要這麼做，並且過程中還會帶著看官方文件(這也是我不擅長的東西)
這裡就只記錄功用，要知道背後原理的話，還是去聽一下專業的講師講解
| module | TS編譯後呈現的JS模組 |
| target | TS編譯後所呈現的JS模組 |
| moduleResolution | Import解析路徑的策略 1.npm 2.路徑 |
| esModuleInterop | 撰寫ES6Module時相容CommonJS模組 |
| allowSyntheticDefaultImports | 針對import時，模組沒有Default輸出時的相容性處理 |
設定根目錄為絕對路徑
我們常常要import一個路徑檔名，都要以自身為出發點，再去尋找其他檔案的位置，所以直接把這種相對路徑改為絕對路徑，不管自身移動到哪裡，就不用一直改匯入檔案的路徑
先設定兩個檔案在src裡面，層級關係分別為下面所設定
-src
-lib
-live.ts
-utils
-parsing.js
一般我們設定會是這樣，parsing跟live是不同層資料夾，所以要先回上一層，再到lib層找到live.ts
live.ts
export const liveName = "hank";
parsing.js
import { liveName } from "../lib/live";
在tsconfig中設定所有根目錄為@代替，而根目錄就是./src
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
如果有使用webpack，也要讓webpack知道@是什麼，要不然webpack只會把他看成是@，不知道是幹嘛的
在webpack.config中的module.exports物件裡修改resolve，再resolve中新增這行代碼，告訴webpack，”@”代表src
alias: {
"@": path.resolve(__dirname, "src"),
},
結論
今天也是繼續學習布魯斯的 TypeScript 入門攻略｜輕鬆打造實時聊天室這堂課，其實模組化的輸入輸出概念的概念並不會太難，而且相當方便，透過模組化之後，將特定的功能額外分成別的檔案，只需要在使用的時候import進來，就可以使用特定功能，除了程式碼看起來簡單易懂之外，也可以做到重複使用的功用
而現在NPM發展也越來越方便，需要的套件只需要安裝之後，就可以直接import的進來使用，這也是可以讓自己可以快速開發的一個重要能力
