本篇文章來自StackBlitzblog-埃里克·西蒙斯?2021 年 5 月 20 日

嗨！我們是StackBlitz，一個專門為網絡開發量身定制的在線IDE。在本周的谷歌I/O主題演講中，你可能會看到我們偷看。

今天，我們很高興地宣布一項新技術，我們一直在與Next.js和Google的團隊合作。

幾年前，我們意識到網絡正在走向一個關鍵的轉折點。WebAssembly和新功能API的出現似乎使編寫一個功能強大的基于WebAssembly的操作系統成為可能，完全在瀏覽器中運行Node.js。我們設想了一個比本地環境更快、更安全、更一致的優越開發環境，以實現無縫的代碼協作，而無需設置本地環境。

這聽起來遙不可及。但是，如果網絡現在運行了平面設計師、視頻編輯器和富文檔編輯的完整環境，我們想知道：開發人員最終可以使用web瀏覽器構建web應用嗎？

我們決定試一試。我們希望一切順利，并期望最壞。兩年后（時間飛逝，😅），結果出人意料地出現了

今天，我們很高興宣布WebContainers。

WebContainers允許您創建在毫秒內啟動的全棧Node.js環境，并立即在線和鏈接可共享——只需單擊一次。環境加載了VS Code強大的編輯體驗、完整的終端、npm等。它還完全運行在您的瀏覽器中，這產生了一些關鍵的好處：

• 比你本地的環境快。Build完成速度提高20%，軟件包安裝完成>=比yarn/npm快5倍。
• Node.js 瀏覽器內調試。與Chrome DevTools的無縫集成允許本機后端調試，無需安裝或擴展。
• 默認情況下是安全的。所有代碼執行都發生在瀏覽器的安全沙盒內，而不是遠程虛擬機或本地二進制文件。

同樣，這些環境不在遠程服務器上運行。相反，每個環境都完全包含在您的網頁瀏覽器中。沒錯：Node.js運行時本身有史以來第一次在瀏覽器內原生運行。

您可以在StackBlitz.com上或單擊下面的入門項目之一親自嘗試一下。

在毫秒內在瀏覽器中啟動Node.js項目（不要眨眼！）：

• NEXT.JSGRAPHQLHTTP服務器NODE.JS 啟動器

截至今天發布，WebContainers現已進入公開測試階段。當前的支持包括Next.js、GraphQL和Vanilla Node.js，我們正在與其他開源項目合作，以擴大支持。（如果您想與我們合作，請查看我們的回購協議）。

為什么？

建立本地環境是一個巨大的轟動效應——尤其是如果你想快速原型一個很酷的想法，嘗試一個新的開源庫，創建一個錯誤復本或與同事合作（“嘿，你能在本地快速查看這個分支嗎？”😒）。隨著Web開發轉向全棧SSR和SSG工具鏈，如Next.js，這個問題比以往任何時候都更加常見

運行用戶提交的錯誤復制代碼也成為開源維護者和《財富》100強公司的主要安全風險，這些類型的供應鏈攻擊正在上升。

StackBlitz通過利用瀏覽器中內置的光速和安全創新來解決這些問題。StackBlitz中的所有計算都會立即發生在瀏覽器安全沙盒中，無法中斷到本地機器。該模型還解鎖了一些關鍵的開發和調試優勢（稍后將詳細介紹這些優勢）。

代碼空間/沙盒/循環/...怎么辦？

傳統在線IDE在遠程服務器上運行整個開發環境，并將結果流回互聯網到瀏覽器。這種方法的問題在于，它幾乎沒有安全效益，幾乎在所有方面都比本地機器提供更糟糕的體驗：旋轉容器需要幾分鐘，容易出現網絡延遲，無法脫機工作，通常導致網絡超時，調試/破碎的容器幾乎是不可能的，點擊刷新只會再次將您重新連接到破碎的容器。

StackBlitz是第一個計算模型對我來說有意義的在線IDE。 ? ? ? ? ? ? ?—湯姆·普雷斯頓-沃納，GitHub創始人兼StackBlitz的投資者

釋放瀏覽器的強大功能。

使用Chrome DevTools進行無縫Node.js調試。

原來，瀏覽器真的很擅長調試Javascript。令人震驚的是，我知道;)通過在瀏覽器中執行Node.js，與Chrome DevTools的集成“只是開箱即用”。沒有安裝，沒有擴展，只是在瀏覽器中進行原生后端調試：

我們很高興與StackBlitz團隊合作，使Next.js和Vercel更容易被開發人員訪問。能夠利用瀏覽器的內置功能來開發和調試Next.js應用程序是一個游戲規則的改變者。 —吉列爾莫·勞奇，Vercel的創始人和Next.js的創始人

運行服務器。在您的瀏覽器中。

