JS模組化之路-上
甚麼是模組
這邊先大略說明一下甚麼是模組跟模組化設計
模組化設計（英語：modular design），也稱模塊化設計，是門設計理論與實作方法，其旨在於將一個系統細分為許多小單元，稱為模組（module）或模塊（block），可以獨立的於不同的系統中被建立與使用。模組化設計的特徵為將功能切分為抽象的、可擴充的、可重複使用的模組；模組需嚴格使用定義明確的模塊化接口，並以行業間標準作為接口規範。在這種情況下，模組化在組件級別實作，並且具有一個單一、固定且特殊的組件插槽。這種由組件單元組合而成的模組化系統，通常稱為使用模組化組件的平台系統。
轉自維基百科-模組化設計
個人在查詢一些文章後得出的理解是，一個系統將可以將其中的一個完整的功能設計成模組，模組會有一個抽象的定義(ex: 介面)，方便未來如果要擴充或是切換功能，使用端可以依照這個定義來直接切換或使用，每個模組都會是高內聚，而對於模組間會是低耦合的，可以讓模組容易除錯、測試、使用。
參考連結(說明得非常清楚，推薦~): 尋覓 webpack – 02 – 認識 webpack – JavaScript 的模組化之路 – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
如果沒有模組
在早期開發者會直接在 html 中藉由 <script>, <link> 標籤引入 JavaScript 以及 CSS 檔案，但這樣會造成以下問題。
- 變數衝突
如果引入套件時，有掛到全域變數，在後引入的script中有重新賦值，在使用套件時會報錯，因為已經被覆蓋掉，同樣的問題會出現在分出多支script時，如果變數的scope是全域，也會有後蓋前的狀況。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test App</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
<script>
var $ = 'wrong ~~';
$('body').hide();
// Uncaught TypeError: $ is not a function
</script>
</body>
</html>- 不明確的引入
可以參考下方程式碼示範，假設今天你是接到需求要調整child.js的工程師，在不去翻引入child.js的html，或是去翻了html但發現引入的script有夠多(所以你懶得看XD)的情況下，其實沒辦法保證你目前編輯的child.js是有引入依賴套件的。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test App</title>
</head>
<body>
<script src="aaa"></script>
<script src="bbb"></script>
<p>我有引入Jquery ~吧</p>
<script src="./child.js"></script>
</body>
</html>
------------------------------------------------------------
// 假設你在編輯 child.js，然後不知道Test App.html
$('p').text('我其實不確定我有引入');
- 引入順序
因為在js引入跟執行順序會有關，如果今天你的html上引入了一堆js，其實單從某個js裡面的內容，你沒辦法保證這個js的依賴有沒有引入，或是被重新賦值了(同上述 1 2 項)。
- 引入不必要的程式碼
繼續之前的情境(你的html上引入了一堆js)，在不去一一比對套件跟執行js檔的情況下，有辦法知道哪些套件依賴實際上是真的有在使用的嗎?
總結來說以上狀況可以分成兩個部分，全域命名空間汙染，依賴管理
參考資料: Understanding Modules and Import and Export Statements in JavaScript