JavaScript框架、庫(kù)和工具的數(shù)量似乎已經(jīng)超過(guò)了開(kāi)發(fā)人員的數(shù)量。 2018年底，GitHub上的快速搜索顯示了230萬(wàn)個(gè)JavaScript項(xiàng)目。 npm已成為全球最大的模塊系統(tǒng)，在npmjs.com上擁有70萬(wàn)個(gè)可用軟件包，每月下載量達(dá)數(shù)十億次。

2018年12月6日：文章已更新，以反映JavaScript生態(tài)系統(tǒng)的當(dāng)前狀態(tài)。今年的更新由Sencha贊助。感謝您支持使SitePoint成為可能的合作夥伴！

本文旨在解釋最流行的客戶端JavaScript框架、庫(kù)和工具的基本知識(shí)和基本區(qū)別。它們是否適合您是另一個(gè)問(wèn)題。選擇一個(gè)並堅(jiān)持一段時(shí)間。請(qǐng)注意，無(wú)論您選擇什麼，您最喜歡的選項(xiàng)都將被更“好”的東西所取代！

li.toc-h3 { margin-left: 20px; } li.toc-h4 { margin-left: 40px; } 關(guān)鍵要點(diǎn)

• 由於其高效的虛擬DOM和基於組件的架構(gòu)，React仍然是構(gòu)建用戶界面（特別是單頁(yè)應(yīng)用程序）的首選。
• Vue.js因其簡(jiǎn)單性和靈活性而受到好評(píng)，使其成為尋求易於與其他庫(kù)集成的漸進(jìn)式框架的開(kāi)發(fā)人員的絕佳選擇。
• Angular提供了一個(gè)全面的框架解決方案，尤其是在其最新版本（2 ）中，它得到了Google的大力支持，並專注於TypeScript，這吸引了熟悉靜態(tài)類型語(yǔ)言的開(kāi)發(fā)人員。
• jQuery儘管炒作有所下降，但在許多項(xiàng)目中仍然具有相關(guān)性和廣泛使用，因?yàn)樗嘴妒褂脕K且在各種Web平臺(tái)上具有廣泛的兼容性。
• Webpack和ESLint被強(qiáng)調(diào)為現(xiàn)代JavaScript開(kāi)發(fā)中必不可少的工具，分別用於模塊捆綁和代碼質(zhì)量保證。
• Sencha Ext JS被認(rèn)為是一個(gè)強(qiáng)大的企業(yè)級(jí)框架，它提供了廣泛的UI組件和工具，並具有強(qiáng)大的商業(yè)支持和培訓(xùn)選項(xiàng)。

目錄

• 目錄
• 棘手的術(shù)語(yǔ)
• 庫(kù)
• 框架
• 工具
• 不要給我貼標(biāo)籤！
• JavaScript框架和庫(kù)
• jQuery
• React
• AngularJS 1.x
• Angular 2 （現(xiàn)在是7.x）
• Vue.js
• Sencha Ext JS
• Lodash和Underscore
• Backbone.js
• Ember.js
• Knockout.js
• 值得關(guān)注的項(xiàng)目
• 工具：通用任務(wù)運(yùn)行器
• Webpack
• Gulp.js
• npm
• Grunt
• 工具：模塊捆綁器
• Browserify
• RequireJS
• 工具：代碼風(fēng)格檢查
• ESLint
• JSHint
• JSLint
• 工具：測(cè)試套件
• Jest
• Mocha
• Jasmine
• 工具：其他工具
• 總結(jié)和建議
• 評(píng)論

請(qǐng)?jiān)陂喿x本文之前接受以下條款和條件！ ……

• JavaScript環(huán)境每天都在變化。這篇文章發(fā)布的那一刻就會(huì)過(guò)時(shí)！
• 我所說(shuō)的“最佳”是指“最流行/使用/炒作的通用項(xiàng)目”。所有項(xiàng)目都有免費(fèi)/開(kāi)源選項(xiàng)，但列表中可能不包含您最喜歡的項(xiàng)目。
• 已停止的項(xiàng)目（例如YUI）未包含在內(nèi)，即使它們?cè)诰W(wǎng)絡(luò)上的使用率仍然很高。
• 只參考客戶端項(xiàng)目。有些可以在服務(wù)器端工作，但列表不包括純服務(wù)器端框架，例如Express.js或Hapi。
• 有關(guān)每個(gè)項(xiàng)目的資料有意簡(jiǎn)短，以便提供進(jìn)一步研究的概述。
• 每個(gè)項(xiàng)目都提供一個(gè)使用流行度指標(biāo)，但統(tǒng)計(jì)數(shù)據(jù)眾所周知難以整理，而且可能具有誤導(dǎo)性。
• 我有偏見(jiàn)。你也有偏見(jiàn)。其他人也有偏見(jiàn)！我沒(méi)有嘗試過(guò)這裡的每個(gè)工具，並將聲明我最喜歡的工具，但您應(yīng)該根據(jù)您的需求做出自己的評(píng)估。
• 我和SitePoint都不對(duì)您做出的任何災(zāi)難性決定負(fù)責(zé)！

棘手的術(shù)語(yǔ)

術(shù)語(yǔ)“框架”、“庫(kù)”和“工具”在不同的時(shí)間對(duì)不同的人可能有不同的含義，具體取決於上下文。此處使用的通用定義：

庫(kù)

