前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇文章我們介紹了JSX，包含了

1. JSX 是什麼？
2. JSX 語法
3. 使用JSX建構React元件

而這一篇會針對三個名詞做一些解釋
這些名詞是建立React專案，需要會的工具，包含了

1. Babel 是什麼？
2. Webpack 是什麼？
3. Npm 是什麼？

當然主要介紹的是使用這些工具的概念，但是還是有其他工具可以做選擇
例如：Npm 之於 Yarn

Babel 是什麼？

前一篇文章有提到說JSX是需要透過工具來進行編譯的，而此系列文前幾篇也有提到JavaScript ES6的語法。

其實在某些情況下，ES6也是需要進行編譯的，Babel這個套件就是用來進行編譯的（Compile）。

先來講解一下JavaScript這個語言本身是一個直譯式的程式語言，並且瀏覽器能不編譯的情況下就執行裡面的程式語法。

不過不一定每個瀏覽器都支援所有的最新語法，因此我們才透過Babel這樣的工具。

將最新的語法，包含ES6以及JSX的語法轉換成舊版本的JavaScript語法，才能讓瀏覽器去執行。

Webpack 是什麼？

在講解完了Babel 這個編譯工具之後，還需要特別講解一個模組化打包工具，叫做「Webpack」。

大家可以想像一下，一個大型專案裡面有相當多種類的檔案，除了JavaScript以外可能還有不同類型的檔案，例如：CSS、LESS、SCSS、JSX...等等。

那這些散落在各個檔案夾的檔案，就需要一個整合工具來去處理，因此才有了Webpack這樣的模組化打包工具（Module Bundler）出現，來將所有的檔案進行整合處理。

模組化打包工具的好處，除了讓我們將所有檔案進行模組化（Modulize）以外，更可以有效的提高效能。

這邊也針對webpack的一些功能做介紹：

程式碼拆分（Code Splitting）

將程式碼拆分成多個區塊，當我們需要使用某個區塊時，再進行載入。

模組化（Modulize）

模組化是一個很重要的概念，勢將很多個大型功能拆分成小型的檔案以及函式，透過這些模組化的小型檔案，來進行複用以及測試。

優化效能（Optimize performance）

將各種模組（Module）以及一些散落在不同地方的檔案進行打包，變成單一檔案，因此如果使用某個功能時進行讀取，大幅降低載入時間。

使用最新的語法

Webpack的打包工具，是可以整合多個工具的，包含Babel。因此也可以透過整合Babel的Webpack，使用包含JSX、ES6...等等的最新語法。

Npm 是什麼？

上面已經介紹了兩種工具，但這些工具或是程式碼能去哪邊下載呢？

對於前端開發者來說，只要安裝了Node.js時就會自動擁有npm，而npm是什麼呢？

npm 全名為Node Package Manager，我們可以透過Node裡面的npm cli工具進行套件的安裝以及管理。

舉例來說，如果想要使用React套件，只需要在終端機（terminal）輸入指令

npm install react

npm 就會自動從Registry中尋找react這個前端框架，並且下載至node_modules資料夾中。

結語

這一篇針對三個名詞Babel & Webpack & Npm，分別做了介紹，也會在下一篇文章中，正式建立我們的第一支React程式。

在建立React的過程中，前幾篇的各種知識，因此如果需要複習的讀者，也可以參考前幾篇的講解。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～