概述

在 JavaScript 語言日漸強大的同時，與其配套的開發(fā)工具也蓬勃發(fā)展。現(xiàn)在的 Web 前端項目，早已不是寫幾個 HTML 頁面，加點 CSS 和 JS 就完事了。隨便一個實用的項目，可能都需要用到一些框架和第三方庫，以及相應(yīng)的腳手架、依賴包管理、預(yù)編譯、構(gòu)建打包、壓縮合并等等工具。純手工完成這些任務(wù)，已經(jīng)幾乎不太可能了。

科學(xué)技術(shù)是第一生產(chǎn)力，而工具就是其中的一個體現(xiàn)。工欲善其事必先利其器，既然工具解放了人力，我們就應(yīng)該擁抱它們。本文總結(jié)了圍繞 JavaScript 的一系列工具，看看一個常見的項目到底需要用到哪些工具。

靜態(tài)類型檢查

JavaScript 本身是一門動態(tài)腳本語言，是弱類型的。也就是說，沒有編譯階段的數(shù)據(jù)類型檢查，只能在運行時確定類型。好處是比較靈活，簡單易學(xué)，代碼量也比較少。缺點也是明顯的，就是稍不注意容易出 bug，特別是大型項目，如果沒有開發(fā)規(guī)范，任由開發(fā)人員自由發(fā)揮，維護起來簡直就是災(zāi)難。為了彌補這個缺陷，一些自帶類型系統(tǒng)、可轉(zhuǎn)譯成 JavaScript 的語言出現(xiàn)了。

Flow：Facebook 出品，用 OCaml 寫的 JavaScript 靜態(tài)類型檢查系統(tǒng)。支持類型系統(tǒng)、類型標(biāo)注，可定義 library，提供代碼 lint 等。Vue.js 2.x 就是用 Flow 寫的。不過，Vue 3.0 改用另一種靜態(tài)類型語言了，那就是 TypeScript。

TypeScript：TypeScript 是微軟開發(fā)的語言，是 JavaScript 的超集，能夠編譯成 JavaScript。現(xiàn)在 TypeScript 越來越流行，獲得了大量項目的認(rèn)可。

代碼風(fēng)格檢查（Linter）

由于JavaScript 動態(tài)語言的特性，在寫法上過于靈活，往往導(dǎo)致多人協(xié)作的項目代碼風(fēng)格各異，給維護和擴展帶來不少麻煩。另外，部分語言特性容易導(dǎo)致 bug，最佳實踐里通常不推薦使用。因此，代碼 Lint 工具就派上用場了。它不但可以檢查代碼書寫格式，還可以檢查出引用未定義的變量等低級錯誤。

曾經(jīng)出現(xiàn)過很多種 Lint 工具，比如 JSLint、JSHint、StandardJS、JSCS 等等，現(xiàn)在有大一統(tǒng)的趨勢，基本都用 ESLint 了。

剛開始用 Lint 工具的時候可能會不適應(yīng)，因為限制太多，動不動就警告和報錯。但從長遠(yuǎn)來看，JavaScript 項目引入 Linter 還是有必要的。

包管理器

JavaScript 之所以能夠遍地開花，很大程度是因為技術(shù)生態(tài)非常繁榮，各種第三方庫應(yīng)有盡有。如此龐大的第三方庫集合，勢必需要一個管理平臺，負(fù)責(zé)第三方包的托管、版本管理、下載安裝和依賴管理等。

npm：JavaScript 包管理器的集大成者，目前最主流的工具。 基于 Node.js，包含網(wǎng)站和 CLI，上面的包總數(shù)超過 100萬，基本涵蓋了 JavaScript 項目所需的方方面面。

yarn：2016 年 Facebook 推出的包管理器，跟 npm registry 兼容，主打 CLI 的快速、安全和確定性。

bower：曾經(jīng)比較流行，用于管理前端的 JavaScript 包，因為當(dāng)初 npm 只支持 node 環(huán)境的包管理。隨著 npm 和 yarn 同時支持 node 和瀏覽器端的包管理，bower 也逐漸淡出歷史了。

pnpm：通過硬鏈接（hard links）的方式在硬盤上對某個版本的模塊只保存一份，可以在多個項目之間共用，從而節(jié)省了大量硬盤空間，順便也加快了模塊安裝速度。

模塊加載器

JavaScript 早期沒有語言層面的模塊化支持，導(dǎo)致大型項目的依賴管理非常不方便。變量名沖突、全局變量污染、模塊加載順序等問題比較突出。曾經(jīng)出現(xiàn)過各種模塊化方案，比如 CommonJS Modules (CJS)，Asynchronous Module Definition （AMD）和 Universal Module Definition (UMD)。從 2015 年開始，ES6 從語言層面支持了模塊化，即 ECMAScript Modules (ESM)。