庫(kù)是有組織的有用功能集合。典型的庫(kù)可能包括處理字符串、日期、HTML DOM元素、事件、cookie、動(dòng)畫(huà)、網(wǎng)絡(luò)請(qǐng)求等的函數(shù)。每個(gè)函數(shù)都會(huì)向調(diào)用應(yīng)用程序返回值，您可以根據(jù)自己的選擇實(shí)現(xiàn)這些值。可以把它想像成一系列汽車組件：您可以隨意使用任何組件來(lái)幫助構(gòu)建一輛能正常行駛的汽車，但您必須自己構(gòu)建發(fā)動(dòng)機(jī)。

庫(kù)通常提供更高層次的抽象，從而簡(jiǎn)化了實(shí)現(xiàn)細(xì)節(jié)和不一致之處。例如，可以使用XMLHttpRequest API實(shí)現(xiàn)Ajax，但這需要幾行代碼，並且瀏覽器之間存在細(xì)微差別。庫(kù)可以提供更簡(jiǎn)單的ajax()函數(shù)，因此您可以專注於更高級(jí)別的業(yè)務(wù)邏輯。

庫(kù)可以將開(kāi)發(fā)時(shí)間縮短20%，因?yàn)槟槐負(fù)?dān)心更精細(xì)的細(xì)節(jié)。缺點(diǎn)：

• 庫(kù)中的錯(cuò)誤可能難以查找和修復(fù)
• 開(kāi)發(fā)團(tuán)隊(duì)無(wú)法保證會(huì)快速發(fā)布補(bǔ)丁
• 補(bǔ)丁可能會(huì)更改API並導(dǎo)致代碼發(fā)生重大更改。

框架

框架是應(yīng)用程序的骨架。它要求您以特定方式處理軟件設(shè)計(jì)，並在某些點(diǎn)插入您自己的邏輯。通常會(huì)為您提供事件、存儲(chǔ)和數(shù)據(jù)綁定等功能。使用汽車的類比，框架提供了一個(gè)工作的底盤、車身和發(fā)動(dòng)機(jī)。您可以添加、刪除或調(diào)整某些組件，前提是車輛仍然可以運(yùn)行。

框架通常比庫(kù)提供更高層次的抽象，並且可以幫助您快速構(gòu)建項(xiàng)目的最初80%。缺點(diǎn)：

• 如果您的應(yīng)用程序超出了框架的範(fàn)圍，那麼最後的20%可能會(huì)很困難——如果不是不可能的話
• 框架更新或遷移可能很困難
• 核心框架代碼和概念很少能很好地適應(yīng)時(shí)代。開(kāi)發(fā)人員總是會(huì)發(fā)現(xiàn)一種更好的方法來(lái)做同樣的事情。

工具

工具可以輔助開(kāi)發(fā)，但不是項(xiàng)目不可或缺的一部分。工具包括構(gòu)建系統(tǒng)、編譯器、轉(zhuǎn)譯器、代碼壓縮器、圖像壓縮器、部署機(jī)制等等。

工具應(yīng)該提供更簡(jiǎn)單的開(kāi)發(fā)過(guò)程。例如，許多程序員更喜歡Sass而不是CSS，因?yàn)樗峁┝舜a分離、嵌套、渲染時(shí)變量、循環(huán)和函數(shù)。瀏覽器不理解Sass/SCSS語(yǔ)法，因此必須在測(cè)試和部署之前使用合適的工具將代碼編譯為CSS。

不要給我貼標(biāo)籤！

庫(kù)、框架和工具之間的區(qū)別很少明確?？蚣芸赡馨瑤?kù)。庫(kù)可以實(shí)現(xiàn)類似框架的方法。工具對(duì)於兩者都可能至關(guān)重要。我已經(jīng)嘗試對(duì)每個(gè)項(xiàng)目進(jìn)行標(biāo)記，但范圍可能會(huì)有所不同。

如果這聽(tīng)起來(lái)太複雜，您可以考慮編寫(xiě)原生JavaScript。這很好，但是您最終會(huì)編寫(xiě)自己的庫(kù)和/或框架代碼，這些代碼必須維護(hù)。 JavaScript本身是對(duì)瀏覽器和操作系統(tǒng)抽象之上的抽象！

JavaScript框架和庫(kù)

按使用/流行度/炒作的近似順序排列的項(xiàng)目……

jQuery

jQuery 描述 type 庫(kù)website jquery.com repository github. com/jquery/jquery GitHub stars 50,000 當(dāng)前版本3.3.1 開(kāi)發(fā)者jQuery團(tuán)隊(duì)發(fā)布日期2006年8月典型大小30kb min 典型用途通用用途使用率所有網(wǎng)站的73.5% jQuery仍然是有史以來(lái)使用最廣泛的JavaScript庫(kù)，並與WordPress、ASP.NET和其他一些框架一起分發(fā)。它通過(guò)將CSS選擇器引入DOM節(jié)點(diǎn)檢索以及鏈接來(lái)應(yīng)用事件處理程序、動(dòng)畫(huà)和Ajax調(diào)用，從而徹底改變了客戶端開(kāi)發(fā)。

近年來(lái)，jQuery已逐漸不受開(kāi)發(fā)人員青睞，但使用率仍然很高。對(duì)於需要少量JavaScript功能的項(xiàng)目，它仍然是一個(gè)可行的選擇。

優(yōu)點(diǎn)：

