WebContainers介紹:如何在瀏覽器運行原生的Nodejs

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"幾年前，我們意識到網絡正朝着一個關鍵的拐點發展。WebAssembly和新功能API的出現，使我們有可能編寫一個基於WebAssembly的操作系統，足以運行Node.js，完全在你的瀏覽器內。我們設想了一個優越的開發環境，它比本地環境更快、更安全、更一致，以實現無縫的代碼協作，而無需建立一個本地環境。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這聽起來很牽強，甚至不可能。但是，如果在網絡瀏覽器裏，能夠爲平面設計、視頻編輯和富文檔編輯提供一個完整運行的環境，我們想知道：開發者最終是否有可能在網絡上來構建這一切？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們決定試一試，挑戰一下。我們希望能有最好的結果，也期待着最壞的結果。兩年後（時間飛逝😅），結果是出乎意料的驚人。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"今天，我們很高興地宣佈WebContainers。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebContainers允許你創建全棧式的Node.js環境，在幾毫秒內啓動，並立即在線和鏈接共享--只需一次點擊。該環境加載了VS Code強大的編輯體驗、一個完整的終端、npm等。它也完全在你的瀏覽器中運行，這產生了一些關鍵的好處。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"比你的本地環境更快","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構建完成的速度比yarn/npm快20%，軟件包安裝完成的速度比yarn/npm快5倍以上。","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"瀏覽器中的Node.js調試","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與Chrome DevTools無縫集成，實現了本地後端調試，無需安裝或擴展。","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"默認情況下是安全的","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有代碼的執行都發生在瀏覽器的安全沙盒內，而不是在遠程虛擬機或本地二進制文件上。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同樣，這些環境不是在遠程服務器上運行。相反，每個環境都完全包含在你的網絡瀏覽器中。這是正確的：Node.js運行時間本身是有史以來第一次在瀏覽器中原生運行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可以在StackBlitz.com上自己試試，或者點擊下面的一個啓動項目。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在幾毫秒內，在瀏覽器中啓動一個Node.js項目（不要眨眼！）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/nextjs","title":"","type":null},"content":[{"type":"text","text":"NEXT.JS","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/graphql","title":"","type":null},"content":[{"type":"text","text":"GRAPHQL","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/http-server","title":"","type":null},"content":[{"type":"text","text":"HTTP服務器","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/node","title":"","type":null},"content":[{"type":"text","text":"node.js啓動器","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從今天的發佈會開始，WebContainers已經進入了公開測試階段。目前的支持包括Next.js、GraphQL和Vanilla Node.js，我們正在與其他開源項目合作以擴大支持。如果你想與我們合作，請查看我們的","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/stackblitz/webcontainer-core/blob/main/Supported_frameworks.md","title":"","type":null},"content":[{"type":"text","text":"repo","attrs":{}}]},{"type":"text","text":"）。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c17767d169a0c36599000f191f8158c.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"爲什麼？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置一個本地環境是還是會很麻煩的--特別是當你想快速建立一個很酷的想法的原型，嘗試一個新的開源庫，一個bug重現或與同事合作（\"嘿，你可以在本地快速檢查這個分支嗎？\" 😒）。隨着網絡開發向Next.js這樣的全棧式SSR和SSG工具鏈發展，這個問題比以往任何時候都更常見。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"運行用戶提交的代碼進行錯誤重現，也正在成爲開源維護者和財富100強公司的一個主要安全風險，這些類型的供應鏈攻擊正在上升。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"StackBlitz通過利用瀏覽器內置的幾十年的速度和安全創新來解決這些問題。StackBlitz的所有計算都是在瀏覽器的安全沙盒中即時發生的，甚至可以脫離你的本地機器。這種模式也帶來了一些關鍵的開發和調試的好處（更多關於這些的內容在後面）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"那麼Code Spaces/Sandbox/Repls/...呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"傳統的在線集成開發環境在遠程服務器上運行你的整個開發環境，並將結果通過互聯網傳回你的瀏覽器。這種方法的問題在於，它幾乎沒有什麼安全方面的優勢，而且幾乎在所有方面都提供了比本地機器更差的體驗：它需要幾分鐘的時間來旋轉容器，容易出現網絡延遲，不能離線工作，經常導致網絡超時，調試凍結/破碎的容器幾乎是不可能的，而且點擊刷新只是將你重新連接到破碎的容器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"釋放你的瀏覽器的力量","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用Chrome DevTools對Node.js進行無縫調試。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事實證明，瀏覽器真的很擅長調試Javascript。令人震驚，我知道；) 通過在瀏覽器中執行Node.js，與Chrome DevTools的整合開箱即用。無需安裝，無需擴展，只需在瀏覽器中進行本地後端調試即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f988161f44e2314560a4f87d31fcdfc8.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"運行服務器在你的瀏覽器中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"是的，實際上。WebContainers包括一個虛擬化的TCP網絡堆棧，它被映射到你的瀏覽器的ServiceWorker API，使你能夠立即按需創建實時的Node.js服務器，即使你下線也能繼續工作。由於它完全在瀏覽器的安全沙盒中運行，服務器響應的延遲比localhost更小!，並保護你的網絡服務器免受localhost的攻擊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"零依賴，甚至在幾毫秒內啓動","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器在執行Javascript和WebAssembly時速度驚人。我們利用這一點來創建一個即時的開發操作系統，不使用服務器資源，也不會在你的電腦上創建一個node_modules黑洞。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"每次加載頁面時都有一個新的環境","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"再見，rm -rf node_modules! WebContainer的內置npm客戶端是如此之快，以至於它在每次頁面加載時都會運行一個全新的安裝，確保你每次都能得到一個乾淨的環境。如果你的環境真的出了問題，你可以回到一個乾淨的狀態，就像你做任何其他網絡應用一樣：點擊刷新按鈕。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ed/ed7e003425807a0366655cea76c6ed83.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"零延時，可離線工作","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果說居家工作的轉變讓我們有什麼教訓的化，那其中之一就是網絡故障經常發生。互聯網服務供應商經常宕機。有了StackBlitz，你可以繼續工作，沒有網絡連接，無論你是在火車上，在飛機上，還是在雨中的後座上。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c3869c8dd481801e041c6f7b2ebfc85.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"默認情況下是安全的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有了StackBlitz新穎的計算模型，100%的代碼執行都發生在瀏覽器安全沙盒中。這導致了一個比本地更快、更少限制的開發環境，同時提供了更多的安全性，這是一個非常罕見的組合。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事實上，默認的安全態勢是如此穩固，我們的嵌入式軟件包管理器是第一個公開可用的工具，解決了Sam Saccone五年前發現的長期未解決的npm漏洞。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":18}},{"type":"strong","attrs":{}}],"text":"讓我們停一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":14}}],"text":"真正令人費解的地方在於這一切究竟是怎麼發生的呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"網絡 \"應用和 \"本地 \"應用之間有什麼區別？Chrome團隊一直在開發新的能力API以縮小這一差距，而且這一差距正在迅速接近零。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"桌面級編輯。即時的桌面應用安裝","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於Chrome的PWA功能，安裝StackBlitz就像一次點擊一樣簡單。幾毫秒後，你就有了一個可以從你的Dock啓動的桌面IDE。你在日常工作中所依賴的鍵位，如CMD + W和CMD + T 這般工作。此外，就像在本地一樣，你有能力在一個完全獨立的窗口中打開和調試你的開發服務器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/27/27a02ad6c4138d578df44d839575f908.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"從你的本地文件系統中讀取和寫入","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Chrome團隊最近推出了文件系統訪問API。這使PWA有能力請求對你的本地文件系統的部分進行持久的讀寫訪問。與StackBlitz WebContainers搭配，這暗示了一個潛在的未來，不需要node、npm、git、VS Code或其他安裝在你硬盤上的東西。你只需要一個網絡瀏覽器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7c/7c04f32416f3186f06fd904b7b21cbd7.gif","alt":null,"title":"技巧問題：哪一個是StackBlitz，哪一個實際上是VS Code？🙃","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"下一步會做什麼呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在接下來的一兩個季度，我們將在測試階段與開源維護者合作，爲他們的用戶羣帶來完全的兼容性，並穩定WebContainer的核心技術。在那之後，我們將推出功能齊全的StackBlitz v2。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你能做到這一點，那不是很好嗎。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在每個PR上都可以打開一個環境（編輯器+實時預覽！）。你可以瀏覽、玩耍、測試，從而進行真正紮實的代碼審查，而不必關閉你正在進行的其他項目。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同時查看多個分支，並排比較。(你會考慮在本地環境中這樣做嗎？在StackBlitz中，這意味着只需打開一個新標籤)","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從瀏覽器上直接更新你的Docusaurus文檔或Gatsby博客。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不需要安裝任何東西就可以學習世面上的任何JavaScript前端或後端框架!","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"傳送門♾️","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們與Vercel和Next.js的合作也纔剛剛開始。準備好獲得你從未見過的無縫開發體驗吧（","attrs":{}},{"type":"link","attrs":{"href":"https://stackblitz.com/v2","title":"","type":null},"content":[{"type":"text","text":"這裏可訪問","attrs":{}}]},{"type":"text","text":"）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"軟件開發的未來是光明的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有很多工作要做，但我們現在可以自信地說，一個沒有node、npm、git和VS Code本地實例的未來是切實可行的，甚至可以讓世界上的軟件在以前無法運行的地方運行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想象一下，在未來，你可以在Cloudflare Workers等平臺的邊緣運行WebContainers，或者在iPad上原生運行整個開發環境。在瀏覽器中通過WASI運行你最喜歡的VS Code擴展，或運行Python、Java或R等非網絡本地語言，如何？還有許多未知數有待發現和解決，但我們相信這項技術的未來機會是巨大的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些事情可能看起來有點瘋狂。而且還有許多未知的未知因素。但我們認爲這個新的未來值得一試。因爲，誰知道呢？它最終可能會有意想不到的驚人效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f6/f6f905ea3fab59eeea64c208e5d10a78.png","alt":null,"title":"","style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}