腳本之家服務器常用軟件

快捷導航

一文詳解如何在瀏覽器前端運行Python程序

更新時間：2025年01月18日 09:30:43 作者：maply

這篇文章主要介紹了如何在瀏覽器前端運行Python程序的相關資料,在前端運行Python代碼的多種方式,包括Pyodide、Brython、Transcrypt等,每種方式都有其特點和適用場景,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在傳統(tǒng)的 Web 開發(fā)中，Python 通常更多地被用作服務器端語言（如 Django、Flask 等），而在瀏覽器端（前端）通常使用 JavaScript 來操作 DOM、進行事件處理等。不過，隨著 WebAssembly 技術的發(fā)展和一些 Python-to-JavaScript 轉譯方案的出現(xiàn)，我們已經(jīng)可以在前端直接運行（或間接編譯）Python 代碼。

下面將詳細介紹在前端運行 Python 程序的多種主要方式、它們的優(yōu)點和局限性，并附帶一些示例或基本使用思路。

一、直接在瀏覽器運行 Python：基于 WebAssembly 的 Pyodide

1. 什么是 Pyodide

Pyodide 是基于 WebAssembly 的一個完整 Python 解釋器項目，它將 CPython（Python 的官方解釋器）編譯成了可以在瀏覽器環(huán)境（或者其它 WebAssembly 運行環(huán)境）里執(zhí)行的版本。換句話說，你不需要安裝任何插件，只要瀏覽器支持 WebAssembly，你就可以在前端環(huán)境里運行幾乎完整的 Python。

2. Pyodide 的主要特點

兼容性好：幾乎完整移植了 CPython，包括標準庫和部分第三方庫的支持（如 NumPy、Pandas 等）。
易集成：官方提供了一個 pyodide.js（或 pyodide.mjs），前端只要將其引入即可使用。
WebAssembly 性能：相較于純 JavaScript 解釋 Python 的方案，Pyodide 的性能更好。

3. 如何使用 Pyodide

引入 pyodide.js從官方的 CDN 或者本地托管，引入 Pyodide 腳本：
```
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
```
提示：版本號可能會不斷更新，可以去 Pyodide Releases 查看最新版本。

初始化 Pyodide 環(huán)境