• 分發(fā)大小小
• 學(xué)習(xí)曲線平緩，大量在線幫助
• 簡(jiǎn)潔的語(yǔ)法
• 易於擴(kuò)展

缺點(diǎn)：

• 為原生API增加了速度開(kāi)銷
• 現(xiàn)在瀏覽器兼容性有所提高，因此不太重要了
• 使用率趨於平穩(wěn)
• 行業(yè)對(duì)不必要使用的某些抵制。

React

React 描述 type 庫(kù)website facebook.github.io/ react/ repository github.com/facebook/react GitHub stars 115,000 當(dāng)前版本16.6.3 開(kāi)發(fā)者Facebook和貢獻(xiàn)者發(fā)布日期2013年3月典型大小21kb min 典型用途單頁(yè)應(yīng)用程序使用率低可能是過(guò)去幾年中討論最多的庫(kù)，React聲稱是一個(gè)用於構(gòu)建用戶界面的JavaScript庫(kù)。它專注於模型-視圖-控制器（MVC）開(kāi)發(fā)中的“視圖”部分，並且可以輕鬆創(chuàng)建保留狀態(tài)的UI組件。它是首批實(shí)現(xiàn)虛擬DOM的庫(kù)之一；內(nèi)存中的結(jié)構(gòu)計(jì)算差異並有效地更新頁(yè)面。

React的使用率在統(tǒng)計(jì)數(shù)據(jù)中似乎很低，這可能是因?yàn)樗渺稇?yīng)用程序而不是網(wǎng)站。近70%的開(kāi)發(fā)人員聲稱他們有一些使用該庫(kù)的經(jīng)驗(yàn)。

優(yōu)點(diǎn)：

• 小巧、高效、快速且靈活
• 簡(jiǎn)單的組件模型
• 良好的文檔和在線資源
• 服務(wù)器端渲染是可能的
• 仍然很流行並且發(fā)展迅速
• 許多工作都為React開(kāi)發(fā)人員做廣告

缺點(diǎn)：

• 需要學(xué)習(xí)新的概念和語(yǔ)法
• 構(gòu)建工具是必不可少的
• 可能需要其他庫(kù)或框架來(lái)提供模型和控制器方面
• 可能與修改DOM的代碼和其他庫(kù)不兼容

AngularJS 1.x

AngularJS 描述 type 框架website angularjs.org repository github. com/angular/angular.js GitHub stars 60,000 當(dāng)前版本1.7.5 開(kāi)發(fā)者Google 發(fā)布日期2010年10月典型大小144kb 典型用途單頁(yè)應(yīng)用程序使用率低Angular是此列表中出現(xiàn)的第一個(gè)框架——或MVC應(yīng)用程序框架。最流行的版本仍然是1.x版本，它通過(guò)雙向數(shù)據(jù)綁定擴(kuò)展了HTML，同時(shí)將DOM操作與應(yīng)用程序邏輯分離。

儘管發(fā)布了2.0版（現(xiàn)在是4.0版?。獳ngular 1.x仍在開(kāi)發(fā)中。困惑？見(jiàn)下文……

優(yōu)點(diǎn)：

• 幾家大型公司採(cǎi)用的一種流行框架
• 創(chuàng)建現(xiàn)代Web應(yīng)用程序的單一解決方案
• 是“標(biāo)準(zhǔn)”MEAN堆棧（MongoDB、Express.JS、AngularJS、NodeJS）的一部分，因此有許多文章和教程可用

缺點(diǎn)：

• 比其他替代方案的學(xué)習(xí)曲線更陡峭
• 代碼庫(kù)龐大
• 無(wú)法升級(jí)到Angular 2.x
• 儘管是Google項(xiàng)目，但Google似乎沒(méi)有使用它？

Angular 2 （現(xiàn)在是7.x）

Angular 描述 type 框架website angular.io repository github. com/angular/angular GitHub stars 43,000 當(dāng)前版本7.1 開(kāi)發(fā)者Google 發(fā)布日期2016年9月典型大小450kb min 典型用途單頁(yè)應(yīng)用程序使用率低Angular 2.0於2016年9月發(fā)布。這是一個(gè)完整的重寫(xiě)，它引入了使用TypeScript（編譯為JavaScript）創(chuàng)建的模塊化組件模型。為了增加混淆，4.0版於2017年3月發(fā)布（跳過(guò)了v3以避免語(yǔ)義版本問(wèn)題）。

Angular 2 與v1完全不同。兩者都不兼容——也許Google應(yīng)該為該項(xiàng)目起一個(gè)不同的名字？ ！

優(yōu)點(diǎn)：

• 創(chuàng)建現(xiàn)代Web應(yīng)用程序的單一解決方案
• 仍然是MEAN堆棧的一部分，儘管可用的Angular 2 教程較少
• 對(duì)於熟悉靜態(tài)類型語(yǔ)言（如C#和Java）的人來(lái)說(shuō)，TypeScript提供了一些優(yōu)勢(shì)。

缺點(diǎn)：

• 比其他替代方案的學(xué)習(xí)曲線更陡峭
• 代碼庫(kù)龐大
• 無(wú)法從Angular 1.x升級(jí)
• 與1.x相比，Angular 2.x的採(cǎi)用率相對(duì)較低
• 儘管是Google項(xiàng)目，但Google似乎沒(méi)有使用它？

Vue.js

