在瀏覽器中本地運行Node.js

一切要從收到一封郵件開始

大早上，我收到一封郵件，StackBlitz說正在與Next.js和Google的團隊合做開發一項新技術

• 幾年前，StackBlitz意識到網絡正朝着關鍵的拐點發展。WebAssembly和新功能API的出現使編寫基於WebAssembly的操做系統彷佛變得可能，該操做系統功能強大到能夠徹底在瀏覽器中運行Node.js。咱們設想了一個比本地環境更快，更安全和一致的高級開發環境，以實現無縫的代碼協做而無需設置本地環境

技術名爲:WebContainers

• WebContainers容許您建立完整的Node.js環境，這些環境能夠在毫秒內啓動，而且一鍵便可當即聯機和連接共享。該環境具備VS Code強大的編輯經驗，完整的終端，npm等功能。它還能夠徹底在您的瀏覽器中運行，從而帶來一些關鍵的好處：
• 比本地環境快。與yarn / npm相比，構建速度最多可提升20％，而卷裝安裝速度則可快5倍以上。
• 瀏覽器中的Node.js調試。與Chrome DevTools的無縫集成可實現本機後端調試，無需安裝或擴展。
• 默認爲安全。全部代碼執行都發生在瀏覽器的安全沙箱中，而不是在遠程VM或本地二進制文件上。

• 一樣，這些環境不在遠程服務器上運行。而是，每一個環境都徹底包含在您的Web瀏覽器中。沒錯：Node.js運行時自己第一次在瀏覽器中本機運行。

  從如今開始，WebContainers如今處於公開測試階段。當前支持包括Next.js，GraphQL和Vanilla Node.js，咱們正在與其餘開源項目合做以擴展支持

爲何會有WebContainers

安全

• StackBlitz經過利用瀏覽器中數十年來的速度和安全性創新來解決這些問題。StackBlitz中的全部計算都會在瀏覽器安全沙箱中當即發生，而且沒法爆發到您的本地計算機上。該模型還釋放了一些關鍵的開發和調試優點（在幾秒鐘內便會提供更多優點）。

釋放瀏覽器的功能

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

  • 事實證實，瀏覽器確實很是擅長調試Javascript。我知道，這使人震驚；）經過在瀏覽器中執行Node.js，與Chrome DevTools的集成即開即用。無需安裝，無需擴展，僅在瀏覽器中進行本機後端調試便可

運行服務器,在你的瀏覽器中

• 實際上。WebContainers包含一個虛擬的TCP網絡堆棧，該網絡堆棧已映射到瀏覽器的ServiceWorker API，使您能夠即時建立實時Node.js服務器，即便您處於脫機狀態也能夠繼續工做。由於它徹底在瀏覽器安全沙箱中運行，因此服務器響應的延遲比本地主機（！）少，而且能夠保護您的Web服務器免受本地主機抓取攻擊
• 毫秒級啓動時間

• 每一個頁面加載時都有一個全新的環境

  • 再見rm -rf node_modules！WebContainer的內置npm客戶端是如此之快，以致於它在每次頁面加載時都運行全新的安裝，從而確保您每次都能得到一個乾淨的環境。若是您的環境確實出現問題，則能夠像處理其餘任何Web應用程序同樣恢復到乾淨的狀態：單擊「刷新」按鈕
• 藉助StackBlitz，不管您是在火車上，在飛機上仍是在雨中後座時，均可以在沒有互聯網鏈接的狀況下繼續工做

使用StackBlitz新穎的計算模型，100％的代碼執行發生在瀏覽器安全沙箱中。與本地相比，這致使了更快，更少限制的開發環境，同時又提供了更高的安全性，這是很是罕見的組合。

• 實際上，默認的安全情況是如此穩固，以致於咱們的嵌入式軟件包管理器是第一個可公開得到的工具，能夠解決五年多來未解決的Sam Saccone長期未解決的npm漏洞

• 一樣，這些環境不在遠程服務器上運行。而是，每一個環境都徹底包含在您的Web瀏覽器中。沒錯：Node.js運行時自己第一次在瀏覽器中本機運行

  寫在最後

• WebAssembly強大到足以編寫操做系統，可是此次WebContainers把這個技術使用方向放在了Node.js上，我以爲是有劃時代意義的
• 在我看來，這個技術在將來最主要應用方向是，可使世界範圍內的軟件在之前沒法運行的地方運行，之後電腦上可能只須要安裝一個谷歌瀏覽器