對 JavaScript 構建工具的 6 個預測

作者：Shedrack Akintayo 來源：Linux中國

JavaScript 前端工具的生態系統充滿著變數和競爭，且只有最好的工具才會存活下來。

生產中使用的程式碼與開發中的有所不同. 在生產中，我們需要構建一些能運行得夠快、能管理各種依賴關係、能自動執行任務、能載入外部模組等功能的包。而那些將開發中的程式碼轉為生產程式碼的 JavaScript 工具我們就稱之為 構建工具。

我們可以通過各個構建步驟以及其重要性來解釋前端程式碼需要被「構建」的原因。

前端程式碼構建步驟

1、轉譯

通過轉譯，開發者可以使用到語言最新、最熱門的更新和擴展，並保持瀏覽器的相容性等。下面是使用 Babel 的一個例子：

// 陣列對映中的箭頭函數語法constdouble=[1,2,3].map((num)=> num *2);// 轉譯後constdouble=[1,2,3].map(function(num){return num *2;});

2、分包

分包是處理所有 import 與require 語句的過程；找到相匹配的 JavaScript 程式碼片段、包和庫；將它們新增到適當的域中；然後將它們打包到一個大的 JavaScript 檔案中。常用的分包器包括 Browserify、Webpack 與 Parcel。

3、壓縮

是通過刪除空白和程式碼註釋來減少最終的檔案大小。在壓縮過程中，我們還可以更進一步新增程式碼混淆步驟，混淆會更改變數名和方法名，使程式碼變得晦澀難懂，因此一旦程式碼交付到客戶端，它就不是那麼容易能讓人讀懂。下面是一個使用 Grunt 的例子：

// 壓縮前constdouble=[1,2,3].map(function(num){return num *2;});// 壓縮後constdouble=[1,2,3].map(function(num){return num*2;});

4、打包

完成上面的所有步驟之後, 我們需要將這些具有相容性、且經過分包、壓縮/混淆過的檔案放置到某個地方。正是這樣一個過程，它將上述步驟所產生的結果放置到開發者指定的某個位置上，這通常是通過打包器完成的。

前端構建工具

前端工具及構建工具可以分為以下幾類:

包管理: NPM、Yarn轉譯器: Babel 等打包器: Webpack、Parcel、Browserify壓縮混淆: UglifyJS、Packer、Minify 等

JavaScript 生態系統中有各種各樣的構建工具可以使用，包括下面的這些：

Grunt 和 Bower

Grunt 是作為命令列工具引入的，它僅提供一個指令碼來指定和配置相關構建任務。Bower 作為包管理器，提供了一種客戶端包的管理方法而緊追其後。這兩者，再加上 NPM，它們經常在一起使用，它們看上去似乎可以滿足大多數的自動化需求，但 Grunt 的問題在於它無法提供給開發者配置更復雜任務的自由，而 Bower 使開發者管理的程式包是平常的兩倍，因為它將前端包、後臺包分開了（例如，Bower 元件與 Node 模組）。

Grunt 與 Bower 的未來： Grunt 與 Bower 正在退出 JavaScript 工具生態，但是還有一些替代品。

Gulp 和 Browserify

Gulp 是在 Grunt 釋出一年半之後才釋出的。但 Gulp 卻讓大家感到很自然、舒服。用 JavaScript 來寫構建指令碼與用 JSON 來寫相比更自由。你可以在 Gulp 的構建指令碼中編寫函數、即時創建變數、在任何地方使用條件語句 —— 但就這些，並不能說讓我們的感覺變得特別自然和舒適，只能說這只是其中的一個可能的原因。Browserify 和 Gulp 可以配合使用，Browserify 允許 NPM 包（用於後端 Node 伺服器）被直接帶入到前端，就這一點已經直接讓 Bower 廢了。而正是這種用一個包管理器來處理前後端包的方式讓人感到更自然和更好。

Gulp 的未來： Gulp 可能會被改進，以便匹配當前流行的構建工具，但這完全取決於創造者的意願。Gulp 仍在使用中，只是不再像以前那麼流行了。

Webpack 和 NPM/Yarn 指令碼

Webpack 是現代前端開發工具中最熱門的寵兒，它是一個開源的 JavaScript 模組打包器。Webpack 主要是為處理 JavaScript 而創造的，但如果包含相應的載入器，它也可以轉換 HTML、CSS 和圖片等前端資源。通過 Webpack，你也可以像 Gulp 一樣編寫構建指令碼，並通過 NPM/Yarn 來執行它們。

Webpack 的未來： Webpack 是目前 JavaScript 工具生態系統中最熱門的工具，最近幾乎所有的 JavaScript 庫都在使用 React 和 Webpack。Webpack 目前處於第四個版本，不會很快消失。（LCTT 譯註：Webpack 目前已經發布了第五個版本了，且還在火熱更新中）

Parcel

Parcel 是一個 Web 應用打包器，於 2018 年推出，因其開發者體驗而與眾不同。Parcel 能利用處理器多核功能提供極快的打包效能，且還零配置。但 Parcel 還是一個新星，對於一些大型應用，其採用率並不高。相比之下，開發人員更喜歡使用 Webpack，因為 Webpack 有更廣泛的支援和可定製性。

Parcel 的未來： Parcel 非常容易使用，如果你統計打包和構建時間，它會比 Webpack 更快，而且它還提供了更好的開發者體驗。Parcel 沒有被大量採用的原因可能是它仍然比較新。在前端構建工具的生態系統中，Parcel 的前景會非常光明，它將會存在一段時間。

Rollup

Rollup 是 JavaScript 的一個模組分包器，它可將一小段程式碼編譯為更大更復雜的庫或應用。Rollup 一般建議用來構建 JavaScript 庫，特別是那種匯入和依賴的第三方庫較少的那種庫。

Rollup 的未來： Rollup 很酷，且正在被迅速採用。它有很多強大的功能，將在很長一段時間內作為前端工具生態系統的一個組成部分而存在。

瞭解更多

JavaScript 前端工具的生態系統充滿著變數和競爭，且只有最好的工具才能存活下來。在不久的將來，我們的構建工具將具有更少（或沒有）的配置，更方便的定製化，更好的擴展性的和更好的構建速度。

該用什麼樣的構建工具用於你的前端項目，你需要根據具體的項目需求來做出決定。至於選擇什麼樣的工具，才是最合適自己的，大多數時候，需要我們自己作出取捨。