下一个 Brython? 不, 是 Python in WebAseembly_webaseembly 实现python-CSDN博客

本文链接：https://blog.csdn.net/Likianta/article/details/124523643

pyscript (官网) 支持在 html 中使用纯 python 语法的脚本标签. 形如下面的示例:

<html>
    <py-script>
        print("now you can run python in your html!")
    </py-script>
</html>

部分了解过 brython 的人可能对此感到熟悉, 但二者也有显著的不同:

brython 是将 python 代码转换成 “等价” 的 javascript 代码, 而 pyscript 是将 cpython 编译器带入到 wasm (webaseembly), 在性能和兼容度上都得到了飞跃性的提升.
brython 出生的年代较早, 已经停止更新, 目前资源难以寻找, 且难以跟进最新的 python 语法; pyscript 是在最近的 python 大会 (PyConUS2022) 上初露峥嵘, 背后有 pyodide, wasm 等新技术的支持, 活力和潜力巨大.
brython 从根本上无法支持所有的 python 功能特性, 例如 asyncio 机制; pyscript 目前已经支持了 asyncio, 并且 cpython in wasm 也让很多新语法的实现成为了可能.
brython 不支持导入 py 脚本和库; pyscript 可以导入诸如 numpy, matplotlib 等第三方库, 以及 py 脚本 (本地路径), 其导入语法的设计也比较友好.

安装

pyscript 是以 “pyscript.js” 和 “pyscript.css” 的形式提供. 因此我们有两种方式引入:

在线引用

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

下载后本地引用

下载官网提供的压缩包到本地 (zip 文件, 体积约 4.5mb, 解压后约 5.5mb).

然后在 html 中引用:
```
<link rel="stylesheet" href="~/pyscript.css" />
<script defer src="~/pyscript.js"></script>
```

快速开始

Hello World

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />

        <title>PyScript Hello World</title>

        <link rel="icon" type="image/png" href="favicon.png" />
        <link rel="stylesheet" href="~/pyscript.css" />
    
        <script defer src="~/pyscript.js"></script>
    </head>

    <body>
        Hello world! <br>
        This is the current date and time, as computed by Python:
        <py-script>
            from datetime import datetime
            now = datetime.now()
            now.strftime("%Y-%d-%m %H:%M:%S")
        </py-script>
    </body>
</html>

引入第三方库

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />

        <title>Todo App</title>

        <link rel="icon" type="image/png" href="favicon.png" />
        <link rel="stylesheet" href="~/pyscript.css" />
    
        <script defer src="~/pyscript.js"></script>

        <!-- 注意, 在这里我们通过 py-env 标签来引入第三方库和模块. -->
        <py-env>
            - paths:
                - /utils.py
        </py-env>
    </head>

    <body>
        <!-- py-script 标签也是可以通过 src 属性引入 py 文件的. -->
        <py-script src="/todo.py">  </py-script>
    </body>
</html>