網路瀏覽器中執行Python指令碼PyScript剖析

2022-08-01 14:00:17

正文

PyScript可以讓你在瀏覽器中直接執行Python指令碼，與JavaScript並排，在你的程式碼和網頁之間進行雙向互動。

由Anaconda建立的PyScript是一項實驗性的但很有前途的新技術，它使Python執行時在支援WebAssembly的瀏覽器中作為一種指令碼語言使用。

每個現代常用的瀏覽器現在都支援WebAssembly，這是許多語言（如C、C++和Rust）可以編譯的高速執行時標準。Python的參考實現是用C語言編寫的，一個早期專案Pyodide提供了Python執行時的WebAssembly移植。

不過，PyScript的目標是提供一個完整的瀏覽器環境，將Python作為一種網路指令碼語言執行。它建立在Pyodide之上，但增加或加強了一些功能，如從標準庫中匯入模組、使用第三方匯入、設定與檔案物件模型（DOM）的雙向互動，以及做許多其他在Python和JavaScript世界中有用的事情。

現在，PyScript仍然是一個原型和實驗性專案。Anaconda 並不推薦在生產中使用它。但好奇的使用者可以在PyScript網站上嘗試一些例子，並使用可用的元件在瀏覽器中構建實驗性的Python+JavaScript應用程式。

在這篇文章中，我們將參觀一下PyScript的基礎知識，看看它是如何讓Python和JavaScript進行互動的。

使用PyScript程式設計

PyScript的核心是一個單一的JavaScript include，你可以將其新增到網頁中。這個 include 載入了基本的 PyScript 執行時間，並自動新增了對 PyScript 中使用的自定義標籤的支援。

下面是一個PyScript的 "hello, world "專案的簡單例子。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  />
        <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
    </head>
    <body>
<py-script output="out">
print("Hello world")
</py-script>
<div id="out"></div>
    </body>
</html>

head 檔案中的script 標籤載入了PyScript的核心功能。pyscript.css 樣式表是可選的，但很有用。在其他方面，它在頁面載入時向用戶插入了關於頁面正在做什麼的通知--載入Python執行時，初始化，等等。

Python程式碼被包含在自定義的py-script 標籤中。請注意，程式碼應該按照Python的縮排慣例進行格式化，否則將無法正常執行。如果你使用的編輯器能自動重新格式化HTML，請注意這一點；它可能會弄亂py-script 塊的內容，使其無法執行。

一旦PyScript元件載入完畢，任何Python程式碼都會被評估。如果標籤中的指令碼寫到stdout (如print) 語句中，你可以通過提供一個output 屬性來指示在頁面的什麼地方顯示輸出。在這個例子中，指令碼的stdout 被引導到ID為"out" 的div 。

如果你把它儲存到一個檔案中，並在網路瀏覽器中開啟它，你會首先看到一個 "載入 "指示器和一個暫停，因為瀏覽器獲得了PyScript的執行時間並將其設定好。該執行時在未來的載入中應保持快取，但仍需要一些時間來啟用。之後，Hello world 應該出現在頁面上。

標準庫匯入

僅僅使用Python的內建程式的指令碼只有一點用處。Python 的標準庫在 PyScript 中可用，就像你在常規 Python 中使用它一樣：只需import 並開始工作。標準庫的匯入在PyScript中應該只是工作。

如果你想修改上面的指令碼塊來顯示當前的時間，你不需要用與傳統Python不同的方法。

import datetime
print ("Current date and time:",    datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))

使用來自PyPI的庫

如果我們想從PyPI中安裝一個包並使用它呢？PyScript 有另一個標籤，py-env ，它指定了需要安裝的第三方軟體包。讓我們用這兩個塊來替換原始指令碼中的py-script 塊。

<py-env>
- humanize
</py-env>
<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>

py-env 塊讓我們列出要新增的軟體包，就像我們在 Python 專案的requirements.txt 檔案中列出它們一樣。然後我們可以像對待其他 Python 軟體包一樣匯入和使用它們。在這個例子中，我們使用了一個名為humanize 的第三方軟體包，以使數位輸出更容易閱讀。

