如下圖所示，我們可以利用 StackBlitz，在瀏覽器裡開發 Node.js 應用：

![](https://img-blog.csdnimg.cn/img_convert/31b0d6d505aa24ce328f76d48d65ef4a.png)

這一切歸功於所謂的 WebContainer，如下圖 Booting WebContainer 和 Installing dependencies 的資訊：

![](https://img-blog.csdnimg.cn/img_convert/43c138afec445fa28c9aa9a4656099b4.png)

幾年前，我們就能感覺到，web 開發正在走向一個關鍵的拐點。

WebAssembly 和新的 capabilities  API 的出現，使得編寫一個基於 WebAssembly 的作業系統似乎成為可能，該作業系統功能強大到可以完全在瀏覽器中執行 Node.js。 提供一個比本地環境更快、更安全、更一致的卓越開發環境，以實現無縫程式碼協作，而無需設定本地環境，這個目標似乎離 Web 開發人員越來越近了。

實現這個目標的關鍵之一是 Web Container.

傳統線上 IDE 在遠端伺服器上執行您的整個開發環境，並將結果透過 Internet 流式傳輸回您的瀏覽器。 這種方法的問題在於，它幾乎沒有安全優勢，並且在幾乎所有方面都比本地機器提供更糟糕的體驗：啟動容器需要幾分鐘時間，容易出現網路延遲，無法離線工作，經常導致網路超時， 除錯凍結/損壞的容器幾乎是不可能的，點選重新整理只會將您重新連線到損壞的容器。

StackBlitz 提供的 WebContainers 允許您建立全棧 Node.js 環境，該環境可在幾毫秒內啟動並立即處於線上狀態，可以透過連結共享——只需單擊一下。 該環境載入了 VS Code 強大的編輯體驗、完整的終端、npm 等。 它也完全在瀏覽器中執行，這會產生下列這些關鍵的好處：

- 比本地環境更快。 構建完成速度比 yarn/npm 快 20%，包安裝完成速度 >= 5 倍。
- Node.js 應用可以在瀏覽器中除錯。 與 Chrome DevTools 的無縫整合支援本地後端除錯，無需安裝或擴充套件。
- 預設的安全級別。 所有程式碼執行都發生在瀏覽器的安全沙箱內，而不是遠端虛擬機器或本地二進位制檔案上。

同樣，這些環境不在遠端伺服器上執行。 相反，這些執行環境都完全包含在 Web 瀏覽器中。 Node.js 執行時本身第一次在瀏覽器內部本地執行。

什麼是 StackBlitz 的 web container

相關文章