Vue.js 描述 type 框架website vuejs.org repository github.com/vuejs/vue GitHub stars 120,000 當(dāng)前版本2.5.17 開(kāi)發(fā)者Evan You 發(fā)布日期2014年2月典型大小19kb min 典型用途組件和單頁(yè)應(yīng)用程序使用率低Vue.js是一個(gè)輕量級(jí)的漸進(jìn)式框架，用於構(gòu)建用戶界面。核心提供了類似React的虛擬DOM驅(qū)動(dòng)的視圖層，可以與其他庫(kù)集成，但它也能夠驅(qū)動(dòng)單頁(yè)應(yīng)用程序。該框架由Evan You創(chuàng)建，他之前曾在AngularJS工作，但希望提取他喜歡的部分。

Vue.js使用HTML模板語(yǔ)法將DOM綁定到實(shí)例數(shù)據(jù)。當(dāng)數(shù)據(jù)更改時(shí)，模型是更新視圖的普通JavaScript對(duì)象。其他工具提供用於腳手架、路由、狀態(tài)管理、動(dòng)畫(huà)等的工具。

優(yōu)點(diǎn)：

• 快速採(cǎi)用和日益普及
• 易於上手，開(kāi)發(fā)人員滿意度高
• 輕量級(jí)、依賴性小、性能好

缺點(diǎn)：

• 可能被React所掩蓋
• 對(duì)單個(gè)開(kāi)發(fā)人員的更新有所依賴
• 資源少於替代方案

Sencha Ext JS

Ext JS 描述 type 框架和組件庫(kù)website sencha. com/products/extjs/ 當(dāng)前版本6.6.0 開(kāi)發(fā)者Sencha 發(fā)布日期2007年12月典型大小取決於需求：85 – 500kb 典型用途組件和單頁(yè)應(yīng)用程序使用率低Ext JS是從YUI-Ext發(fā)展而來(lái)的，在這個(gè)列表中擁有最長(zhǎng)的歷史之一。雖然它最出名的是其廣泛的可配置、可訪問(wèn)的跨瀏覽器UI組件和數(shù)據(jù)可視化工具，但Ext JS還提供了一個(gè)用於構(gòu)建完整應(yīng)用程序的框架?；蛘?，您可以將組件庫(kù)與React或Angular一起使用。

Ext JS是此處唯一提供商業(yè)培訓(xùn)和支持的框架。還可以選擇讓Sencha團(tuán)隊(duì)幫助審查您的代碼、自動(dòng)化測(cè)試以及遷移到其他平臺(tái)。

優(yōu)點(diǎn)：

• 廣泛的可用的組件
• 包含創(chuàng)建Web和移動(dòng)應(yīng)用程序所需的一切
• 腳本自定義、設(shè)計(jì)工具和快速原型
• 提供用於直觀構(gòu)建和設(shè)置樣式的Web應(yīng)用程序的工具
• 商業(yè)支持和優(yōu)秀的文檔
• 30天免費(fèi)試用版和適用於小型應(yīng)用程序的社區(qū)版（每年收入低於10,000美元）

缺點(diǎn)：

• 截至目前，與React和Angular以外的框架的集成可能不切實(shí)際——請(qǐng)參閱Ext JS 7的路線圖計(jì)劃
• 深度自定義UI更改可能很困難

Lodash和Underscore

Lodash 描述 type 庫(kù)website lodash.com/ repository github .com/lodash/lodash/ GitHub stars 35,000 當(dāng)前版本4.17.11 開(kāi)發(fā)者John-David Dalton 發(fā)布日期2012年4月典型大小4kb – 24kb min 典型用途通用用途使用率低 Underscore 描述 type 庫(kù)website underscorejs.org/ repository github.com/jashkenas/underscore GitHub stars 24,000 當(dāng)前版本1.8. 3 開(kāi)發(fā)者Jeremy Ashkenas 發(fā)布日期2009年10月典型大小6kb min 典型用途通用用途使用率低本節(jié)將Lodash和Underscore組合在一起，因?yàn)樗鼈兲峁┝藬?shù)百個(gè)功能性JavaScript實(shí)用程序，以補(bǔ)充本機(jī)字符串、數(shù)字、數(shù)組和其他原始對(duì)象方法。存在一些重疊，因此您不太可能在一個(gè)項(xiàng)目中同時(shí)需要這兩個(gè)庫(kù)。

客戶端使用率較低，但任一庫(kù)都可以用於服務(wù)器端Node.js應(yīng)用程序。

優(yōu)點(diǎn)：

• 小巧簡(jiǎn)單
• 易於學(xué)習(xí)，文檔良好
• 與大多數(shù)庫(kù)和框架兼容
• 不擴(kuò)展內(nèi)置對(duì)象
• 可以在客戶端或服務(wù)器端使用

缺點(diǎn)：

• ES2015及更高版本的JavaScript中提供了一些方法。

Backbone.js

Backbone.js 描述 type 框架website backbonejs.org repository github.com/jashkenas/backbone/ GitHub stars 37,000 當(dāng)前版本1.3.3 開(kāi)發(fā)者Jeremy Ashkenas 發(fā)布日期2010年10月典型大小8kb min 典型用途單頁(yè)應(yīng)用程序使用率低Backbone.js是最早提供服務(wù)器端框架中常見(jiàn)的MVC結(jié)構(gòu)的客戶端選項(xiàng)之一。它唯一的依賴項(xiàng)是Underscore.js，該庫(kù)由同一位開(kāi)發(fā)人員創(chuàng)建。

