Pyodide:在瀏覽器中運行 Python 的完整指南

作者: Calpa Liu
字數:1636
出版:2025 年 3 月 29 日
分類: 前端開發 後端開發 科學計算 Python Node.js WebAssembly
Pyodide 作為一種強大的技術解決方案,讓開發者能夠直接在瀏覽器中運行 Python 代碼,為 Web 開發帶來了新的可能性。本文將深入探討 Pyodide 的核心概念、優勢、使用方法以及安裝配置指南,幫助開發者充分利用這一創新技術。

Pyodide 的定義與原理

Pyodide 是一個基於 WebAssembly/Emscripten 的 Python 發行版,允許開發者在瀏覽器和 Node.js 環境中運行 Python 代碼。作為 Mozilla 的 Iodide 項目的一部分,Pyodide 於 2018 年由 Michael Droettboom 創建,目的是為了支持交互式科學計算和通信。

Pyodide 的核心原理是將 CPython 解釋器編譯為 WebAssembly (WASM),使其能夠在瀏覽器環境中執行。這一技術突破解決了傳統上在瀏覽器中直接運行 Python 代碼的挑戰,為開發者提供了一個全新的開發範式。

Pyodide 的技術架構

Pyodide 不僅僅是將 Python 解釋器移植到瀏覽器中,它還包含了許多重要的科學計算庫,如 NumPy、Pandas、SciPy、Matplotlib 和 scikit-learn 等。這些庫使得開發者能夠在瀏覽器中進行複雜的數據處理和科學計算,而無需依賴服務器端的處理能力。

Pyodide 的優勢

客戶端計算能力

Pyodide 的最大優勢之一是能夠將計算任務從服務器轉移到客戶端執行,這在數據科學和科學計算領域特別有價值。通過在瀏覽器中運行 Python 代碼,開發者可以:

  • 減少對服務器資源的依賴
  • 提高應用的響應速度
  • 增強用戶的隱私保護(數據不需要傳輸到服務器)
  • 創建離線可用的應用程序

強大的跨語言整合

Pyodide 提供了強大的 JavaScript 與 Python 之間的函數接口,使開發者能夠在代碼中無縫混合這兩種語言。這種整合支持:

  • 完整的錯誤處理機制(在一種語言中拋出錯誤,在另一種語言中捕獲)
  • 支持 async/await 異步操作
  • Python 代碼可以直接訪問 Web API

豐富的生態系統支持

Pyodide 使開發者能夠使用 Python 豐富的生態系統:

  • 支持通過 micropip 安裝任何純 Python 包
  • 預裝了大量科學計算和數據分析庫
  • 許多帶有 C、C++ 和 Rust 擴展的包也已被移植到 Pyodide 中

教育與學習便利性

Pyodide 為 Python 教育提供了極大的便利:

  • 消除了初學者在安裝和配置 Python 環境時遇到的障礙
  • 適用於學校等限制網絡訪問的環境,學生無需下載 Python 即可學習
  • 提供即時反饋,增強學習體驗

如何使用 Pyodide

基本設置與使用

首先,需要在 HTML 頁面中加載 Pyodide:

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pyodide示範</title>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.27.4/full/pyodide.js"></script>
</head>
<body>
  <div id="output"></div>
  
  <script>
    async function main() {
      let pyodide = await loadPyodide();
      console.log(pyodide.runPython(`
        import sys
        sys.version
      `));
    }
    main();
  </script>
</body>
</html>

在加載 Pyodide 後,我們可以使用runPython()方法執行 Python 代碼:

// 執行簡單的 Python 計算
let result = pyodide.runPython(`
  def square(x):
    return x * x
  result = square(7)
  print(f"7 的平方是 {result}")
  result
`);
console.log("Python 計算結果:", result);

使用 Python 庫

Pyodide 的強大之處在於能夠使用各種 Python 庫:

// 加載 NumPy 庫
await pyodide.loadPackage("numpy");
let result = pyodide.runPython(`
  import numpy as np
  arr = np.array([1, 2, 3, 4, 5])
  mean = np.mean(arr)
  print(f"數組的平均值是 {mean}")
  mean
`);
console.log("Python 中計算的平均值:", result);

與 DOM 交互

Pyodide 允許 Python 代碼通過代理與網頁的 DOM 進行交互:

