Pyodide详细介绍及使用

最新推荐文章于 2025-03-31 17:03:02 发布

maply

最新推荐文章于 2025-03-31 17:03:02 发布

阅读量1.3k

点赞数 10

分类专栏： Python Node.js 文章标签： python Pyodide 前端 javascript webassembly wasm cpython

本文链接：https://blog.csdn.net/maply/article/details/145140419

版权

Node.js 同时被 2 个专栏收录

22 篇文章

订阅专栏

Python

6 篇文章

订阅专栏

Pyodide 的详细介绍及使用

Pyodide 是一种基于 WebAssembly 的 Python 环境，允许在 Web 浏览器中运行 Python 代码，并使用科学计算库和其他第三方库。它最初由 Mozilla 开发，现在作为一个独立的开源项目进行维护。

Pyodide 的特点

完整的 Python 环境：
- Pyodide 提供了一个接近完整的 CPython 解释器。
- 支持绝大多数 Python 标准库和许多第三方纯 Python 库。
WebAssembly 支持：
- 使用 WebAssembly 将 CPython 编译为可在浏览器中运行的模块。
- 提供了良好的性能，但初次加载会稍慢。
与 JavaScript 互操作：
- Python 代码可以直接调用 JavaScript 对象和函数。
- JavaScript 也可以访问 Python 环境中的变量和函数。
支持科学计算：
- 内置对科学计算库（如 NumPy、Pandas）的支持，非常适合科学计算和数据分析。
独立运行：
- 不需要服务器端支持，所有代码和数据都在浏览器中运行。
- 特别适合离线应用或本地计算。

Pyodide 的基本使用

1. 安装与引入

Pyodide 是一个纯前端解决方案，你可以直接从 CDN 加载它：

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

2. 初始化 Pyodide 环境

加载 Pyodide 环境是异步的，需要等待加载完成才能使用。

<script>
  async function initPyodide() {
    // 加载 Pyodide
    let pyodide = await loadPyodide();
    console.log("Pyodide loaded successfully!");
  }
  initPyodide();
</script>

3. 运行简单的 Python 代码

可以通过 pyodide.runPython 方法直接运行 Python 代码，并获取返回值：

<script>
  async function runPythonCode() {
    let pyodide = await loadPyodide();
    // 运行一段 Python 代码
    let result = pyodide.runPython(\`
      import math
      math.sqrt(16)
    \`);
    console.log("Result:", result); // 输出 4.0
  }
  runPythonCode();
</script>

4. 加载 Python 库

Pyodide 内置了部分第三方库支持，如 NumPy 和 Pandas。如果需要加载更多的库，可以使用 pyodide.loadPackage 方法：

<script>
  async function loadAndRun() {
    let pyodide = await loadPyodide();
    // 加载 NumPy 包
    await pyodide.loadPackage("numpy");
    let result = pyodide.runPython(\`
      import numpy as np
      np.array([1, 2, 3]) * 2
    \`);
    console.log("NumPy result:", result.toString());
  }
  loadAndRun();
</script>

5. 与 JavaScript 交互

Pyodide 提供了与 JavaScript 互操作的功能：

(1) 从 Python 调用 JavaScript

可以直接使用 Python 调用 JavaScript 对象或函数：

<script>
  async function pythonCallsJs() {
    let pyodide = await loadPyodide();
    pyodide.runPython(\`
      from js import console
      console.log("Hello from Python!")
    \`);
  }
  pythonCallsJs();
</script>

(2) 从 JavaScript 调用 Python

可以通过 pyodide.globals 访问 Python 全局变量和函数：

<script>
  async function jsCallsPython() {
    let pyodide = await loadPyodide();
    pyodide.runPython(\`
      def greet(name):
          return f"Hello, {name}!"
    \`);
    let greet = pyodide.globals.get("greet");
    console.log(greet("World")); // 输出 "Hello, World!"
  }
  jsCallsPython();
</script>

高级用法

1. 执行复杂脚本

可以通过多行字符串传递复杂脚本：

<script>
  async function runComplexScript() {
    let pyodide = await loadPyodide();
    let code = \`
    def fibonacci(n):
        if n <= 1:
            return n
        else:
            return fibonacci(n - 1) + fibonacci(n - 2)
    result = fibonacci(10)
    \`;
    pyodide.runPython(code);
    console.log("Fibonacci(10):", pyodide.globals.get("result")); // 输出 55
  }
  runComplexScript();
</script>

2. 加载自定义 Python 包

Pyodide 支持 micropip 工具来安装 PyPI 上的纯 Python 包：

<script>
  async function installPackage() {
    let pyodide = await loadPyodide();
    await pyodide.loadPackage("micropip");
    await pyodide.runPython(\`
      import micropip
      await micropip.install('requests')
    \`);
    console.log("Requests package installed successfully!");
  }
  installPackage();
</script>

3. 数据传递

可以在 Python 和 JavaScript 之间传递数据。

(1) 从 Python 返回数据到 JavaScript

<script>
  async function returnData() {
    let pyodide = await loadPyodide();
    let data = pyodide.runPython(\`
      [1, 2, 3, 4, 5]
    \`);
    console.log("Data from Python:", data); // 输出 [1, 2, 3, 4, 5]
  }
  returnData();
</script>

(2) 从 JavaScript 传递数据到 Python

<script>
  async function sendData() {
    let pyodide = await loadPyodide();
    pyodide.globals.set("js_list", [10, 20, 30]);
    pyodide.runPython(\`
      python_list = js_list + [40, 50]
      print(python_list)
    \`);
  }
  sendData();
</script>