?推薦一個神器！可以在瀏覽器運行 Node.js
在最新的 Google I/O 主題演講中 stackblitz 向大家介紹了他們與 Next.js 和 Google 團隊合作開發(fā)的在線 IDE WebContainers ，真的是非常驚艷。
幾年前，我們意識到網(wǎng)絡正朝著一個關鍵的拐點發(fā)展。WebAssembly 的出現(xiàn)讓我們可以有能力編寫基于 WebAssembly 的操作系統(tǒng)，這個操作系統(tǒng)的功能強大到可以完全在瀏覽器中運行 Node.js。我們設計了一個比本地環(huán)境更快，更安全和一致的高級開發(fā)環(huán)境，可以實現(xiàn)無縫代碼協(xié)作，而不需要設置本地環(huán)境。
兩年后的今天，他終于誕生了！
WebContainers
WebContainers 允許你創(chuàng)建一個完整的 Node.js環(huán)境，它可以在毫秒內(nèi)啟動，并且可以實現(xiàn)一鍵聯(lián)機和鏈接共享。這個環(huán)境具有 VS Code 強大的編輯功能，完整的終端，還有 npm 等功能。它也完全在你的瀏覽器中運行，這帶來了一些關鍵的好處：
比本地環(huán)境快。構建速度比 yarn/npm快20％，包安裝速度可以快5倍。支持在瀏覽器中調(diào)試 Node.js。與Chrome DevTools的無縫集成可實現(xiàn)本機后端調(diào)試，無需安裝擴展。默認安全。所有代碼執(zhí)行都發(fā)生在瀏覽器的安全沙箱中，而不是在遠程 VM或本地二進制文件上。
同樣，這些環(huán)境不需要在遠程服務器上運行。而是每個環(huán)境都完全包含在你的 Web 瀏覽器中。沒錯：Node.js 運行時本身是第一次在瀏覽器內(nèi)部本機運行。
你可以在 StackBlitz.com 上自己嘗試一下：
為什么
舊版在線 IDE 在遠程服務器上運行整個開發(fā)環(huán)境，并將結果通過 Internet 流回瀏覽器。這種方法的問題在于它太不安全了，而且?guī)缀踉谒蟹矫娑急饶愕谋镜赜嬎銠C體驗更差：首先需要耗時幾分鐘來啟動容器，并且容易出現(xiàn)網(wǎng)絡延遲，沒有辦法離線工作，經(jīng)常導致網(wǎng)絡超時，調(diào)試一個已經(jīng)掛掉的容器幾乎是不可能的。
隨著 Web 開發(fā)慢慢轉向像 Next.js 這樣的全棧 SSR 和 SSG，設置本地的開發(fā)環(huán)境變得越來越麻煩，StackBlitz 通過利用瀏覽器中數(shù)十年來的速度和安全性創(chuàng)新來解決這些問題。StackBlitz 中的所有的計算都會在瀏覽器安全沙箱中運行，不會在你的本地計算機上運行，這會讓你的開發(fā)過程更快更安全。
使用 Chrome DevTools 調(diào)試 Node.js
事實證明，瀏覽器確實非常擅長調(diào)試 Javascript。通過在瀏覽器中執(zhí)行 Node.js，與 Chrome DevTools 的集成即開即用。無需安裝，無需擴展，僅在瀏覽器就能進行本機后端調(diào)試：
在瀏覽器中啟動服務端
WebContainers 包含一個虛擬的 TCP 網(wǎng)絡堆棧，這個堆棧會映射到瀏覽器的ServiceWorker API，使你能夠創(chuàng)建實時的 Node.js 服務器，即使你處于脫機狀態(tài)也可以繼續(xù)工作。因為它完全在瀏覽器安全沙箱中運行，所以服務器響應的延遲比 localhost 還小，并且可以保護你的 Web 服務器免受本地主機抓包攻擊：
毫秒啟動
瀏覽器執(zhí)行 Javascript 和 WebAssembly 的速度快得令人難以置信。我們利用這一點來創(chuàng)建一個即時開發(fā)操作系統(tǒng)，它不使用服務器資源，也不會在你的計算機上創(chuàng)建 node_modules ...
零延遲、脫機運行
無論你是在火車上，在飛機上還是在雨天后排座位上，都可以在沒有互聯(lián)網(wǎng)連接的情況下繼續(xù)工作：
默認安全
使用 StackBlitz 先進的計算模型，所有代碼執(zhí)行都發(fā)生在瀏覽器安全沙箱中。與本地相比，這會更快，更少限制的開發(fā)環(huán)境，同時又提供了更高的安全性。
實際上，默認的安全狀況非常穩(wěn)固，以至于我們的嵌入式軟件包管理器是第一個可公開獲得的工具，可以解決五年多來未解決的 npm 漏洞。
和桌面程序一樣的編輯體驗
借助 Chrome 的 PWA 功能，只需單擊即可輕松安裝 StackBlitz 。幾毫秒后，你就有了一個桌面 IDE。你平時用的快捷鍵，例如 CMD + W和CMD + T，都可以正常工作。此外，就像在本地一樣，你也可以在一個完全獨立的窗口中打開和調(diào)試開發(fā)服務器。
從本地文件系統(tǒng)讀取和寫入。
Chrome 最近發(fā)布了 File System Access API。這使 PWA能夠請求對本地文件系統(tǒng)的某些部分進行持久的讀寫訪問。
你能分清楚上面哪個是 StackBlitz 哪個是 VS Code 嗎？
我體驗了一波后，感覺還是非常 Nice 了的，目前產(chǎn)品還處于公測階段，大家感興趣可以自己到 StackBlitz.com 自己體驗一下。