// Python 修改 DOM 內容
pyodide.runPython(`
  from js import document
  output_div = document.getElementById('output')
  output_div.innerHTML = "這段內容由 Python 設置!"
`);

處理用戶輸入

Pyodide 可以處理用戶輸入並執行相應的 Python 代碼:

async function processPython() {
  if (!pyodide) {
    pyodide = await loadPyodide();
  }
  let input = document.getElementById('user-input').value;
  let result = pyodide.runPython(`
    input_string = "${input}"
    reversed_string = input_string[::-1]
    print(f"反轉後的字串:{reversed_string}")
    reversed_string
  `);
  document.getElementById('output').innerText = "Python 說:" + result;
}

Pyodide 安裝指南

在瀏覽器中使用 Pyodide

最簡單的方式是通過 CDN 加載 Pyodide:

<script src="https://cdn.jsdelivr.net/pyodide/v0.27.4/full/pyodide.js"></script>

不同版本和變體的 CDN URL 格式:

  • 最新穩定版:https://cdn.jsdelivr.net/pyodide/v0.27.4/full/pyodide.js
  • 調試版(未壓縮):https://cdn.jsdelivr.net/pyodide/v0.27.4/debug/pyodide.js

在 Node.js 項目中使用 Pyodide

在 Node.js 項目中安裝和使用 Pyodide:

# 創建Node.js項目
mkdir pyodide-example
cd pyodide-example
npm init -y

# 安裝Pyodide
npm install pyodide

創建index.ts文件:

const { loadPyodide } = require("pyodide");

async function main() {
  let pyodide = await loadPyodide();
  await pyodide.loadPackage("numpy");
  
  // 執行 Python 代碼
  let result = await pyodide.runPythonAsync(`
    import numpy as np
    arr = np.array([1, 2, 3, 4, 5])
    mean = np.mean(arr)
    print(f"數組的平均值是 {mean}")
    mean
  `);
  
  // 輸出結果
  console.log("Python 中計算的平均值:", result);
}

main();

下載和部署 Pyodide

除了使用 CDN 外,還可以從 GitHub 下載 Pyodide 發布版並自行部署:

  1. 完整發行版:pyodide-0.27.4.tar.bz2(包含所有供應商包,200+MB)
  2. 最小核心文件:pyodide-core-0.27.4.tar.bz2(與使用npm install pyodide安裝的文件集相同)

使用 Python 的內建 HTTP 伺服器在本地部署 Pyodide:

python -m http.server

然後導航到http://localhost:8000,Pyodide REPL 應該就會加載。

Pyodide 應用場景

Web3 與區塊鏈應用

Pyodide 可以在區塊鏈應用中集成 Python 的數據分析和科學計算能力:

  • 在客戶端執行區塊鏈數據分析
  • 在 DApp 中實現複雜的計算邏輯
  • 結合 TypeScript 和 Python 創建強大的混合代碼庫

機器學習應用

Pyodide 使機器學習能力在瀏覽器中實現:

  • 客戶端模型訓練和執行
  • 個性化推薦系統
  • 交互式機器學習教程和教育平台

科學計算與模擬

科學家和工程師可以使用 Pyodide 直接在瀏覽器中運行模擬和科學計算:

  • 物理、化學和生物學教育的交互式模擬
  • 工程和科學研究的實時計算工具

結論

Pyodide 代表了 Web 開發和 Python 生態系統融合的重要里程碑,為開發者提供了在瀏覽器中執行 Python 代碼的強大能力。通過消除服務器依賴、利用 Python 豐富的庫生態系統,以及提供無縫的 JavaScript 與 Python 集成,Pyodide 開啟了 Web 應用開發的新可能性。

對於 Web3 開發者來說,Pyodide 提供了一個獨特的機會,可以將 Python 的數據處理和分析能力與區塊鏈技術結合,創建更強大、更智能的去中心化應用。儘管 Pyodide 的文件大小和加載時間是需要考慮的因素,但對於許多應用程序而言,特別是那些需要複雜計算或數據處理的應用程序,其優勢遠遠超過了這些成本。

隨著 Web 技術和 Python 生態系統的不斷發展,Pyodide 將繼續演進,為開發者提供更多可能性,讓 Python 在瀏覽器環境中發揮更大的作用。

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。