[[401492]]

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

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

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

前端代碼構建步驟

前端代碼的構建涉及下面的四個步驟:

1、轉譯

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

// 數組映射中的箭頭函數語法
const double = [1, 2, 3].map((num) => num * 2);
// 轉譯后
const double = [1, 2, 3].map(function(num) {
  return num * 2;
});

2、分包

分包Bundling是處理所有 import 與require 語句的過程；找到相匹配的 JavaScript 代碼片段、包和庫；將它們添加到適當的域中；然后將它們打包到一個大的 JavaScript 文件中。常用的分包器包括 Browserify、Webpack 與 Parcel。

3、壓縮

壓縮Minifing是通過刪除空白和代碼注釋來減少最終的文件大小。在壓縮過程中，我們還可以更進一步添加代碼混淆步驟，混淆會更改變量名和方法名，使代碼變得晦澀難懂，因此一旦代碼交付到客戶端，它就不是那么容易能讓人讀懂。下面是一個使用 Grunt 的例子:

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

4、打包

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

前端構建工具

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

• 包管理: 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 前端工具的生態系統充滿著變數和競爭，且只有最好的工具才能存活下來。在不久的將來，我們的構建工具將具有更少（或沒有）的配置，更方便的定制化，更好的擴展性的和更好的構建速度。

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