譯者 | 布加迪

審校 | 孫淑娟

本文介紹您可能還不知道的7個JavaScript新項目。這些工具和框架涵蓋一系列廣泛的功能，預(yù)示著JavaScript開發(fā)領(lǐng)域的新趨勢，比如原生應(yīng)用程序創(chuàng)建、強類型全棧開發(fā)、Node.js運行時環(huán)境的簡易替代者和瀏覽器內(nèi)圖形等。目前，所有項目都受到開發(fā)者的追捧，不會長期無人注意。

1.Tauri：面向桌面應(yīng)用程序的JavaScript框架

Tauri是一種用于構(gòu)建桌面應(yīng)用程序的JavaScript框架，也許稱之為“元框架”更恰當(dāng)。它允許您使用任何前端Web框架（比如React或Svelte），并將其轉(zhuǎn)換成跨平臺的富客戶端。

Tauri聯(lián)合創(chuàng)始人Denjell透露了開發(fā)一種新桌面框架的動機：

Tauri旨在簡化構(gòu)建應(yīng)用程序的過程。因此如果有人對構(gòu)建應(yīng)用程序感興趣，可能會接觸到Tauri。首先，Tauri為Mac、Windows和Linux構(gòu)建應(yīng)用程序。今年夏天，我們將發(fā)布2.0穩(wěn)定版，新增支持iOS和安卓的功能。  

Tauri的開發(fā)過程非常有意思。該框架讓您可以用當(dāng)前使用的現(xiàn)有管道來構(gòu)建，比如用Vite構(gòu)建的SvelteKit。Tauri可以處理最終針對JavaScript和HTML構(gòu)建的任何堆棧。它在開發(fā)服務(wù)器上運行，為用戶生成原生桌面客戶端。

Denjell描述的開發(fā)過程如下所示：

· 使用Svelte、Solid.js、React和Vue等，啟動開發(fā)服務(wù)器。

· 配置tauri.conf，以便在該端口監(jiān)聽。

· 啟動Tauri開發(fā)窗口。

雖然Tauri的代碼面向系統(tǒng)，并且用Rust構(gòu)建，但開發(fā)人員與幾乎都是用JavaScript編寫的API進行交互。Tauri是一種引人注目的方法，為廣大的JavaScript開發(fā)人員構(gòu)建原生桌面應(yīng)用程序。Tauri旨在兌現(xiàn)使用JavaScript進行多平臺開發(fā)的承諾，不像舊框架試圖取得類似的壯舉，卻最終未能實現(xiàn)。

2.tRPC：用TypeScript從事API開發(fā)

tRPC是一種構(gòu)建API的誘人方法，得到TypeScript的支持。雖然tRPC與GraphQL屬于同一個技術(shù)家族，但不同之處在于它使前端代碼和后端代碼之間的交互實現(xiàn)自動化。它還具有來自TypeScript強制執(zhí)行類型這種能力的超級功能。

我詢問tRPC的開發(fā)者Alex Johansson為什么開發(fā)tRPC，他回答如下：

我是GraphQL的忠實粉絲，現(xiàn)在仍然是，但是當(dāng)我構(gòu)建自己的產(chǎn)品時，經(jīng)常覺得它阻礙了我——我在前后端都使用TypeScript。為什么我就不能直接使用這種語言本身，而不是引入外部模式？

tRPC的超級功能在于使用現(xiàn)有的技術(shù)跨整個堆棧支持各種類型的執(zhí)行和關(guān)聯(lián)。它提供了一種雙向類型推斷，并且無需元數(shù)據(jù)中介或額外的構(gòu)建步驟將API定義綁定到消費代碼。當(dāng)我領(lǐng)悟到tRPC的性質(zhì)后，就覺得它很簡潔，真乃天才之作。

這里是tRPC團隊使用StackBlitz構(gòu)建的一個全棧React應(yīng)用程序(https://stackblitz.com/edit/trpc-trpc-k6dpz1)。tRPC提供了端點，整個系統(tǒng)非常簡單，只需要少量文件。簡單就是美。

在StackBlitz示例中，公開的端點驅(qū)動IDE擁有的可用信息。比如在前端，使用自定義tRPC useQuery鉤子填充result變量，就像這樣：const result = trpc.greeting.useQuery({ name: 'client' });。在后端，這由tRPC路由來處理。

然后前端可以使用變量，就像這樣：{result.data.text}。IDE（和TypeScript編譯步驟）完全了解并能夠提供result.data的類型定義。同樣，tRPC路由端點知道前端，比如查詢中提供的參數(shù)。

總的來說，tRPC是構(gòu)建全棧TypeScript應(yīng)用程序的一種獨特而誘人的方法。它引起了開發(fā)者社區(qū)越來越大的興趣，撰寫本文時GitHub上已有近20000顆星。

3.Bun.js：一種面向JavaScript的更快運行時環(huán)境

Bun.js是JavaScript領(lǐng)域一顆冉冉升起的新星，因為它在一個軟件包中處理多個方面。我詢問框架的創(chuàng)建者Jarred Sumner關(guān)于其創(chuàng)建Bun的動機和希望：

Bun集JavaScript/TypeScript打包器、編譯器、NPM軟件包管理器和JavaScript運行時環(huán)境于一體。我們希望讓JavaScript運行起來更快速、編寫起來更簡單。做到這方面的一個重要部分是生態(tài)系統(tǒng)兼容性。Bun旨在成為Node.js的簡易替代者。人們不應(yīng)該為了使用Bun而非得重寫代碼。許多Node.js API被做入到Bun中（不過這方面我們?nèi)栽谂Γ热鏝ode的原生模塊API（NAPI）：fs、path和process等。

