七個可提高前端開發(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)該減少對實現(xiàn)和配置的關(guān)注，而更多地關(guān)注應(yīng)用程序的創(chuàng)建和組成。

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

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

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

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

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

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

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

　　而且，它有一個可視化的UI，使開發(fā)體驗也很有趣！Bit的本地工作區(qū)UI中的一個非?；镜陌粹o

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

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

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

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

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

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

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

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

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

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

　　Vercel和Netlify是兩個在很多方面都不相上下的平臺。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　6. Jest和Cypress--測試驅(qū)動的樂趣

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

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

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

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

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

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

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

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

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