譯者 | 布加迪

審校 | 孫淑娟

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

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

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

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

Tauri旨在簡(jiǎn)化構(gòu)建應(yīng)用程序的過程。因此如果有人對(duì)構(gòu)建應(yīng)用程序感興趣，可能會(huì)接觸到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可以處理最終針對(duì)JavaScript和HTML構(gòu)建的任何堆棧。它在開發(fā)服務(wù)器上運(yùn)行，為用戶生成原生桌面客戶端。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bun.js是JavaScript領(lǐng)域一顆冉冉升起的新星，因?yàn)樗谝粋€(gè)軟件包中處理多個(gè)方面。我詢問框架的創(chuàng)建者Jarred Sumner關(guān)于其創(chuàng)建Bun的動(dòng)機(jī)和希望：

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

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

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

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

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

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

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

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

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

代碼片段1：簡(jiǎn)單的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簡(jiǎn)化了它。欲了解更多信息，可以參閱Civet速查表：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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