Babel & Webpack & NPM – React 白話文運動 07
前言
這一篇會針對三個名詞做一些解釋，這些名詞是建立 React 專案，需要會的工具，包含了：
- Babel 是什麼？
- Webpack 是什麼？
- Npm 是什麼？
當然主要介紹的是使用這些工具的概念，但是還是有其他工具可以做選擇，例如：Npm 之於 Yarn。
Babel 是什麼？
前一篇文章有提到說 JSX 是需要透過工具來進行編譯的，而此系列文前幾篇也有提到 JavaScript ES6 的語法。
其實在某些情況下，ES6 也是需要進行編譯的，Babel 這個套件就是用來進行編譯的（Compile）。
先來講解一下 JavaScript 這個語言本身是一個直譯式的程式語言，並且瀏覽器能不編譯的情況下就執行裡面的程式語法。
不過不一定每個瀏覽器都支援所有的最新語法，因此我們才透過 Babel 這樣的工具。
將最新的語法，包含 ES6 以及 JSX 的語法轉換成舊版本的 JavaScript 語法，才能讓瀏覽器去執行。
從前端開發的角度來看，Babel 是一個不可或缺的工具。它的主要功能是將最新版本的 JavaScript 語法，尤其是 ECMAScript 6（ES6）的語法，轉換成瀏覽器能夠理解和執行的舊版本 JavaScript。
ES6 引入了許多強大的功能，如箭頭函數、模板字串、解構賦值等，但由於瀏覽器的支援度不同，為了確保跨瀏覽器相容性，我們需要使用 Babel 進行編譯。
另外，當開發使用 JSX 語法的 React 應用程式時，同樣需要 Babel 進行編譯。JSX 是一種 JavaScript 語法擴充，用來描述 React 元件的結構。它使得在 JavaScript 中撰寫類似 HTML 的標記成為可能，但瀏覽器無法直接執行 JSX 語法，因此需要 Babel 將其轉換成純 JavaScript。
Webpack 是什麼？
在講解完了 Babel 這個編譯工具之後，還需要特別講解一個模組化打包工具，叫做「Webpack」。
大家可以想像一下，一個大型專案裡面有相當多種類的檔案，除了 JavaScript 以外可能還有不同類型的檔案，例如：CSS、LESS、SCSS、JSX…等等。
那這些散落在各個檔案夾的檔案，就需要一個整合工具來去處理，因此才有了 Webpack 這樣的模組化打包工具（Module Bundler）出現，來將所有的檔案進行整合處理。
模組化打包工具的好處，除了讓我們將所有檔案進行模組化（Modulize）以外，更可以有效的提高效能。
這邊也花更多篇幅解釋更詳細一些，Webpack 是一個模組化打包工具，其主要功能是將專案中的各種檔案，包括 JavaScript、CSS、LESS、SCSS、JSX 等，整合成一個或多個最終的檔案。這樣的模組化打包有助於提高開發效率，尤其在大型專案中，我們可以將功能模組化拆分，進而實現程式碼重用和測試的便利性。
Webpack 不僅僅是一個打包工具，它還提供了一系列強大的功能，例如程式碼拆分（Code Splitting），這允許將程式碼拆分成多個區塊，僅在需要時載入，以提升頁面載入速度。同時，模組化（Modulize）是 Webpack 中的核心概念，通過將大型功能拆分成小型檔案和函式，實現程式碼的結構清晰，易於維護和測試。
除此之外，Webpack 還可以進行優化效能，將不同模組以及分散在不同位置的檔案進行打包，轉換成單一檔案，從而減少瀏覽器的載入時間，提升應用程式的性能。
webpack 功能介紹
程式碼拆分（Code Splitting）
將程式碼拆分成多個區塊，當我們需要使用某個區塊時，再進行載入。
模組化（Modulize）
模組化是一個很重要的概念，勢將很多個大型功能拆分成小型的檔案以及函式，透過這些模組化的小型檔案，來進行複用以及測試。
優化效能（Optimize performance）
將各種模組（Module）以及一些散落在不同地方的檔案進行打包，變成單一檔案，因此如果使用某個功能時進行讀取，大幅降低載入時間。
使用最新的語法
Webpack 的打包工具，是可以整合多個工具的，包含 Babel。因此也可以透過整合 Babel 的 Webpack，使用包含 JSX、ES6 …等等的最新語法。
整合 Babel 和 Webpack 的好處在於，可以使用最新版本的 JavaScript 語法，包括 ES6 和 JSX，並且這些語法會在建置過程中被轉換成瀏覽器可執行的版本。這樣的整合讓開發者能夠充分發揮最新技術的優勢，同時確保應用程式在各種瀏覽器中穩定運行。
Npm 是什麼？
上面已經介紹了兩種工具，但這些工具或是程式碼能去哪邊下載呢？對於前端開發者來說，只要安裝了 Node.js 時就會自動擁有 npm，而 npm 是什麼呢？
npm 是世界上最大的軟體註冊中心。 來自各大洲的開源開發人員使用 npm 來共享和借用軟體模組包，許多公司也使用 npm 來管理私人開發。
npm 全名為 Node Package Manager，我們可以透過 Node 裡面的 npm cli 工具進行套件的安裝以及管理。
舉例來說，如果想要使用 React 套件，只需要在終端機（terminal）輸入指令，npm 就會自動從Registry 中尋找 react 這個前端框架，並且下載至 node_modules 資料夾中。
備註
目前文章已移至 Babel & Webpack & NPM – React 白話文運動 07
未來文章一併更新於此網站 Hogan.B Lab
觀看分類：React 白話文運動、其他系列
React 白話文運動系列
JavaScript 高階函式 – React 白話文運動 04
JavaScript Async Await – React 白話文運動 03
JavaScript ES6 Object – React 白話文運動 02
JavaScript ES6 – React 白話文運動 01
補充
這邊感謝 Sam Huang 的補充，歡迎各位讀者也可以去 Sam 的專區閱讀！
對文中提到 babel 的章節做些補充 Babel 本身是個 compiler 沒錯（官網自稱），但如果是指向下相容的部分，或許用 transpiler 比較精確。ES6 有大量語法是語法糖，透過 babel 可以轉成 ES5 語法，「可能」會有比較好的相容性。
然後直譯式及編譯式比較是語言跟執行環境的關係，目前也不太有所謂純粹直譯式的語言(為兼顧效能及彈性，通常會引入 JIT 之類技術)
你可能也想看