Backbone.js聲稱是一個(gè)庫(kù)，因?yàn)樗梢耘c其他項(xiàng)目集成。我懷疑大多數(shù)開(kāi)發(fā)人員認(rèn)為它是一個(gè)框架，儘管它不如其他一些框架那麼武斷。

優(yōu)點(diǎn)：

• 小巧、輕量級(jí)且不太複雜
• 不向HTML添加邏輯
• 優(yōu)秀的文檔
• 已被許多應(yīng)用程序採(cǎi)用，包括Trello、WordPress.com、LinkedIn和Groupon

缺點(diǎn)：

• 比AngularJS等替代方案的抽象級(jí)別更低（但這可以被認(rèn)為是一個(gè)優(yōu)勢(shì)）
• 需要其他組件來(lái)實(shí)現(xiàn)諸如數(shù)據(jù)綁定之類的功能
• 最近的框架已經(jīng)遠(yuǎn)離MVC架構(gòu)

Ember.js

Ember.js 描述 type 框架website emberjs.com repository github.com/emberjs/ember.js GitHub stars 20,000 當(dāng)前版本3.6.0 開(kāi)發(fā)者Ember團(tuán)隊(duì)發(fā)布日期2011年12月典型大小95kb min 典型用途單頁(yè)應(yīng)用程序使用率低Ember.js是基於模型-視圖-視圖模型（MVVM）模式的較大武斷框架之一。它在一個(gè)包中實(shí)現(xiàn)了模板、數(shù)據(jù)綁定和庫(kù)。對(duì)於那些有Ruby on Rails經(jīng)驗(yàn)的人來(lái)說(shuō)，約定優(yōu)於配置的概念會(huì)立即熟悉。

優(yōu)點(diǎn)：

• 為客戶端應(yīng)用程序提供單一解決方案
• 開(kāi)發(fā)人員可以立即提高生產(chǎn)力——它使用jQuery
• 良好的向後兼容性和升級(jí)選項(xiàng)
• 採(cǎi)用了現(xiàn)代Web開(kāi)發(fā)標(biāo)準(zhǔn)

缺點(diǎn)：

• 分發(fā)文件較大
• 與其他正在轉(zhuǎn)向更小組件結(jié)構(gòu)的框架相比，它被認(rèn)為是整體式的
• 學(xué)習(xí)曲線陡峭——這是Ember的方式，或者根本沒(méi)有方式

Knockout.js

Knockout.js 描述 type 框架website knockoutjs.com repository github.com/knockout/knockout GitHub stars 9,000 當(dāng)前版本3.5.0 開(kāi)發(fā)者Steve Sanderson 發(fā)布日期2010年7月典型大小59kb min 典型用途單頁(yè)應(yīng)用程序使用率低Knockout.js是較舊的MVVM框架之一，它使用觀察者來(lái)確保UI與底層數(shù)據(jù)保持同步。它具有模板和依賴項(xiàng)跟蹤功能。

優(yōu)點(diǎn)：

• 小巧輕便，沒(méi)有依賴項(xiàng)
• 優(yōu)秀的瀏覽器支持，可追溯到IE6
• 優(yōu)秀的文檔

缺點(diǎn)：

• 大型項(xiàng)目可能會(huì)變得複雜
• 開(kāi)發(fā)速度減慢
• 使用率似乎正在下降

值得關(guān)注的項(xiàng)目

渴望了解更多？以下項(xiàng)目不太流行，但值得考慮：

• Polymer——一個(gè)啟用HTML5 Web組件跨瀏覽器支持的庫(kù)
• Meteor——一個(gè)用於Web應(yīng)用程序的全棧平臺(tái)。
• Aurelia——一個(gè)輕量級(jí)、跨平臺(tái)的框架
• Svelte——一個(gè)相當(dāng)新的項(xiàng)目，它將框架源代碼轉(zhuǎn)換為類似原生的JavaScript
• Conditioner.js——一個(gè)新的庫(kù)，它根據(jù)狀態(tài)自動(dòng)加載和卸載模塊。

工具：通用任務(wù)運(yùn)行器

構(gòu)建工具自動(dòng)化各種Web開(kāi)發(fā)任務(wù)，例如預(yù)處理、編譯、模塊捆綁、圖像優(yōu)化、代碼壓縮、代碼風(fēng)格檢查和運(yùn)行測(cè)試。任務(wù)通常在一個(gè)可執(zhí)行包中一起管理。最流行的選項(xiàng)：

Webpack

Webpack 描述 website webpack.js.org repository github. com/webpack/webpack GitHub stars 45,000 當(dāng)前版本4.25.1 每週下載量400萬(wàn)Webpack支持所有流行的模塊選項(xiàng)，並且已成為React開(kāi)發(fā)的代名詞。儘管聲稱是一個(gè)模塊捆綁器，但Webpack可以用作通用任務(wù)運(yùn)行器?；禞avaScript對(duì)象的配置可能有點(diǎn)笨拙。生成器可用，但一些Webpack用戶已遷移到Parcel，以獲得更簡(jiǎn)單的配置和更快的編譯時(shí)間。

Gulp.js

