前端程序員常用的9大構(gòu)建工具

說到構(gòu)建工具，我往往會(huì)在前面加「自動(dòng)化」三個(gè)字，因?yàn)闃?gòu)建工具就是用來讓我們不再做機(jī)械重復(fù)的事情，解放我們的雙手的。

在小型項(xiàng)目中，開發(fā)者往往手動(dòng)調(diào)用構(gòu)建過程，這樣在大型的項(xiàng)目中很不實(shí)用，在構(gòu)建過程中難以跟蹤什么需要被構(gòu)建、按照什么順序構(gòu)建以及項(xiàng)目中存在哪些依賴。使用自動(dòng)化工具會(huì)使構(gòu)建過程更為連續(xù)。

1：webpack

https://webpack.js.org/
webpack是一個(gè)打包模塊化JS的工具，在webpack里一切文件都是模塊，通過loader轉(zhuǎn)換文件，通過plugin注入鉤子，最后輸出由多個(gè)模塊組合成的文件。webpack專注于構(gòu)建模塊化項(xiàng)目。

2：gulp

https://www.gulpjs.com.cn/

gulp是一個(gè)基于流的自動(dòng)化構(gòu)建工具。除了可以管理和執(zhí)行任務(wù)，還支持監(jiān)聽文件、讀寫文件。gulp被設(shè)計(jì)的非常簡(jiǎn)單，只通過下面5種方法就可以支持幾乎所有構(gòu)建場(chǎng)景：

3：browserify

http://browserify.org/
Browserify 可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，通過預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫(kù)。

4：yeoman

https://yeoman.io/
Yeoman是一個(gè)強(qiáng)健的工具，庫(kù)，及工作流程的組合，幫你網(wǎng)頁(yè)開發(fā)者快速創(chuàng)建出漂亮而且引人入勝的網(wǎng)頁(yè)程序。

5：grunt

www.gruntjs.net

Grunt和Npm Script類似，也是一個(gè)任務(wù)執(zhí)行者。Grunt有大量現(xiàn)成的插件封裝了常見的任務(wù)，也能管理任務(wù)之間的依賴關(guān)系。

6：babel

https://babeljs.io
Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。

7:FIS3

https://fex-team.github.io/fis3/
Fis3是來自百度的國(guó)產(chǎn)構(gòu)建工具，相對(duì)于grunt，gulp這些只提供了基本功能的工具，F(xiàn)is3集成了web開發(fā)中常用的購(gòu)將功能，

8：Rollup

https://www.rollupjs.com/

Rollup是一個(gè)和webpack很類似但專注于ES6的模塊打包工具，它的亮點(diǎn)在于，能針對(duì)ES6源碼進(jìn)行Tree Shaking，以去除那些已被定義但沒使用的代碼并進(jìn)行Scope Hoisting（作用域提升），以減小輸出文件的大小和提升運(yùn)行性能。rollup的方法和webpack差不多

9：Parcel

https://www.parceljs.cn/
極速零配置Web應(yīng)用打包工具，Parcel 使用 worker 進(jìn)程去啟用多核編譯。同時(shí)有文件系統(tǒng)緩存，即使在重啟構(gòu)建后也能快速再編譯。