這篇文章主要介紹“WebContainer是什么及有哪些功能”，在日常操作中，相信很多人在WebContainer是什么及有哪些功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”WebContainer是什么及有哪些功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)服務(wù)項目包括郁南網(wǎng)站建設(shè)、郁南網(wǎng)站制作、郁南網(wǎng)頁制作以及郁南網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，郁南網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到郁南省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.什么是WebContainers？

WebContainers 是一個基于 WebAssembly 的微型操作系統(tǒng)，其允許在瀏覽器選項卡內(nèi)本地啟動 Node.js 服務(wù)器。 可以將其視為在瀏覽器內(nèi)的頁面加載時無縫交付的“Electron polyfill”。

WebContainers提供的API 允許無頭訪問 ，允許開發(fā)人員靈活地在該技術(shù)之上構(gòu)建自己的應(yīng)用程序。 同時，WebContainers的諸多能力都已開源，并為企業(yè)用例提供支持和許可。WebContainers的主要能力包括：

• 運行本機包管理器：在瀏覽器中運行原生版本的 npm、pnpm 和 yarn，一切都在您的應(yīng)用程序中，速度比本地快 10 倍。

• 完整的瀏覽器支持：支持在所有主流瀏覽器中運行 WebContainer，從基于 Chromium 的瀏覽器到 Firefox 或 Safari TP

• 所有主流框架支持：立即啟動運行任何主流現(xiàn)代框架的一次性環(huán)境。

• 開箱即用地運行 Wasm：將您最喜歡的語言或框架移植到 Wasm 以在 WebContainers 中運行

2.WebContainers API 的主要功能

2.1 瀏覽器內(nèi)文件系統(tǒng)

WebContainers 使用存儲在內(nèi)存中的臨時虛擬文件系統(tǒng)啟動，允許開發(fā)者以編程方式載入/載出文件和目錄，并對它們執(zhí)行標(biāo)準(zhǔn)文件系統(tǒng)操作。

const file = await webcontainerInstance.fs.readFile('/package.json', 'utf-8');
//   readFile文件
const files = await webcontainerInstance.fs.readdir('/src');
// readdir讀取目錄
await webcontainerInstance.fs.rm('/src', { recursive: true });
// 刪除目錄
await webcontainerInstance.fs.writeFile('/src/main.js', 'console.log("Hello from WebContainers!")');
// 寫文件
await webcontainerInstance.fs.mkdir('src');
// mkdir

2.2 開發(fā)服務(wù)器

在 WebContainer 中可以按需啟動 HTTP 服務(wù)器，并接收一個預(yù)覽 URL，該 URL 可以與用戶共享或使用 iframe 直接顯示在應(yīng)用程序中。 虛擬化的 TCP 網(wǎng)絡(luò)堆棧映射到瀏覽器的 ServiceWorker API 并完全在本地運行，因此即使用戶失去互聯(lián)網(wǎng)連接，服務(wù)器也將繼續(xù)工作。

async function startDevServer() {
  // 執(zhí)行 `npm run start` 啟動Express服務(wù)器
  await webcontainerInstance.spawn('npm', ['run', 'start']);
  // 等待 `server-ready` 事件
  webcontainerInstance.on('server-ready', (port, url) => {
    iframeEl.src = url;
  });
}

在瀏覽器開發(fā)工具中，在下一步運行 startDevServer() 之后，將能夠看到正在運行的開發(fā)服務(wù)器：

注意：WebContainers 公開server-ready事件，該事件在服務(wù)器準(zhǔn)備好接受請求時發(fā)出。您可以使用 webcontainerInstance.on 監(jiān)聽事件。

2.3 Node.js 命令行

Node.js 命令可以直接傳遞到 WebContainers 以在頁面加載時執(zhí)行或由應(yīng)用程序中的用戶行為觸發(fā)。 你可以 npm 安裝包，啟動新的節(jié)點服務(wù)器，或者構(gòu)建應(yīng)用程序，就像在本地開發(fā)環(huán)境中一樣。