Gulp.js 描述 website gulpjs.com repository github. com/gulpjs/gulp GitHub stars 30,000 當(dāng)前版本4.0.0（3.9.1仍在活躍） 每週下載量750,000 雖然它不是第一個(gè)任務(wù)運(yùn)行器，但Gulp很快就成為最流行的任務(wù)運(yùn)行器之一，也是我個(gè)人最喜歡的。 Gulp使用易於閱讀的JavaScript代碼，該代碼將源文件加載到流中，然後將數(shù)據(jù)通過(guò)各種插件傳遞，然後再將其輸出到構(gòu)建文件夾。它簡(jiǎn)單、快速且有趣，但開(kāi)發(fā)人員已遷移到Webpack。

npm

npm 描述 website npmjs.com repository github.com/ npm/npm GitHub stars 17,000 當(dāng)前版本6.4.1 每週下載量100萬(wàn)npm是Node.js包管理器，但其腳本工具可用於通用任務(wù)運(yùn)行。對(duì)於依賴項(xiàng)較少的簡(jiǎn)單項(xiàng)目，這是一個(gè)有吸引力的選擇。但是，更複雜的任務(wù)很快就會(huì)變得不切實(shí)際。

Grunt

Grunt 描述 website gruntjs.com repository github.com/ gruntjs/grunt GitHub stars 17,000 當(dāng)前版本1.0.3 每週下載量425,000 Grunt是最早實(shí)現(xiàn)大規(guī)模採(cǎi)用的JavaScript任務(wù)運(yùn)行器之一，但其速度和復(fù)雜的JSON配置導(dǎo)致了Gulp的興起。最糟糕的問(wèn)題已得到解決，Grunt仍然是一個(gè)流行的選擇。

工具：模塊捆綁器

管理多個(gè)JavaScript文件可能會(huì)變得很麻煩。除非您可以本機(jī)採(cǎi)用相對(duì)較新的ES6模塊導(dǎo)入語(yǔ)法，否則必須按適當(dāng)?shù)捻樞蚣虞d或連接瀏覽器中的JavaScript依賴項(xiàng)。如果您需要支持舊版瀏覽器（2018年之前發(fā)布的任何瀏覽器），可以使用模塊捆綁器，但對(duì)這些工具的需求會(huì)隨著時(shí)間的推移而減少。

Browserify

Browserify 描述 website browserify.org repository github.com/ browserify/browserify GitHub stars 12,000 當(dāng)前版本16.2.3 每週下載量480,000 Browserify支持Node.js使用的CommonJS模塊，將所有模塊編譯成單個(gè)瀏覽器兼容文件。

RequireJS

RequireJS 描述 website requirejs.org repository github.com/ requirejs/r.js GitHub stars 2,500 當(dāng)前版本2.3.6 每週下載量230,000 RequireJS最初是一個(gè)瀏覽器內(nèi)模塊加載器，儘管它也可以在Node.js中使用。它支持AMD語(yǔ)法。

工具：代碼風(fēng)格檢查

代碼風(fēng)格檢查分析您的代碼是否存在潛在錯(cuò)誤或與語(yǔ)法標(biāo)準(zhǔn)的偏差。您將永遠(yuǎn)不會(huì)錯(cuò)過(guò)右括號(hào)或未聲明的變量！

ESLint

ESLint 描述 website eslint.org repository github.com/ eslint/eslint GitHub stars 12,000 當(dāng)前版本5.9.0 每週下載量400萬(wàn)ESLint是最流行的代碼風(fēng)格檢查工具，大多數(shù)IDE、編輯器、捆綁器和任務(wù)運(yùn)行器都支持它。每個(gè)規(guī)則都是一個(gè)插件，因此可以根據(jù)您的喜好進(jìn)行配置。

JSHint

JSHint 描述 website jshint.com repository github.com/ jshint/jshint GitHub stars 8,000 當(dāng)前版本2.9.6 每週下載量390,000 一個(gè)靈活的JavaScript代碼風(fēng)格檢查器，它不如ESLint那麼可配置，但在真正的錯(cuò)誤和死板的語(yǔ)法要求之間取得了良好的平衡。

JSLint

JSLint 描述 website jslint.com repository github.com/ reid/node-jslint GitHub stars 8,000 當(dāng)前版本0.12.0 每週下載量11,500 最早的代碼風(fēng)格檢查器之一，它實(shí)現(xiàn)了一套嚴(yán)格的默認(rèn)規(guī)則。開(kāi)發(fā)速度已減慢，對(duì)於某些開(kāi)發(fā)人員來(lái)說(shuō)，它可能有點(diǎn)不妥協(xié)。

工具：測(cè)試套件

測(cè)試驅(qū)動(dòng)開(kāi)發(fā)要求您在開(kāi)始編寫(xiě)代碼之前編寫(xiě)代碼來(lái)測(cè)試您的代碼。歡迎您編寫(xiě)代碼來(lái)測(cè)試您的測(cè)試代碼！

有很多選項(xiàng)，包括Ava、Tape和Jasmine，但目前三個(gè)最流行的選項(xiàng)是……

Jest

Jest 描述 website https://www .php.cn/link/50be28d343081a44df25869ab1e4502f repository github.com/kof/node-qunit GitHub stars 21,000 當(dāng)前版本23.6.0 每週下載量200萬(wàn)來(lái)自Facebook的測(cè)試框架，由於其與React和Webpack的緊密聯(lián)繫而越來(lái)越受歡迎。

Mocha

Mocha 描述 website mochajs.org repository github.com/ mochajs/mocha GitHub stars 16,500 當(dāng)前版本5.2.0 每週下載量180萬(wàn)Mocha可以在Node.js和瀏覽器中運(yùn)行測(cè)試。它支持異步測(cè)試，並且通常與Chai配對(duì)使用，以便能夠以可讀的樣式表達(dá)測(cè)試代碼。多年來(lái)，它一直是最流行的選擇。

