npm 方式安装Pyodide 详解

npm 方式安装Pyodide 详解

如何通过 npm 安装 Pyodide

1. 安装 Pyodide

在您的项目中运行以下命令：

npm install pyodide

这将安装 Pyodide npm 包。

2. 在项目中使用 Pyodide

以下是如何在 JavaScript 或 TypeScript 项目中使用 npm 安装的 Pyodide：

使用 JavaScript

import { loadPyodide } from "pyodide";

async function initPyodide() {
  // 加载 Pyodide 环境
  const pyodide = await loadPyodide();

  // 运行 Python 代码
  const result = pyodide.runPython(\`
    import math
    math.sqrt(16)
  \`);

  console.log("Python Result:", result); // 输出 4.0
}

initPyodide();

使用 TypeScript

import { loadPyodide, PyodideInterface } from "pyodide";

async function initPyodide(): Promise<void> {
  // 加载 Pyodide 环境
  const pyodide: PyodideInterface = await loadPyodide();

  // 运行 Python 代码
  const result = pyodide.runPython(\`
    import math
    math.sqrt(16)
  \`);

  console.log("Python Result:", result); // 输出 4.0
}

initPyodide();

3. 加载第三方库

Pyodide npm 包支持通过 loadPackage 动态加载库。例如加载 NumPy：

import { loadPyodide } from "pyodide";

async function loadLibraries() {
  const pyodide = await loadPyodide();
  await pyodide.loadPackage("numpy");

  const result = pyodide.runPython(\`
    import numpy as np
    np.array([1, 2, 3]) * 2
  \`);

  console.log("NumPy Result:", result); // 输出 [2, 4, 6]
}

loadLibraries();

4. 与 JavaScript 交互

通过 npm 安装的 Pyodide，您可以像使用 CDN 一样实现 Python 和 JavaScript 的双向交互。

从 JavaScript 向 Python 传递数据

pyodide.globals.set("js_list", [10, 20, 30]);
pyodide.runPython(\`
  python_list = js_list + [40, 50]
  print(python_list)
\`);

从 Python 返回数据给 JavaScript

const result = pyodide.runPython(\`
  [1, 2, 3, 4, 5]
\`);
console.log(result); // 输出 [1, 2, 3, 4, 5]

5. 适合的场景

通过 npm 安装的 Pyodide 更适合以下场景：

1. 前端项目： 在 React、Vue、Angular 等框架中集成 Pyodide，增强功能。
2. 模块化开发： npm 包形式更适合现代 JavaScript 工程化需求。
3. TypeScript 支持： Pyodide npm 包包含类型定义文件，便于在 TypeScript 中使用。

6. 总结

通过 npm 安装 Pyodide 的优势：

• 更易于集成到现代前端项目中。
• 支持模块化开发，避免使用全局变量。
• 提供良好的 TypeScript 支持。

如果您使用的是现代化的前端开发工具（如 Webpack、Vite），推荐使用 npm 安装的方式管理 Pyodide 依赖。