webcontainerInstance.spawn('npm', ['install']);
webcontainerInstance.spawn('ls', ['src', '-l']);
// 安裝依賴
async function installDependencies() {
  const installProcess = await webcontainerInstance.spawn('npm', ['install']);
  return installProcess.exit;
}
// 函數(shù)調(diào)用
window.addEventListener('load', async () => {
  textareaEl.value = files['index.js'].file.contents;
  webcontainerInstance = await WebContainer.boot();
  await webcontainerInstance.mount(files);
  const exitCode = await installDependencies();
  // 安裝依賴
  if (exitCode !== 0) {
    throw new Error('Installation failed');
  };
});

總之，WebContainer API 為 Web 應(yīng)用程序提供了更新級別的靈活性、可擴展性和性能！

3.使用 WebContainer API 構(gòu)建什么？

stackblitz與社區(qū)成員密切合作并根據(jù)反饋、需求和問題開發(fā)了 WebContainers。 目前基于WebContainers的用例也越來越多，比如下面的經(jīng)典用例：

3.1 交互式編碼教程

Rich Harris 主導(dǎo)的 Svelte已經(jīng)開始使用 WebContainers 。 他們構(gòu)建了一個令人印象深刻的交互式教程，教您如何逐步使用 SvelteKit。 這是獲得框架實踐經(jīng)驗并了解其工作原理的好方法，同時獲得了一致好評！

Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構(gòu)建應(yīng)用程序的編譯階段來處理。

與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應(yīng)用程序的狀態(tài)更改時就能像做外科手術(shù)一樣更新 DOM。

3.2 生產(chǎn)級 Web IDE

StackBlitz使用 Webcontainers 構(gòu)建了 Codeflow IDE，它是桌面 Visual Studio Code IDE 的全功能版本，支持 git 命令、桌面擴展和帶終端的 Node.js 開發(fā)服務(wù)器。

3.3 人工智能應(yīng)用

WebContainer API 還解鎖了開發(fā)人員可以創(chuàng)建的一類新的 AI 應(yīng)用程序。 想象一下使用 OpenAI 集成來生成完全在瀏覽器內(nèi)運行的實時應(yīng)用程序！

3.4 無代碼/低代碼環(huán)境

WebContainers 支持以前不可能實現(xiàn)的新型低代碼或無代碼解決方案。 StackBlitz的用戶友好型文檔編輯工具 Web Publisher 等工具確實使網(wǎng)絡(luò)更加開放并打破了進入壁壘。

4.WebContainer的hello-world示例

應(yīng)用配置環(huán)境:

export const projectFiles = {
  myProject: {
    directory: {
      'package.json': {
        file: {
          contents: '...',
        }
      },
      'index.js': {
        file: {
          contents: '...',
        }
      },
    }
  }
};

hello-world.ts程序：

import { WebContainer, FileSystemTree } from '@webcontainer/api';
import { projectFiles } from './project-files.ts';

async function main() {
  // 首先我們啟動一個 WebContainer
  const webcontainer = await WebContainer.boot();
   // 啟動容器后，我們復(fù)制所有項目文件
   // 進入容器的文件系統(tǒng)
  await webcontainer.mount(projectFiles);
   // 安裝文件后，通過生成 `npm install` 來安裝依賴
  const install = await webcontainer.spawn('npm', ['i']);
  await install.exit;
  // 一旦安裝了所有依賴項，我們就可以生成 `npm`
  // 從項目的 `package.json` 運行 `dev` 腳本
  await webcontainer.spawn('npm', ['run', 'dev']);
}

到此，關(guān)于“WebContainer是什么及有哪些功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

新聞名稱：WebContainer是什么及有哪些功能
文章URL：http://chinadenli.net/article6/jijcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站設(shè)計公司、ChatGPT、標(biāo)簽優(yōu)化、微信小程序、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)