Jasmine

Jasmine 描述 website jasmine.github.io repository github. com/jasmine/jasmine-npm GitHub stars 300 當(dāng)前版本3.3.0 每週下載量750,000 Jasmine是一個(gè)行為驅(qū)動(dòng)測(cè)試套件，它可以自動(dòng)化測(cè)試您在瀏覽器中的UI和交互。

工具：其他工具

儘管我盡了最大努力，但我承認(rèn)並非每個(gè)人都喜歡JavaScript！ TypeScript、LiveScript和CoffeeScript等編譯器可以使您的開(kāi)發(fā)生活更愉快一些?；蛘撸紤]使用Babel將現(xiàn)代、簡(jiǎn)潔的ES2015源代碼轉(zhuǎn)換為跨瀏覽器兼容的ES5代碼。

有許多JavaScript驅(qū)動(dòng)的HTML模板引擎，包括Mustache、Handlebars、Pug（Jade）和EJS。我更喜歡保留JavaScript語(yǔ)法的輕量級(jí)選項(xiàng)，例如EJS和doT。

最後，為什麼編寫(xiě)您自己的文檔，當(dāng)您可以自動(dòng)化它時(shí)？兼容ES2015的文檔生成器包括ESDoc、JSDoc、YUIdoc、documentation.js和Transcription。

總結(jié)和建議

如果您遵循大眾的智慧，那麼目前的勢(shì)頭是在React後面，其他庫(kù)也在朝著類似的技術(shù)方向發(fā)展。這是一個(gè)安全的職業(yè)選擇，但您也應(yīng)該考慮Vue.js或與React兼容但更小的Preact。

整體式框架已不受歡迎，但是，如果您需要為大型項(xiàng)目提供嚴(yán)格的結(jié)構(gòu)，AngularJS仍然是一個(gè)流行的選擇。大多數(shù)開(kāi)發(fā)人員堅(jiān)持使用1.0版，但這可能是出於必要而不是選擇。從長(zhǎng)遠(yuǎn)來(lái)看，2 版可能是更安全的選擇，但您需要學(xué)習(xí)TypeScript。

對(duì)於希望同時(shí)擁有框架和預(yù)構(gòu)建的集成組件和工具（包括訪問(wèn)商業(yè)支持）的公司（小型企業(yè)到企業(yè)），Sencha的Ext JS是一個(gè)不錯(cuò)的選擇。 Ext JS還可以輕鬆地將其強(qiáng)大的組件庫(kù)與React和Angular集成，對(duì)於希望實(shí)現(xiàn)預(yù)構(gòu)建組件而不是自己構(gòu)建組件的開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)不錯(cuò)的選擇。

不要忽視jQuery。它並不時(shí)尚，很少在技術(shù)新聞中提及，但它正在積極開(kāi)發(fā)中，並且對(duì)於網(wǎng)站和應(yīng)用程序來(lái)說(shuō)綽綽有餘。 jQuery的學(xué)習(xí)曲線平緩，並且為全球許多開(kāi)發(fā)人員所理解。

如果您想冒險(xiǎn)，Svelte和Rawact等新的轉(zhuǎn)譯器選項(xiàng)會(huì)將框架代碼轉(zhuǎn)換為原生JavaScript?？蚣芤蕾図?xiàng)已刪除，代碼更小，運(yùn)行速度更快。

工具的選擇不太重要，並且可能因項(xiàng)目而異。大多數(shù)Webpack、Gulp或npm腳本。對(duì)於測(cè)試，您可以使用ESLint和Jest，但還有許多其他替代方案可以嘗試。

也就是說(shuō)，每個(gè)項(xiàng)目、團(tuán)隊(duì)和技能組合都是不同的。您只有有限的時(shí)間來(lái)進(jìn)行評(píng)估，因此使用您所知道的知識(shí)很誘人。這篇文章將收到評(píng)論，推薦FrameworkX，但是當(dāng)您有錘子時(shí)，一切看起來(lái)都像釘子。

最後，永遠(yuǎn)不要忘記庫(kù)、框架和工具是可選的！ 在過(guò)去十年中，JavaScript開(kāi)發(fā)發(fā)生了革命性的變化；我們從幾個(gè)基本的輔助庫(kù)發(fā)展到令人難以置信的選擇。很容易陷入複雜性不斷增加的陷阱，或者每隔幾個(gè)月就切換到最新的熱門框架。始終考慮原生JavaScript——尤其是在小型和個(gè)人項(xiàng)目中。您獲得的知識(shí)不會(huì)過(guò)時(shí)，並且在為其他項(xiàng)目評(píng)估框架時(shí)將變得非常寶貴。

我是否遺漏了、駁回了或未能讚揚(yáng)您最喜歡的JavaScript庫(kù)、框架和工具的優(yōu)勢(shì)？當(dāng)然，我做到了！ 歡迎評(píng)論……

關(guān)於頂級(jí)JavaScript框架、庫(kù)和工具的常見(jiàn)問(wèn)題

Angular和React的主要區(qū)別是什麼？