除了上述常見的 JavaScript 模塊格式，還有像 System.register或全局模塊，以及一些非 JavaScript 模塊，比如 JSON modules，CSS modules，Web Assembly 等。

模塊加載器就是加載和處理上面各種類型模塊代碼的工具，有同步和異步、靜態(tài)和動態(tài)之分。通常，一個模塊放在一個單獨的文件里，通過一些指令來導(dǎo)入。當(dāng)一個項目有幾十上百個模塊的時候，如何保證它們的加載執(zhí)行先后順序就是個問題。不用擔(dān)心，模塊加載器會幫你處理好依賴關(guān)系。

RequireJS：實現(xiàn)了 AMD 模塊加載，主要用于瀏覽器端，也可以在 Node 里使用。

SystemJS：一個動態(tài)模塊加載器，可以加載所有類型的 JavaScript 模塊，甚至包括非 JavaScript 模塊，可用于瀏覽器和 Node。

StealJS：可以加載 ESM，ADM 和 CJS 格式的模塊。

ES Module Loader：瀏覽器實現(xiàn)的模塊加載器，Node.js 里加上 --experimental-modules標(biāo)志也能使用。

以上模塊加載器是在運行時加載和執(zhí)行代碼的。不要跟構(gòu)建工具里的各種 loader 混淆，那些是在構(gòu)建時進行預(yù)處理的工具，只是做一些格式轉(zhuǎn)換。

打包工具

一個實際的生產(chǎn)項目，通常不是把源碼直接發(fā)布到服務(wù)器上。而是通過一些工具對各種模塊和靜態(tài)資源進行整合處理，最終生成的代碼可能跟源碼完全不一樣了。這就是打包工具的作用。比較常見的打包工具有：

Webpack：可以說是最流行的打包器，幾乎是大部分項目的標(biāo)配。它本身只能識別 JavaScript 和 JSON 文件，但是它的架構(gòu)設(shè)計提供了無限的可能，通過各種 loader 可以處理任意類型的資源，通過插件可以優(yōu)化打包結(jié)果和進行資源管理、注入環(huán)境變量等。它的構(gòu)建目標(biāo)也可以根據(jù)平臺定制，比如瀏覽器、Node.js、web worker, Electron 等。

Rollup：也是一個優(yōu)秀的打包器，支持輸出 library 和 application。它最大的賣點就是默認(rèn)支持 ES 模塊，很早就實現(xiàn)了 tree-shaking 功能。同時也具備插件和 hook 功能，可定制化也比較好。

Parcel：工具界的后起之秀，號稱“零配置*的打包器，如果你曾經(jīng)被 Webpack 繁瑣的配置困擾過，那它可能會吸引你。

Browserify：應(yīng)用范圍稍窄的打包器，專門用于轉(zhuǎn)換 Node.js 包以便能在瀏覽器運行。它跟 Node.js 使用相同的模塊系統(tǒng)，有些模塊只用于 Node 平臺，通過它的轉(zhuǎn)換就可以在瀏覽器端使用了。它只能處理純 JavaScript 模塊，通常跟 Gulp 配合使用。

Metro：React Native 專用的打包器，通過一個入口文件和各種配置，最后打成包含所有代碼和依賴的單個 JavaScript 文件。

任務(wù)管理工具（Task Runner）

Task Runner 的作用是自動化執(zhí)行項目所需的各種重復(fù)性動作，比如：

CSS 預(yù)處理 (Less, Sass) CSS 自動添加新特性屬性前綴（Autoprefixer） 優(yōu)化圖片 合并、壓縮 JavaScript 文件 監(jiān)聽文件變化，自動執(zhí)行任務(wù)

比較主流的任務(wù)管理器是 Grunt 和 Gulp，Webpack 也算一個。

Grunt：命令行工具，通過精細(xì)化的配置和豐富的插件可以完成很多復(fù)雜的任務(wù)。

Gulp：跟 Grunt 不同，Gulp 采用流式管道組合多個任務(wù)，任務(wù)之間的臨時結(jié)果是放在內(nèi)存中的，執(zhí)行效率會高很多。

Webpack：又是你，Webpack。任務(wù)管理只是 Webpack 強大功能的一部分，通過不同的插件在構(gòu)建的不同階段執(zhí)行個性化的任務(wù)。

如果你覺得上面幾個任務(wù)管理器有點殺雞用牛刀，你也可以根據(jù)實際情況選用 bash 腳本，npm 腳本或者 Makefile 等實現(xiàn)一些簡單的任務(wù)管理。

轉(zhuǎn)譯器

JavaScript 轉(zhuǎn)譯器的作用是將非 JavaScript 語言（TypeScript，CoffeeScript，LiveScript 等）或不同版本的 JavaScript（ES6，ES7，ES8 等）翻譯成符合目標(biāo)平臺要求（兼容性、變量混淆、嚴(yán)格模式等）的等價代碼。

