导读：Pyodide 将 CPython 编译成 WebAssembly，这让开发者能够直接在浏览器中运行完整的 Python，无需服务器或额外安装组件。

现在有不少方法可以把 Python 带到浏览器里，这都要感谢 WebAssembly技术。但要将 Python 的全部功能带到浏览器中，现在只有一种方法，那便是：Pyodide。

Pyodide 是一个完整的 Python 运行时，编译成 WebAssembly，允许你直接在浏览器中运行标准 Python 代码。是的，其他工具存在，但功能限制比Pyodide更多。

Pyodide 之所以强大，是因为它是 CPython 解释器移植到 WebAssembly（Wasm）的版本。Pyodide 采用了标准的 CPython 引擎，并重新设计使其能在浏览器的 WebAssembly 沙箱中运行。这使得浏览器能够以高速运行复杂的真实 Python 库，不需要任何外部服务器或本地安装。

这意味着，与较小的Python变体或转译方法不同，使用Pyodide时，你可以：

• 在浏览器里运行完整的Python。
• 客户端支持像 Pandas、NumPy 和 Matplotlib 这样的 C 扩展库。
• 完全在客户端运行Python，不使用任何后端。
• 在客户端动态执行 Python。

而其他专注于Python的Wasm工具则做不到。

还有一个小小的技术澄清。一款称为PyScript 为浏览器带来了同样的功能。PyScript 是一个以 Pyodide 为后端的框架。它为 Pyodide 运行时添加了 HTML/模板层。

Pyodide的优点在于它不需要复杂的构建系统或专门的环境。如果你能写标准的HTML网页文件，你就能运行Pyodide。

• 零安装： 
  你无需安装Python，管理虚拟环境，也不需要用pip安装任何东西。所有作在你加载页面的那一刻就能在浏览器里完成。
• 最简的设置：
  你可以通过 CDN 链接将 Pyodide 拉入项目。加载完成后，你只需调用一个函数即可执行 Python 逻辑： pyodide.runPython()
• 直接通信：
  Pyodide 包含了 Python 与 JavaScript 之间的强大桥梁。你可以无缝地在两种语言之间传递数据结构——例如，用JavaScript获取数据，用Python用专门的库分析数据。

Pyodide是一个全权重的运行时。它直接在你的设备上下载并执行整个CPython引擎，而不是使用“轻量版”或发送代码到服务器处理。这使得它成为隐私优先的数据工具、分析、数据处理以及支持离线应用的可靠选择。

举个例子，想要使用Pyodide，来构建一个应用程序，内容可以包括：

• 用 Pyodide 在浏览器中加载 Python 和 Pandas。
• 接受上传的CSV。
• 使用 Python 来：
• 显示数据集的前几行。
• 填充列选择器。
• 生成总结统计数据。

非常的奇妙，这一切都发生在客户端！

不需要在机器上安装任何专门针对项目的工具或库来成功执行这个教程。你只需要以下这些材料：

• 现代级浏览器
• 稳定的互联网连接
• 文本编辑器或集成开发环境
• CSV 文件（仅限于你想查看项目的完整功能时）

因为我们在浏览器中工作，项目代码包括HTML、CSS与JavaScript，还有我们的Pyodide和Python代码。我们所有的代码都会存储在一个文件里，它叫做index.html。我会先分享完整的代码文件，然后详细解释Pyodide部分及其工作原理（HTML、CSS和JavaScript不在本教程范围内）。

与Pyodide协作

我们在index.html首次遇到Pyodide，就是在下面这句话：

上面的代码下载的是 Wasm 版本的 Python。它还在浏览器标签页内安装了一个 Python 解释器。最后，它会暴露一个与解释器交互的 JavaScript API（loadPyodide）。

没有这行代码，你无法在浏览器中执行 Python。

Pyodide 启动 Python 并安装 Python 包

接下来我们需要 Pyodide 做的是初始化 Python 解释器，创建 Python 执行环境，并下载/安装已编译的 Python 包。下面的代码基本上替换了python -m venv、pip install pandas以及运行Pandas所需的后端服务。你可以把它想象成浏览器中的 Python 加载。

Pyodide 桥接 JavaScript 和 Python 内存

现在我们需要JavaScript来调用Python，就像调用函数一样。没有 Pyodide，你需要 API 请求、后端端点或其他变通方法。这正是 Pyodide 使 JavaScript 和 Python 互作的原因。

在下面的代码中，Pyodide 将一个 JavaScript 字符串复制到 Python 的全局命名空间中。这使得浏览器数据无需使用序列化API或通过HTTP传输即可访问Python。

执行 Python 代码

pyodide.runPython（）便是在浏览器中执行 Python 代码。它以字符串形式接收 Python 源代码，在执行间维护 Python 状态，并允许多次调用共享变量和数据。字符串由标准 Python 代码组成，并不是 Python/JavaScript 混合体。

下面的代码是将CSV读入Pandas DataFrame，显示前几行，动态填充列下拉菜单并计算摘要统计数据。Pyodide 允许 Python 访问浏览器的 DOM，因此所有更新都将直接在页面上进行，无需服务器或 API 调用。

下一个代码块同样使用 pyodide.runPython（），每当用户从下拉菜单中选择列时，通过 Pyodide 运行 Python。它检查是否选中了某一列，然后从数据帧中提取该列，并在浏览器中显示前几个值。如果没有选中某一列，则会清理输出。Pyodide 允许 Python 直接更新 HTML，因此用户可以在无需服务器请求的情况下即时查看列数据。

两个代码块中都出现一个重要行，那就是“from js import document”。 这使得 JavaScript 对象在 Python 中可访问，并允许 Python 直接调用浏览器 API。有了这条线，Python 可以像一流语言一样与浏览器交互，无需服务器代码即可更新 DOM 并响应作。

Pyodide 帮助 Python 驱动用户界面

我还想指出Python字符串里还有一段代码：

这段代码在不切换语言的情况下更新用户界面。它通过将 Python 调用路由到 JavaScript DOM 方法，并将 Python 字符串转换为 JavaScript 字符串来实现。

结语

Pyodide 颠覆了传统的前端架构！

它在浏览器中嵌入了一个持久的 Python 运行时，并提供了 JavaScript 与 Python 之间的双向桥梁。有了 Pyodide，像 Pandas 这样的 Python 库可以运行客户端，并直接与 DOM 交互。它将以前需要完整 Python 后端的功能直接带到客户端。

那么，你会在浏览器里用Pyodide构建什么好玩的应用？

作者：场长

参考：

https://thenewstack.io/run-real-python-in-browsers-with-pyodide-and-webassembly/