七個(gè)可提高前端開發(fā)效率的工具及插件

　　前端已經(jīng)不是以前的樣子了，隨著React 18（服務(wù)器組件）和所有現(xiàn)代網(wǎng)絡(luò)堆棧的出現(xiàn)，前端開發(fā)真正意味著應(yīng)用開發(fā)。

　　我們開發(fā)網(wǎng)絡(luò)和本地應(yīng)用程序的方式變得更加模塊化、組件化、有組織，因此我們應(yīng)該減少對(duì)實(shí)現(xiàn)和配置的關(guān)注，而更多地關(guān)注應(yīng)用程序的創(chuàng)建和組成。

　　這個(gè)列表不會(huì)介紹那些你還沒(méi)聽說(shuō)過(guò)但會(huì)改變你日常生活的新的前沿工具，而會(huì)介紹那些會(huì)幫助加快前端開發(fā)速度的改變游戲規(guī)則的、很受歡迎的工具，使你成為一個(gè)更好的開發(fā)者——并獲得更多的空閑時(shí)間。

　　1. 比特--組件驅(qū)動(dòng)的10倍

　　事實(shí)上，現(xiàn)代的前端已經(jīng)是組件驅(qū)動(dòng)的?，F(xiàn)代應(yīng)用程序是用現(xiàn)代框架構(gòu)建的，而現(xiàn)代框架是以組件為中心的。

　　比特是一體化工具組件驅(qū)動(dòng)開發(fā)的下一代工具。與其構(gòu)建一個(gè)由許多組件組成的應(yīng)用程序，不如用Bit構(gòu)建獨(dú)立的組件，用它們來(lái)組成不同的應(yīng)用程序。每個(gè)組件都是獨(dú)立的，可以在任何地方運(yùn)行。

　　雖然Bit把你變成了組件創(chuàng)建和組合的大師，但Bit的云平臺(tái)幫助團(tuán)隊(duì)擴(kuò)展并共同構(gòu)建許多東西。

　　比特的開放源碼軟件工具是輕量級(jí)和高度可擴(kuò)展的。它用于開發(fā)和合成組件。它為開發(fā)和組合組件提供了一個(gè)簡(jiǎn)單而強(qiáng)大的工作空間，將任何 repo 變成一個(gè)智能的 monorepo，同時(shí)抽象掉開銷和配置。

　　它提供了很好的功能，如可重復(fù)使用的可定制的組件模板，漂亮的可視化組件文檔（有mdx等），獨(dú)立的單元測(cè)試，每個(gè)組件的版本管理和導(dǎo)出（推送/發(fā)布）等等。

　　而且，它有一個(gè)可視化的UI，使開發(fā)體驗(yàn)也很有趣！Bit的本地工作區(qū)UI中的一個(gè)非常基本的按鈕

　　比特的云平臺(tái)淘寶網(wǎng)是20多萬(wàn)開發(fā)者和一些世界上最好的團(tuán)隊(duì)的家，他們可以在這里托管和合作開發(fā)他們的組件。它為一個(gè) “開箱即用的組件市場(chǎng) ”配備了企業(yè)級(jí)功能，包括安全托管、搜索、注冊(cè)表等等。一個(gè)應(yīng)用程序只是一個(gè)組件圖。。.。。.用戶界面、鉤子、邏輯，甚至后端。

　　Bit是一個(gè)強(qiáng)大的基礎(chǔ)設(shè)施，它的模式轉(zhuǎn)變已經(jīng)在發(fā)生了。開始使用Bit的流行用例包括微前端（嘗試Bit與模塊聯(lián)盟?。?、 設(shè)計(jì)系統(tǒng)（在組件上進(jìn)行協(xié)作）、快速應(yīng)用開發(fā)（只需編譯組件）和產(chǎn)品團(tuán)隊(duì)的快速交付（升級(jí)組件，而不是應(yīng)用）。

• 　　模塊聯(lián)盟+比特=前端的下一次進(jìn)化
• 　　比特：模塊化網(wǎng)絡(luò)的平臺(tái)

　　2. GatsbyJS和NextJS - 最快的JAMStack網(wǎng)站

　　GatsbyJS和NextJS是JAMStack時(shí)代的兩個(gè)突出的靜態(tài)網(wǎng)站框架。在正確的用例中，使用這兩個(gè)選項(xiàng)之一可以大大加快新網(wǎng)站的開發(fā)速度，這要?dú)w功于現(xiàn)成的框架、豐富的模板和高度優(yōu)化的工具集，可以開始建設(shè)。

　　GatsbyJS是一個(gè)免費(fèi)的、開源的、基于React的框架，旨在幫助開發(fā)者建立高性能的網(wǎng)站和應(yīng)用程序。簡(jiǎn)單地說(shuō)，GatsbyJS是一個(gè)利用React的靜態(tài)網(wǎng)站生成器。事實(shí)上，它可以讓你部署靜態(tài)頁(yè)面（在編譯時(shí)獲取數(shù)據(jù)），這實(shí)際上是React應(yīng)用程序。隨著時(shí)間的推移，它在性能、速度和開發(fā)體驗(yàn)方面都得到了很好的優(yōu)化。