大部分轉(zhuǎn)譯器在處理源碼和代碼優(yōu)化的過程中都使用抽象語法樹（AST）作為中間格式。AST 將源碼逐步拆分解析成帶有元數(shù)據(jù)的樹形結(jié)構(gòu)：

Code --(parse)-->AST--(transform)-->AST--(generate)-->Code

Babel是目前主流的 JavaScript 轉(zhuǎn)譯器，它的工具鏈體系主要用于將 ES6 以上版本的 JavaScript 轉(zhuǎn)譯成向后兼容瀏覽器的代碼。Babel 可以轉(zhuǎn)換語法、提供目標(biāo)平臺缺失的特性支持、轉(zhuǎn)換源碼等。

有了 Babel，我們可以盡早用上新的語言特性，而不用擔(dān)心目標(biāo)瀏覽器是否支持。

構(gòu)建工具

構(gòu)建其實是個綜合概念，它包含了模塊打包、源碼轉(zhuǎn)譯、任務(wù)管理等多個步驟。其他語言和平臺有各種 Build 工具，比如 Make，Gradle，Ant，Maven，Rake 或 MSBuild 等。其中 Make 是最常見的通用構(gòu)建工具，通常用于 C 語言，但其實也可以用于構(gòu)建 JavaScript 項目。

對于 JavaScript 工具鏈來說，構(gòu)建的目標(biāo)可能是 npm 包、網(wǎng)站、Node 服務(wù)器、RN 應(yīng)用、Electron 應(yīng)用等等。有些任務(wù)可用專門的工具完成，但構(gòu)建是個復(fù)雜的過程，通常需要綜合使用多個工具。

比如 Build 可以用 Buck，Bazel，Lerna 等工具同時管理多個模塊，實現(xiàn)增量 Build（只重新構(gòu)建有改動的模塊，提高效率）。任務(wù)管理使用 Grunt 和 Gulp，模塊打包用 Webpack、Rollup、Parcel、Browserify 等。

調(diào)試工具

調(diào)試器在開發(fā)過程中必不可少，它可以在 Node.js 和瀏覽器中跟蹤查看運行中的代碼。通常會提供斷點、單步執(zhí)行、監(jiān)視變量、查看內(nèi)存和 CPU 使用情況等功能。

Chrome DevTools：Chrome 瀏覽器自帶的開發(fā)者工具，是目前瀏覽器開發(fā)工具里最好用的（沒有之一）。它的功能之強大，用法之多可以寫本書了。

node-inspector：早期用于調(diào)試 Node.js 代碼的工具，現(xiàn)在基本不用了，因為 Node.js 已經(jīng)內(nèi)置了基于 DevTools 的調(diào)試器。

VS Code：又一調(diào)試神器，內(nèi)置 Node.js 調(diào)試器，還能調(diào)試 TypeScript 和其他能轉(zhuǎn)譯成 JavaScript 的語言。

Node 進程管理器

Node 進程管理器用于管理運行中的 Node 應(yīng)用程序。提供高可用、自動重啟、文件監(jiān)控、性能和資源監(jiān)控和集群等功能。

Forever：顧名思義，它的作用是保持 Node.js 程序永遠(yuǎn)運行。它是一個簡單的命令行工具，對小型 Node.js 應(yīng)用比較方便。

PM2：用于生產(chǎn)環(huán)境的 Node.js 進程管理工具，內(nèi)置負(fù)載均衡、自動重啟和日志、監(jiān)控和集群管理等功能。

StrongLoop Process Manager(Strong-PM)：跟 PM2 差不多，也可用于生產(chǎn)環(huán)境的 Node.js 進程管理，有多主機部署功能。

另外，SystemD 是 Linux 系統(tǒng)里的默認(rèn)進程管理器，可用它把 Node.js 應(yīng)用作為服務(wù)運行。

項目腳手架

隨著項目復(fù)雜度的提升，創(chuàng)建新項目的步驟也變得越來越繁瑣，可能需要重復(fù)大量的配置工作。這個時候就需要項目腳手架了。很多框架都提供了腳手架工具，比如 Vue.js 有 Vue CLI，Angular 有 Angular CLI，React 有 create-react-app 等。也有通用的腳手架，Yeoman 就是最流行的一個。

快速創(chuàng)建新項目 創(chuàng)建模塊或 package 啟動新服務(wù) 統(tǒng)一代碼風(fēng)格、最佳實踐等 項目推廣，讓用戶快速上手示例 app

以上就是淺談JavaScript工具鏈不完全指南的詳細(xì)內(nèi)容，更多關(guān)于JS工具鏈不完全指南的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！