一直對構(gòu)建很困惑，究其原因，是源于構(gòu)建相關(guān)的文章，總是伴隨著一大堆的構(gòu)建工具和配置文件。因此，總是未能很確切的理解構(gòu)建的真正含義。

什么是構(gòu)建

構(gòu)建就是把我們在開發(fā)環(huán)境寫的代碼，轉(zhuǎn)換成生產(chǎn)環(huán)境的代碼。

構(gòu)建過程

開發(fā)環(huán)境的代碼

• 我們可能會(huì)用到es6、sass、jsx等，從而需要預(yù)編譯
• 我們可能忘記寫</div>，從而需要語法檢查，各種lint，如HTMLlint Csslint eslit
• 我們可能用了react，他們有一些依賴，從而需要依賴管理
• 我們會(huì)更新代碼，從而需要對文件進(jìn)行版本管理

生產(chǎn)環(huán)境的代碼

• 我們希望內(nèi)容能正確的呈現(xiàn)，從而希望生產(chǎn)環(huán)境代碼生成之前能有單元測試
• 希望資源少且小，從而能更快的完成頁面的渲染

綜上，構(gòu)建過程應(yīng)該包括 預(yù)編譯、語法檢查、詞法檢查、依賴處理、文件合并、文件壓縮、單元測試、版本管理等 。

構(gòu)建工具

比較流行的構(gòu)建工具用gulp和grunt，具體使用請參考gulp、 grunt。
比較流行打包工具webpack和parcel-bundler，具體使用請參考webpack、parcel-bundler。

思考

構(gòu)建工具和打包工具有什么區(qū)別呢？

個(gè)人理解：構(gòu)建工具，更注重的是前端的自動(dòng)化流程，如gulp通過流式的文件管理和定制化的任務(wù)管理來實(shí)現(xiàn)對前端構(gòu)建流程的管理。而打包工具更注重打包這一過程，主要包括依賴管理和版本管理。

如果你有不一樣的解讀，希望能夠共同交流。