　　Next.js是一個(gè)開源的React前端開發(fā)網(wǎng)絡(luò)框架，由Vercel創(chuàng)建，可以實(shí)現(xiàn)服務(wù)器端渲染和為基于React的網(wǎng)絡(luò)應(yīng)用生成靜態(tài)網(wǎng)站等功能。Next通常被認(rèn)為是一種更穩(wěn)健和靈活的方式來(lái)生成網(wǎng)站甚至是應(yīng)用程序。

　　這兩個(gè)框架都有數(shù)以千計(jì)的插件和多年的優(yōu)化，在建立一個(gè)靜態(tài)網(wǎng)站時(shí)，是真正快速啟動(dòng)和運(yùn)行的好方法。

　　如何進(jìn)行選擇取決于你的項(xiàng)目。它們都不是為了一個(gè)完整的現(xiàn)代應(yīng)用程序，但都提供了一些額外的擴(kuò)展功能，推動(dòng)了JAMStack靜態(tài)網(wǎng)站的極限。

　　3. Netlify和Vercel--前端開發(fā)的后端

　　Vercel和Netlify是兩個(gè)在很多方面都不相上下的平臺(tái)。

　　兩者都為前端開發(fā)者提供了一個(gè)簡(jiǎn)單的方法來(lái)部署靜態(tài)網(wǎng)站。兩者都抽象出必須處理服務(wù)器和微服務(wù)來(lái)部署網(wǎng)站的痛苦和開銷，并為前端開發(fā)者提供一個(gè)非常簡(jiǎn)單和友好的工作流程來(lái)托管和部署他們的靜態(tài)網(wǎng)站。

　　Netlify創(chuàng)建了自己的倉(cāng)庫(kù)，同時(shí)推送到Github倉(cāng)庫(kù)和自己的微服務(wù)。然后，它在一個(gè)廣泛的CDN上執(zhí)行和分發(fā)內(nèi)容，以提供預(yù)先建立的靜態(tài)網(wǎng)站。

　　Vercel是一個(gè)面向前端開發(fā)者的部署平臺(tái)。Vercel使開發(fā)者能夠托管即時(shí)部署和自動(dòng)擴(kuò)展的網(wǎng)站和網(wǎng)絡(luò)服務(wù)--所有這些都無(wú)需任何復(fù)雜的服務(wù)器配置。

　　這兩個(gè)平臺(tái)都提供了構(gòu)建、部署和托管的解決方案。這兩個(gè)托管平臺(tái)都有一個(gè)與github集成的工作流程，以及無(wú)服務(wù)器功能支持和不同的API等很酷的功能。雖然Netlify的開發(fā)體驗(yàn)很好，但Vercel的一個(gè)巨大優(yōu)勢(shì)是服務(wù)器端渲染，它可以讓你在幾分鐘內(nèi)輕松部署一個(gè)完全工作的Next.js應(yīng)用程序。

• 　　在Netlify、Vercel和Digital Ocean之間做出選擇
• 　　Netlify vs. Vercel

　　4. Ripple CI - 傳播組件驅(qū)動(dòng)的構(gòu)建

　　當(dāng)使用Bit的組件驅(qū)動(dòng)工作時(shí)，你可以享受Ripple CI。

　　雖然仍處于封閉測(cè)試階段【獲得訪問(wèn)權(quán)】（mailto： support@bit.dev），但Ripple無(wú)疑是網(wǎng)絡(luò)的一項(xiàng)決議。它只構(gòu)建組件。

　　更準(zhǔn)確地說(shuō)，它構(gòu)建了所有受影響的組件——無(wú)處不在。當(dāng)你推送一個(gè)組件的變化時(shí)，Bit “知道 ”哪些其他組件依賴于該組件，并將傳播和構(gòu)建變化到所有受影響的組件，跨越所有不同的應(yīng)用程序。

　　想象一下，當(dāng)你對(duì)一個(gè)按鈕或卡片進(jìn)行修改時(shí)，看著Ripple將修改傳播到所有使用你的卡片組件的應(yīng)用程序，以及依賴它的每個(gè)組件和頁(yè)面。就這樣，Ripple不斷整合整個(gè)組織。

　　比特的團(tuán)隊(duì)正在使用由瑞波更新的組件構(gòu)建服務(wù)

　　由于每個(gè)組件都是獨(dú)立構(gòu)建的，你可以很容易地了解到底是哪個(gè)變化破壞了哪個(gè)組件，在哪里，以及為什么。

　　由于Ripple構(gòu)建的只是組件，它還可以節(jié)省大量的構(gòu)建時(shí)間，只需不構(gòu)建沒(méi)有變化的東西。一些使用Ripple測(cè)試版的團(tuán)隊(duì)證實(shí)，它可以減少90%的構(gòu)建時(shí)間。

　　而且，Ripple利用Bit為組件、頁(yè)面和應(yīng)用程序的每一個(gè)變化創(chuàng)建可視化預(yù)覽。這是科幻小說(shuō)，而且很有效。

　　5. Stencil和Svelte - 真正的網(wǎng)絡(luò)組件