是的，實際上。WebContainers包括一個虛擬的TCP網絡堆棧，該堆棧映射到瀏覽器的ServiceWorker API，使您能夠立即按需創建實時Node.js服務器，即使在您脫機時，這些服務器仍將繼續工作。因為它完全運行在瀏覽器安全沙盒中，服務器響應的延遲比本地主機少，并保護您的網絡服務器免受本地主機攻擊：

零足跡。靴子在毫秒內。

瀏覽器在執行Javascript和WebAssembly方面速度驚人。我們利用這一點創建一個即時開發操作系統，該操作系統不使用服務器資源，也不會在您的計算機上創建node_modules黑洞。

每個頁面加載初始化環境。

再見，rm -rf node_modules！WebContainer內置的npm客戶端速度如此之快，以至于它在每個頁面加載上運行一個新的安裝，以確保您每次都有一個干凈的環境。如果您的環境確實出了問題，您可以像其他任何Web應用程序一樣恢復到清潔狀態：點擊刷新按鈕。

零延遲。離線工作。

如果說在家工作教會了我們什么，那就是網絡經常不穩定。ISP 下降——很多。有了StackBlitz，無論您是在火車上、飛機上還是雨中后座優步，您都可以繼續工作，無需互聯網連接：

默認情況下是安全的。

借助StackBlitz新穎的計算模型，100%的代碼執行發生在瀏覽器安全沙盒中。這導致了比本地更快、限制更少的開發環境，同時提供更大的安全性，這是一種非常罕見的組合。

事實上，默認的安全態勢是如此牢固，以至于我們的嵌入式軟件包管理器是第一個公開可用的工具，可以解決五年多前發現的Sam Saccone長期未解決的npm漏洞。

讓我們暫停一下。

因為這就是故事真正讓人心煩意亂的地方。

在谷歌I/O，我們很高興展示StackBlitz如何使用最新的網絡功能來提供模糊網絡應用程序和桌面應用程序的體驗。 ——迪翁·阿爾馬爾，谷歌Chrome工程總監

“網絡”應用程序和“本地”應用程序有什么區別？Chrome團隊一直在發布新的功能API來縮小這一差距，三角洲正在迅速接近零。

桌面級編輯。即時桌面應用程序安裝。

多虧了Chrome的PWA功能，安裝StackBlitz只需單擊一下即可。毫秒后，您將獲得一個桌面IDE，您可以從基座啟動。您日常生產力所依賴的密鑰綁定，如CMD + W和CMD + T“只是工作”。此外，就像在本地一樣，您可以在一個完全獨立的窗口中打開和調試您的開發服務器。

從本地文件系統讀寫。

Chrome團隊最近發布了文件系統訪問API。這使PWA能夠請求對本地文件系統部分的持久讀寫訪問。與StackBlitz WebContainers配對，這暗示了未來的潛在需求，而無需在硬盤上安裝node、npm、git、VS Code或任何其他內容。你只需要一個網頁瀏覽器：

技巧問題：其中哪一個是StackBlitz，哪個實際上是VS Code？

接下來是什么？

我們將在未來一兩個季度在測試版中度過，因為我們與開源維護人員合作，為他們的用戶群帶來完全兼容性，并穩定核心WebContainer技術。之后是功能齊全的StackBlitz v2。

如果可以的話，是不是很棒：

• 在每次開放環境（編輯+實時預覽！）PR上。您可以瀏覽、播放、測試，從而執行真正可靠的代碼審查，而無需關閉您正在處理的其他項目。
• 同時查看多個分支，并排比較它們。（你會考慮本地環境嗎？在StackBlitz中，這意味著只需打開一個新選項卡）。
• 直接從瀏覽器更新您的Docusaurus文檔或蓋茨比博客。
• 無需安裝任何東西即可學習任何JavaScript前端或后端框架！

開發.?預覽. 兩者關系。??

我們與Vercel和Next.js的合作還剛剛開始浮出水面。準備好體驗前所未有的無縫開發體驗（盡早訪問這里）。

軟件開發的未來是光明的。

還有許多工作要做，但我們現在可以自信地說，一個沒有node、npm、git和VS Code本地實例的未來是一種切實的可能性，甚至可以使世界軟件在以前無法運行的地方運行。

想象一下，在未來，您可以在Cloudflare Workers等平臺上或iPad上原生的整個開發環境上運行WebContainers。運行您最喜歡的VS Code擴展，或通過WASI在瀏覽器中運行Python、Java或R等非網絡本機語言怎么樣？還有很多未知數有待揭開和解決，但我們相信這項技術的未來機遇是巨大的。

這些事情可能看起來有點瘋狂。還有許多未知數。但我們認為這個新未來值得一試。因為，誰知道呢？它最終可能會出人意料地出現。

原文鏈接：https://blog.stackblitz.com/posts/introducing-webcontainers/

總結

以上是生活随笔為你收集整理的WebContainers简介：在浏览器中原生运行Node.js（译文）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。