Angular和React都是流行的JavaScript框架，但它們有一些關(guān)鍵區(qū)別。由Google開(kāi)發(fā)的Angular是一個(gè)成熟的MVC框架，它提供了一套強(qiáng)大的功能來(lái)構(gòu)建複雜的應(yīng)用程序。它使用雙向數(shù)據(jù)綁定和真實(shí)DOM。另一方面，由Facebook開(kāi)發(fā)的React是一個(gè)用於構(gòu)建用戶界面的庫(kù)。它使用單向數(shù)據(jù)綁定和虛擬DOM，這使其在渲染大型列表和數(shù)據(jù)集時(shí)更快、更高效。

如何為我的項(xiàng)目選擇合適的JavaScript框架？

選擇合適的JavaScript框架取決於幾個(gè)因素。您應(yīng)該考慮項(xiàng)目的規(guī)模和復(fù)雜性、框架的學(xué)習(xí)曲線、社區(qū)規(guī)模和可用資源以及應(yīng)用程序的性能和可伸縮性需求。同樣重要的是要考慮框架的長(zhǎng)期可行性，因?yàn)槟Ｍx擇一個(gè)將來(lái)會(huì)繼續(xù)得到支持和更新的框架。

與其他JavaScript框架相比，使用Vue.js有哪些優(yōu)勢(shì)？

Vue.js以其簡(jiǎn)單易用而聞名。它有一個(gè)平緩的學(xué)習(xí)曲線，使其成為初學(xué)者的一個(gè)不錯(cuò)的選擇。它還具有靈活的架構(gòu)，允許您在輕量級(jí)、類似庫(kù)的設(shè)置或功能齊全的框架設(shè)置之間進(jìn)行選擇。 Vue.js還使用虛擬DOM，並提供高效的重新渲染和組件級(jí)緩存以實(shí)現(xiàn)快速性能。

Node.js在JavaScript開(kāi)發(fā)中的作用是什麼？

Node.js是一個(gè)運(yùn)行時(shí)環(huán)境，允許在服務(wù)器端運(yùn)行JavaScript。這意味著您可以使用JavaScript構(gòu)建應(yīng)用程序的前端和後端，從而提高開(kāi)發(fā)效率並簡(jiǎn)化代碼維護(hù)。 Node.js還擁有龐大的庫(kù)和工俱生態(tài)系統(tǒng)，並且以其高性能和可伸縮性而聞名。

在使用JavaScript框架時(shí)，學(xué)習(xí)TypeScript有多重要？

TypeScript是JavaScript的超集，它向語(yǔ)言添加了靜態(tài)類型。學(xué)習(xí)TypeScript來(lái)使用JavaScript框架並不是必需的，但它可能會(huì)有益。 TypeScript可以幫助在編譯時(shí)而不是運(yùn)行時(shí)捕獲錯(cuò)誤，從而產(chǎn)生更健壯的代碼。在處理大型代碼庫(kù)和團(tuán)隊(duì)時(shí)，它尤其有用。

使用Lodash之類的JavaScript庫(kù)有哪些好處？

Lodash是一個(gè)實(shí)用程序庫(kù)，它提供有用的方法來(lái)操作JavaScript中的數(shù)組、對(duì)象和其他數(shù)據(jù)類型。它可以幫助使您的代碼更簡(jiǎn)潔、更易讀和更高效。 Lodash方法也針對(duì)性能進(jìn)行了優(yōu)化，因此在某些情況下它們可能比本機(jī)JavaScript方法更快。

Ember.js與其他JavaScript框架相比如何？

Ember.js是一個(gè)功能齊全的框架，它提供了許多內(nèi)置功能，例如路由器和數(shù)據(jù)層。這可以使構(gòu)建複雜的應(yīng)用程序更容易，但這也意味著需要學(xué)習(xí)更多內(nèi)容。 Ember.js遵循約定優(yōu)於配置的原則，這可以加快開(kāi)發(fā)速度，但可能不如其他框架靈活。

Polymer庫(kù)的關(guān)鍵特性是什麼？

Polymer是由Google開(kāi)發(fā)的一個(gè)用於構(gòu)建Web組件的庫(kù)。它提供了一組用於創(chuàng)建自定義HTML元素、將CSS和JavaScript封裝在這些元素中以及使用數(shù)據(jù)綁定和事件處理的功能。 Polymer還支持單向和雙向數(shù)據(jù)綁定。

jQuery如何在現(xiàn)代JavaScript環(huán)境中發(fā)揮作用？

jQuery是一個(gè)簡(jiǎn)化HTML文檔遍歷、事件處理和動(dòng)畫(huà)的庫(kù)。雖然由於原生JavaScript的改進(jìn)和現(xiàn)代框架的興起，它不像以前那麼必要了，但jQuery仍然被廣泛使用，並且對(duì)於更簡(jiǎn)單的項(xiàng)目或維護(hù)遺留代碼來(lái)說(shuō)是一個(gè)不錯(cuò)的選擇。

一些值得關(guān)注的新興JavaScript框架和庫(kù)有哪些？

一些新興的JavaScript框架和庫(kù)包括Svelte，這是一個(gè)基於編譯器的框架，旨在提供更簡(jiǎn)單、更快速的開(kāi)發(fā)體驗(yàn)；Next.js，一個(gè)用於服務(wù)器端渲染React應(yīng)用程序的框架；以及Gatsby，一個(gè)基於React的靜態(tài)站點(diǎn)生成器。這些工具正在越來(lái)越受歡迎，並且將來(lái)可能會(huì)變得更重要。

以上是2019年最佳JavaScript框架，庫(kù)和工具的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！