?推薦一個神器！可以在瀏覽器運(yùn)行 Node.js

在最新的 Google I/O 主題演講中 stackblitz 向大家介紹了他們與 Next.js 和 Google 團(tuán)隊(duì)合作開發(fā)的在線 IDE WebContainers ，真的是非常驚艷。

幾年前，我們意識到網(wǎng)絡(luò)正朝著一個關(guān)鍵的拐點(diǎn)發(fā)展。WebAssembly 的出現(xiàn)讓我們可以有能力編寫基于 WebAssembly 的操作系統(tǒng)，這個操作系統(tǒng)的功能強(qiáng)大到可以完全在瀏覽器中運(yùn)行 Node.js。我們設(shè)計(jì)了一個比本地環(huán)境更快，更安全和一致的高級開發(fā)環(huán)境，可以實(shí)現(xiàn)無縫代碼協(xié)作，而不需要設(shè)置本地環(huán)境。

兩年后的今天，他終于誕生了！

WebContainers

WebContainers 允許你創(chuàng)建一個完整的 Node.js環(huán)境，它可以在毫秒內(nèi)啟動，并且可以實(shí)現(xiàn)一鍵聯(lián)機(jī)和鏈接共享。這個環(huán)境具有 VS Code 強(qiáng)大的編輯功能，完整的終端，還有 npm 等功能。它也完全在你的瀏覽器中運(yùn)行，這帶來了一些關(guān)鍵的好處：

• 比本地環(huán)境快。構(gòu)建速度比 yarn/npm 快 20％，包安裝速度可以快 5倍。
• 支持在瀏覽器中調(diào)試 Node.js 。與 Chrome DevTools 的無縫集成可實(shí)現(xiàn)本機(jī)后端調(diào)試，無需安裝擴(kuò)展。
• 默認(rèn)安全。所有代碼執(zhí)行都發(fā)生在瀏覽器的安全沙箱中，而不是在遠(yuǎn)程 VM 或本地二進(jìn)制文件上。

同樣，這些環(huán)境不需要在遠(yuǎn)程服務(wù)器上運(yùn)行。而是每個環(huán)境都完全包含在你的 Web 瀏覽器中。沒錯：Node.js 運(yùn)行時本身是第一次在瀏覽器內(nèi)部本機(jī)運(yùn)行。

你可以在 StackBlitz.com 上自己嘗試一下：

為什么

舊版在線 IDE 在遠(yuǎn)程服務(wù)器上運(yùn)行整個開發(fā)環(huán)境，并將結(jié)果通過 Internet 流回瀏覽器。這種方法的問題在于它太不安全了，而且?guī)缀踉谒蟹矫娑急饶愕谋镜赜?jì)算機(jī)體驗(yàn)更差：首先需要耗時幾分鐘來啟動容器，并且容易出現(xiàn)網(wǎng)絡(luò)延遲，沒有辦法離線工作，經(jīng)常導(dǎo)致網(wǎng)絡(luò)超時，調(diào)試一個已經(jīng)掛掉的容器幾乎是不可能的。

隨著 Web 開發(fā)慢慢轉(zhuǎn)向像 Next.js 這樣的全棧 SSR 和 SSG，設(shè)置本地的開發(fā)環(huán)境變得越來越麻煩，StackBlitz 通過利用瀏覽器中數(shù)十年來的速度和安全性創(chuàng)新來解決這些問題。StackBlitz 中的所有的計(jì)算都會在瀏覽器安全沙箱中運(yùn)行，不會在你的本地計(jì)算機(jī)上運(yùn)行，這會讓你的開發(fā)過程更快更安全。

使用 Chrome DevTools 調(diào)試 Node.js

事實(shí)證明，瀏覽器確實(shí)非常擅長調(diào)試 Javascript。通過在瀏覽器中執(zhí)行 Node.js，與 Chrome DevTools 的集成即開即用。無需安裝，無需擴(kuò)展，僅在瀏覽器就能進(jìn)行本機(jī)后端調(diào)試：

在瀏覽器中啟動服務(wù)端

WebContainers 包含一個虛擬的 TCP 網(wǎng)絡(luò)堆棧，這個堆棧會映射到瀏覽器的ServiceWorker API，使你能夠創(chuàng)建實(shí)時的 Node.js 服務(wù)器，即使你處于脫機(jī)狀態(tài)也可以繼續(xù)工作。因?yàn)樗耆跒g覽器安全沙箱中運(yùn)行，所以服務(wù)器響應(yīng)的延遲比 localhost 還小，并且可以保護(hù)你的 Web 服務(wù)器免受本地主機(jī)抓包攻擊：

毫秒啟動

瀏覽器執(zhí)行 Javascript 和 WebAssembly 的速度快得令人難以置信。我們利用這一點(diǎn)來創(chuàng)建一個即時開發(fā)操作系統(tǒng)，它不使用服務(wù)器資源，也不會在你的計(jì)算機(jī)上創(chuàng)建 node_modules ...

零延遲、脫機(jī)運(yùn)行

無論你是在火車上，在飛機(jī)上還是在雨天后排座位上，都可以在沒有互聯(lián)網(wǎng)連接的情況下繼續(xù)工作：

默認(rèn)安全

使用 StackBlitz 先進(jìn)的計(jì)算模型，所有代碼執(zhí)行都發(fā)生在瀏覽器安全沙箱中。與本地相比，這會更快，更少限制的開發(fā)環(huán)境，同時又提供了更高的安全性。

實(shí)際上，默認(rèn)的安全狀況非常穩(wěn)固，以至于我們的嵌入式軟件包管理器是第一個可公開獲得的工具，可以解決五年多來未解決的 npm 漏洞。

和桌面程序一樣的編輯體驗(yàn)

借助 Chrome 的 PWA 功能，只需單擊即可輕松安裝 StackBlitz 。幾毫秒后，你就有了一個桌面 IDE。你平時用的快捷鍵，例如 CMD + W和CMD + T，都可以正常工作。此外，就像在本地一樣，你也可以在一個完全獨(dú)立的窗口中打開和調(diào)試開發(fā)服務(wù)器。

從本地文件系統(tǒng)讀取和寫入。

Chrome 最近發(fā)布了 File System Access API。這使 PWA能夠請求對本地文件系統(tǒng)的某些部分進(jìn)行持久的讀寫訪問。

你能分清楚上面哪個是 StackBlitz 哪個是 VS Code 嗎？

我體驗(yàn)了一波后，感覺還是非常 Nice 了的，目前產(chǎn)品還處于公測階段，大家感興趣可以自己到  StackBlitz.com  自己體驗(yàn)一下。