Bun既是Node.js和Deno等運行時環(huán)境的簡易替代者，也是webpack、Vite和Babel等輔助工具的替代者。它以其驚人的速度運行bun install（以替代npm install或yarn install）而迅速成名。Bun的性能優(yōu)勢來自于將大量代碼從JavaScript中移到較低級的Zig和C++中。

Bun的快速處理以及一體化方法使其成為一種引人注目的方案，可以替代面向后端服務(wù)器端JavaScript的傳統(tǒng)堆棧。開發(fā)人員也注意到了這點，迄今為止他們在GitHub上給該框架打了40000顆星。

4.Civet：面向TypeScript的現(xiàn)代框架

如果您把TypeScript和CoffeeScript中的一些想法結(jié)合起來，再加入一些額外的優(yōu)點，會得到什么？您會得到像Civet這樣的框架，這個框架旨在使編寫的TypeScript代碼更簡單、更強大。

Civet的創(chuàng)建者Daniel Moore特別指出：“坊間盛傳Civet是新的CoffeeScript，不過也許這是好事。CoffeeScript為官方JavaScript規(guī)范帶來了類、解構(gòu)、async/await、箭頭函數(shù)和rest參數(shù)等要素。”

值得關(guān)注的是，Civet并不局限于改進TypeScript，它還使用JSX。正如Erik Demaine（負(fù)責(zé)大部分JSX改進之處的項目開發(fā)人員）指出：

Civet進一步完善了這些想法，添加了更迫切需要的語言特性（比如管道操作符、許多JSX改進之處以及很快推出的模式匹配switch），并在TypeScript的基礎(chǔ)上構(gòu)建（面向TypeScript編譯），因此它與現(xiàn)有工具極其兼容。

在代碼片段1中，您可以看到Civet實際運行的例子（來自Civet說明文檔）。

代碼片段1：簡單的Civet例子

// Civet syntax
i .= 0
loop
i++
break if i > 5

// TS output
let i = 0;
while (true) {
i++;
if (i > 5) {
break;
}
}

別忘了Civet還可以處理JSX！我總是覺得JSX中的循環(huán)語法很笨拙，但是Civet簡化了它。欲了解更多信息，可以參閱Civet速查表：

??https://civet.dev/cheatsheet。??

5.Tabby: 面向Node.js的終端

我不得不承認(rèn)我對游戲機和shell的喜愛由來已久。自從我發(fā)現(xiàn)Commodore 64游戲背后的奧妙后就喜歡上了，我可以把BASIC代碼輸出到游戲機上。Tabby是一個功能齊全、跨平臺的窗口終端，取代諸如cmd、powershell和Terminal之類的原生應(yīng)用程序。它還可以像Putty那樣處理SSH、像WinSCP那樣處理SFTP。

我詢問Tabby的創(chuàng)建者Eugeny關(guān)于創(chuàng)建一個新的終端應(yīng)用程序的決定。

我起初創(chuàng)建[Tabby]是由于對使用Hyper（另一個基于Electron的Terminal應(yīng)用程序）頗為沮喪，以及對其他應(yīng)用程序停留在90年代普遍感到失望。另一個靈感來源是VS Code這個應(yīng)用程序以更好的整體體驗之名拋棄了約定。我希望發(fā)展壯大社區(qū)，最終重寫[Tabby]以便使用Tauri而不是Electron，以縮減應(yīng)用程序代碼量并提高性能。

Tabby在跨環(huán)境保持一致的平臺中為您提供了顏色、特殊鍵處理和復(fù)制/粘貼等方面所有好的細(xì)節(jié)。

6.Pixi.js：JavaScript中的性能密集型圖形

訪問Pixijs.com，觀察將指針移到背景圖像上的效果。有一種看起來很耗費計算資源的流體效果，但它似乎對性能沒有巨大影響。他們是怎么做到的？當(dāng)然是使用Pixi.js庫！

Pixi為您提供了一套注重性能的高級API，用于使用WebGL和HTML5 Canvas構(gòu)建接口。Pixi問世已有一段時間，它是一個成熟穩(wěn)定的庫。您可以在這里找到NPM軟件包：https://www.npmjs.com/package/pixi.js?activeTab=readme。

雖然Pixi.js似乎為瀏覽器內(nèi)游戲量身定做，但它在任何需要性能密集型圖形的地方都很有用，包括圖表和酷炫的效果。記住它是為2D而生的，不是為3D而生的。

如果與Tauri等框架結(jié)合使用，Pixi可以用于構(gòu)建桌面平臺等。您可以在Pixi在線游樂場（https://www.pixiplayground.com/#/edit）體驗一番Pixi。

7.PM2：用于Node.js的應(yīng)用程序監(jiān)控

嚴(yán)格地說，PM2并不是一個JavaScript庫，而是一種用JavaScript構(gòu)建的面向系統(tǒng)的工具。這個非常完整的應(yīng)用程序監(jiān)測工具可以用來從命令行執(zhí)行復(fù)雜的進程監(jiān)測和管理工作。

Unix擁有監(jiān)測和管理工具，比如bg/fg、nohup和screen，但PM2在一個易于使用的軟件包中可全部完成所有這些工作。

PM2有幾個重啟策略來處理幾乎任何情形。比如包括基于CRON時間來啟動、停止時自動重啟以及達到某個條件（如內(nèi)存消耗）時啟動。它包括一個——watch標(biāo)志，用于文件更改時重新啟動。

如果您需要一款滿足各種Node.js進程管理需要的工具，PM2值得考慮。

原文鏈接：https://www.infoworld.com/article/3687616/7-awesome-javascript-projects-to-check-out-today.html