　　建立在Web組件標(biāo)準(zhǔn)基礎(chǔ)上的自定義組件和小工具，將在現(xiàn)代瀏覽器上工作，并可用于任何與HTML一起工作的JavaScript庫(kù)或框架。

　　模板是一個(gè) “用于構(gòu)建快速、可重復(fù)使用的UI組件和漸進(jìn)式Web應(yīng)用程序的Web組件編譯器”。它使用TypeScript、JJSX、微小的虛擬DOM層、高效的單向數(shù)據(jù)綁定、異步渲染管道來(lái)加載來(lái)生成基于標(biāo)準(zhǔn)的Web組件。

　　Stencil還釋放了一些功能，如無(wú)需運(yùn)行無(wú)頭瀏覽器的服務(wù)器端渲染、預(yù)渲染和 “作為屬性的對(duì)象”（而不只是字符串）。Stencil組件很容易創(chuàng)建，因?yàn)樗鼈儽举|(zhì)上是帶有裝飾器元數(shù)據(jù)的ES6/TypeScript類。

　　Svelte是 “一個(gè)編譯器，當(dāng)你的應(yīng)用程序的狀態(tài)發(fā)生變化時(shí)，它將你的聲明性組件轉(zhuǎn)換為高效的JavaScript，以手術(shù)方式更新DOM”。這意味著，你可以使用CSS、HTML和純JavaScript構(gòu)建無(wú)模板的組件，而Svelt會(huì)將其編譯成具有內(nèi)置反應(yīng)性的小而輕的JS。

　　另一個(gè)有用的能力是JS庫(kù)中對(duì)任何框架無(wú)關(guān)的CSS的內(nèi)置支持。

　　6. Jest和Cypress--測(cè)試驅(qū)動(dòng)的樂(lè)趣

　　二者關(guān)鍵的區(qū)別是什么，應(yīng)該在什么項(xiàng)目中使用哪一個(gè)是關(guān)鍵。

　　Cypress是一個(gè)開源的工具（現(xiàn)在是一個(gè)商業(yè)平臺(tái)），用于現(xiàn)代網(wǎng)絡(luò)的前端自動(dòng)化測(cè)試。Cypress建立在一個(gè)新的架構(gòu)上，在與被測(cè)試的應(yīng)用程序相同的運(yùn)行循環(huán)中運(yùn)行。因此，Cypress為在瀏覽器中運(yùn)行的任何東西提供更好、更快、更可靠的測(cè)試。Cypress適用于任何前端框架或網(wǎng)站。

　　Jest是一個(gè) “令人愉快的JavaScript測(cè)試框架，專注于簡(jiǎn)單性”--這說(shuō)明了很多問(wèn)題。Jest采取一種熟悉的方法。它建立在Jasmine測(cè)試框架之上，使用熟悉的expect（value）.toBe（other）斷言，自動(dòng)模擬由require（）返回的CommonJS模塊，使大多數(shù)現(xiàn)有代碼可以測(cè)試，并且有一個(gè)簡(jiǎn)短的反饋循環(huán)。DOM APIs被模擬，測(cè)試通過(guò)一個(gè)小型的node.js命令行工具并行運(yùn)行。

　　關(guān)鍵的區(qū)別是，Cypress最常被用于端到端測(cè)試，而Jest則用于單元測(cè)試。你也可以反過(guò)來(lái)，將兩者用于相反的用例，但這是常見的慣例。了解更多。

　　我用Jest、Enzyme、測(cè)試庫(kù)和Cypress測(cè)試了一個(gè)React應(yīng)用。以下是不同之處。

　　7. Sentry - 簡(jiǎn)單的全棧式應(yīng)用監(jiān)控

　　Sentry.io是一個(gè)開源的全棧錯(cuò)誤跟蹤系統(tǒng)，支持廣泛的服務(wù)器、瀏覽器、桌面和本地移動(dòng)語(yǔ)言和框架。那么，為什么Sentry會(huì)出現(xiàn)在前端開發(fā)者的名單中呢？

　　因?yàn)樗且环N為網(wǎng)絡(luò)開發(fā)體驗(yàn)而設(shè)計(jì)的，給前端和全棧開發(fā)人員一個(gè)非常簡(jiǎn)單和友好的體驗(yàn)，用于捕捉問(wèn)題，防止錯(cuò)誤到達(dá)生產(chǎn)，監(jiān)控性能，而且都是通過(guò)一個(gè)簡(jiǎn)單的SDK，在2個(gè)命令中安裝。而且UI/UX的使用也非常簡(jiǎn)單和友好。

　　使用Sentry，你還可以追蹤由后端引起的前端錯(cuò)誤，給你一個(gè)全面的全棧方法來(lái)監(jiān)控和修復(fù)webdev錯(cuò)誤。你可以得到關(guān)于應(yīng)用程序狀態(tài)的上下文，這樣你就能夠理解特定問(wèn)題的影響。更重要的是，所有未處理的異常都會(huì)被自動(dòng)捕獲，單個(gè)錯(cuò)誤會(huì)被及時(shí)發(fā)現(xiàn)和處理。
責(zé)編AJX