注意，並不是所有來自PyPI的包都能按預期安裝和執行。例如，requests 需要存取尚不支援的網路元件。(這個問題的一個可能的解決方法是使用pyodide.http.pyfetch ，它被原生支援)。但是純 Python 包，如humanize ，應該執行良好。Anaconda 提供的例子中使用的包，如numpy,pandas,bokeh, 或matplotlib ，也可以執行。

本地匯入

對於另一種常見的情況，假設你想從與你的網頁在同一目錄樹下的其它 Python 指令碼中匯入。使用匯入可以更容易地將更多的 Python 邏輯從網頁本身移出，在那裡它和你的簡報混在一起，可能會變得難以處理。

通常，Python 使用檔案系統中其他.py 檔案的存在作為它可以匯入的指示。PyScript 不能以這種方式工作，所以你需要指定哪些檔案可以作為可匯入模組。

比方說，你有一個名為index.html 的網頁，在你的 web 伺服器的某個目錄下，你想在它旁邊放置一個名為main.py 的 Python 檔案。這樣，你的頁內指令碼就可以只是import main ，而你可以把大部分的 Python 邏輯限制在實際的.py 檔案中。

在你的py-env 塊中指定你想匯入的 Python 檔案。

- paths:`` - ./main.py

這將允許main.py ，在與網頁本身相同的 web 伺服器目錄下，可以與import main 一起匯入。

要記住一件重要的事情。你不能對你在瀏覽器中本地啟動的網頁進行這樣的匯入。這是由於WebAssembly執行時和瀏覽器本身對檔案系統存取的限制造成的。相反，你需要在網路伺服器上託管這些網頁，以提供網頁和.py 檔案。

[也在InfoWorld上：在2022年編寫現代Python的4個關鍵]

REPL 標籤

Python使用者應該熟悉Jupyter Notebook，它是Python的瀏覽器內實時編碼環境，通常用於數學和統計學。PyScript為這樣的環境提供了一個原始的構建模組，即py-repl 標籤。

py-repl 在網頁上生成一個輸入欄位，其功能就像一個非常基本的Jupyter筆電環境。下面是一個來自Anaconda自己演示的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <h1><b>pyscript REPL</b></h1>
    Tip: press Shift-ENTER to evaluate a cell
    <div>
      <py-repl id="my-repl" auto-generate="true"> </py-repl>
    </div>
  </body>
</html>

執行這段程式碼，你會看到一個輸入欄位，它的工作原理類似於Python的REPL。

目前，REPL標籤很少有記錄的自定義方式。例如，如果你想以程式設計方式存取一個單元格的內容或其結果，沒有明確的檔案說明如何做到這一點。

IDG

PyScript的類似Jupyter的REPL元件可以讓你在頁面中互動式地執行Python，儘管它還不是很靈活或可設定。

與 JavaScript 事件監聽器互動

因為 PyScript 是基於pyodide 的，所以它使用pyodide 的機制來與 DOM 互動。例如，如果我們想獲得一個網頁上的輸入框的值並在我們的Python程式碼中使用它，我們會這樣做。

<input id="txt">
<py-script>
from js import document, console
from pyodide import create_proxy
def _eventlog(e):
    console.log(f"Input value: {e.target.value}")
eventlog = create_proxy(_eventlog)
document.getElementById("txt").addEventListener("input", eventlog)
</py-script>

js 庫為許多常見的 JavaScript 實體提供了一個 Python 介面，比如document 和console 物件。它們在PyScript中的行為與在JavaScript中的行為幾乎完全相同。pyodide 中的create_proxy 函數可以讓我們取一個 Python 函數物件併為它生成一個 JavaScript 介面，因此它可以被用作input 框的事件監聽器。input 框中的任何按鍵都會被記錄到控制檯，但它們也可以在Python端被處理。

以上就是網路瀏覽器中執行Python指令碼PyScript剖析的詳細內容，更多關於瀏覽器執行Python PyScript的資料請關注it145.com其它相關文章！