npm 方式安装Pyodide 详解

如何通过 npm 安装 Pyodide

1. 安装 Pyodide

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

bash 复制代码

npm install pyodide

这将安装 Pyodide npm 包。

2. 在项目中使用 Pyodide

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

使用 JavaScript

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

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：

javascript 复制代码

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 传递数据

javascript 复制代码

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

从 Python 返回数据给 JavaScript

javascript 复制代码

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

5. 适合的场景

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

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

6. 总结

通过 npm 安装 Pyodide 的优势：

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

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