<script>
  async function initPyodide() {
    // 加載 Pyodide
    let pyodide = await loadPyodide();
    // 在這里就可以使用 pyodide.runPython 執(zhí)行 Python 代碼了
    let result = pyodide.runPython(\`
      import sys
      sys.version
    \`);
    console.log("Python version:", result);
  }
  initPyodide();
</script>

執(zhí)行 Python 代碼

pyodide.runPython(code) 可以直接執(zhí)行一段 Python 代碼字符串，并返回最后一行表達式的值（如果有）。
pyodide.globals 可以獲取當前 Python 解釋器中全局作用域的變量。
除了執(zhí)行簡單的腳本外，還可以加載第三方庫（部分純 Python 庫已經(jīng)預編譯到 Pyodide 里）。

示例：

<script>
  async function initPyodide() {
    let pyodide = await loadPyodide();
    // 安裝 / 加載一些包
    await pyodide.loadPackage("micropip");
    // micropip 可以安裝更多的 Python 包，但需要兼容 WASM，如 pyodide.org 中提到的包

    // 運行簡單的 Python 代碼
    let code = \`
    import math
    def compute_circle_area(r):
        return math.pi * (r ** 2)
    area = compute_circle_area(5)
    \`;
    pyodide.runPython(code);
    let area = pyodide.globals.get("area");
    console.log("Circle area:", area);
  }
  initPyodide();
</script>

4. 優(yōu)缺點

優(yōu)點：
- 幾乎完整地支持 Python 生態(tài)，能夠直接使用很多 Python 包，尤其是科學計算相關。
- 依賴 WebAssembly，高度還原 CPython 功能，運行效率相對其他純 JS 解釋器更高。
缺點：
- 體積較大，需要加載編譯好的 Python 解釋器和相關包，初次加載可能會比較耗時。
- 并非所有 Python 包都能在 Pyodide 中使用，一些依賴本地 C/C++ 擴展的庫需要專門移植。

二、Brython：將 Python 作為瀏覽器腳本語言

1. 什么是 Brython

Brython 是一款用 JavaScript 實現(xiàn)的 Python 解釋器，它的目標是讓 Python 可以取代前端開發(fā)中 JavaScript 的地位。它提供了一個運行時環(huán)境，使用純 JavaScript 解釋 Python 語法，并且封裝了一系列 DOM 操作、瀏覽器接口等，使得你可以像寫 JavaScript 一樣來操作瀏覽器對象。

2. Brython 的使用

引入 Brython

<script src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython_stdlib.js"></script>

HTML 標記與啟動在 <body> 標簽中添加 onload="brython()" 或者用 JavaScript 的方式在 DOM 加載后初始化 Brython：
```
<body onload="brython()">
  ...
</body>
```
在 <script type="text/python"> 中編寫 PythonBrython 允許我們直接在 HTML 文件中使用 <script type="text/python"> 標簽來書寫前端 Python 代碼，如：
```
<script type="text/python">
from browser import document, alert

def greet(ev):
    alert("Hello from Brython!")

document["mybutton"].bind("click", greet)
</script>
```
這里 document["mybutton"] 與 JavaScript 中的 document.getElementById("mybutton") 類似。

3. 優(yōu)缺點

優(yōu)點：
- 使用非常簡單，直接 <script type="text/python"> 就能寫代碼。
- 對 DOM 操作進行了一定的封裝，可以讓 Python 代碼操作瀏覽器 API。
- 代碼體積相對 Pyodide 更?。ó吘箾]有完整移植 CPython）。
缺點：
- Brython 并不包含完整的 Python 標準庫實現(xiàn)，某些場景下功能有限。
- 由于是純 JavaScript 解釋，需要考慮性能影響，復雜運算性能可能遠低于 WebAssembly 方案。
- 一些 Python 第三方庫可能無法直接使用，或需要依賴特定的 Polyfill。

三、Transcrypt：Python 轉譯成 JavaScript

1. 什么是 Transcrypt

Transcrypt 是一個將 Python 代碼編譯成高質(zhì)量、可讀性較高的 JavaScript 代碼的工具?？梢栽陂_發(fā)階段用 Python 編寫邏輯，然后通過 Transcrypt 將其編譯成 JavaScript，最終在瀏覽器端運行的還是 JavaScript。

2. 工作流程

安裝 Transcrypt：
```
pip install transcrypt
```
使用 Transcrypt 編譯 Python 文件：
```
transcrypt -b -m myscript.py
```
- -b 表示在瀏覽器模式下編譯（browser）。
- -m 表示生成映射文件（source map）。
編譯完成后，會生成一個 __javascript__ 文件夾，里面有 myscript.js 以及依賴文件。

在 HTML 中引入編譯后的 JS 文件：

<script src="__javascript__/myscript.js"></script>

這樣，就可以在瀏覽器端使用轉換后的 JS 邏輯。

3. 優(yōu)缺點

優(yōu)點：
- 保持了 Python 語法的開發(fā)體驗。
- 得到的 JavaScript 體積相對較小，且沒有額外的運行時依賴。
- 編譯后的速度與 JavaScript 本身類似（畢竟最終產(chǎn)物是 JS）。
缺點：
- 并不是在瀏覽器里直接執(zhí)行 Python，而是將 Python 轉譯成 JS，某種程度上要對 Python 語法有一定限制。
- 對于 Python 的某些動態(tài)特性和部分庫支持不完美。

四、Skulpt、RapydScript 等其他方案

除上述方案外，還有一些項目也能幫助在前端運行（或近似運行）Python：

Skulpt
- 純 JavaScript 實現(xiàn)的 Python 解釋器。
- 支持 Python 語法的子集，適用于教學或簡單腳本場景。
- 不支持完整標準庫。
RapydScript
- 一種 Python-like 語法，編譯成高效的 JavaScript。
- 更接近于一種獨立的語言，兼具 Python 與 JavaScript 的特性。
Trinket、Replit 等在線平臺
- 通過遠程服務器或 WebAssembly 內(nèi)嵌的方式，在網(wǎng)頁里直接運行 Python 代碼。
- 適合教學、演示或小型項目試驗。

五、適合不同場景的選擇建議

如果你希望在瀏覽器端完整運行 Python 并使用科學計算庫（如 NumPy、Pandas 等）
- Pyodide 是首選方案，但要注意加載速度、兼容性以及內(nèi)存使用。
如果你想在前端用 Python 語法來操作 DOM，替代部分 JavaScript 功能
- Brython 可以嘗試，不過要注意第三方庫的支持以及性能。
如果你的核心需求仍然是將 Python 邏輯轉成最終的 JavaScript
- Transcrypt 可以幫助你在保持 Python 開發(fā)體驗的同時，得到優(yōu)化后的純 JS 代碼。
如果你是教學或簡單的 Python 腳本交互
- Skulpt、Trinket 這類項目或在線平臺可以快速上手，但功能相對有限。

六、總結

在瀏覽器里運行 Python 不再是遙不可及的想法，隨著 WebAssembly 的普及和多種 Python-to-JavaScript 解決方案的出現(xiàn)，前端與 Python 生態(tài)之間的融合將越來越緊密。選擇具體方案時，需要綜合考慮：

是否需要大量使用 Python 第三方庫？
對性能與包體積的要求如何？
是否需要調(diào)用瀏覽器的 DOM 或 Web API？
是否只是教學、實驗，還是要應用到生產(chǎn)環(huán)境？

無論是直接基于 WebAssembly 的 Pyodide、JavaScript 實現(xiàn)的 Brython，還是把 Python 編譯/轉譯為 JavaScript 的 Transcrypt，都是在不同場景下可選的思路。未來，隨著 Web 技術的進一步發(fā)展，前端與 Python 的結合也會更容易、更高效。希望以上介紹能幫助你更好地理解和選擇前端運行 Python 的最佳方式。

到此這篇關于如何在瀏覽器前端運行Python程序的文章就介紹到這了,更多相關瀏覽器前端運行Python程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一文詳解如何在瀏覽器前端運行Python程序

目錄

前言

一、直接在瀏覽器運行 Python：基于 WebAssembly 的 Pyodide

1. 什么是 Pyodide

2. Pyodide 的主要特點

3. 如何使用 Pyodide

4. 優(yōu)缺點

二、Brython：將 Python 作為瀏覽器腳本語言

1. 什么是 Brython

2. Brython 的使用

3. 優(yōu)缺點

三、Transcrypt：Python 轉譯成 JavaScript

1. 什么是 Transcrypt

2. 工作流程

3. 優(yōu)缺點

四、Skulpt、RapydScript 等其他方案

五、適合不同場景的選擇建議

六、總結

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一文詳解如何在瀏覽器前端運行Python程序

目錄

前言

一、直接在瀏覽器運行 Python：基于 WebAssembly 的 Pyodide

1. 什么是 Pyodide

2. Pyodide 的主要特點

3. 如何使用 Pyodide

4. 優(yōu)缺點

二、Brython：將 Python 作為瀏覽器腳本語言

1. 什么是 Brython

2. Brython 的使用

3. 優(yōu)缺點

三、Transcrypt：Python 轉譯成 JavaScript

1. 什么是 Transcrypt

2. 工作流程

3. 優(yōu)缺點

四、Skulpt、RapydScript 等其他方案

五、適合不同場景的選擇建議

六、總結

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、直接在瀏覽器運行 Python：基于 WebAssembly 的 Pyodide

二、Brython：將 Python 作為瀏覽器腳本語言

三、Transcrypt：Python 轉譯成 JavaScript

四、Skulpt、RapydScript 等其他方案

五、適合不同場景的選擇建議

六、總結