前端开发工具【免费下载链接】pyscriptAn open source platform for Python in the browser. https://pyscript.net Docs: https://docs.pyscript.net/ Try it: https://pyscript.com/ Community: https://discord.gg/HxvBtukrg2项目地址https://gitcode.com/gh_mirrors/py/pyscript点击查看免费下载PyScript Bridgenpm 包名pyscript/bridge位于仓库 bridge/ 目录是 PyScript 生态中面向纯 JavaScript 开发者的轻量桥接层它允许你在原生 JS 模块中import一个与.py文件互为化身的模块并直接await调用其中的 Python 函数。本文将以 bridge/README.md 为骨架结合 bridge/index.js 的源码实现与 bridge/test/ 测试用例讲解其核心用法、全部配置项、底层原理与本地/远程测试方法读完即可在自己的页面中把 Python 工具函数接入 JS 调用链。一、核心概念.js文件与它的.py化身Bridge 的基本设计是同名配对你维护一个test.js同时在相同目录下维护一个test.pyJS 中导出一个由bridge(import.meta.url, options)生成的代理对象代理对象上的任意属性如func_a、func_b都会在首次被访问时被翻译成对test.py中同名函数的异步调用。README 中最简示例主线程场景如下// main thread const { ffi: { func_a, func_b } } await import(./test.js);其中test.js通过 ESM CDN 引入 bridge 并绑定自己的模块地址// test.js import bridge from https://esm.run/pyscript/bridge; export const ffi bridge(import.meta.url, { type: mpy, worker: false });对应的test.py只需是普通 Python 模块# test.py def func_a(value): print(fhello {value}) def func_b(): import sys return sys.version调用时await func_a(world)会在 Python 侧打印hello worldawait func_b()会返回 Python 解释器的sys.version字符串。注意bridge()的返回值是异步代理导出的字段只有在被访问get时才触发一次性的引导 执行流程并且同一字段多次调用只初始化一次解释环境。二、选项Options全解bridge(url, options)的第二个参数支持以下选项默认值以源码 bridge/index.js 与 README 为准选项类型默认值说明pyscriptstringnull要自动加载的 PyScript 发布版本号如2025.8.1。若页面中尚未存在pyscript/corebridge 会按该版本从 PyScript releases 拉取core.css与core.js若未指定版本将回退到开发者频道developers channel的构建产物仅供开发者内部调试使用见 bridge/index.js 的 CDN 分支。typepy \| mpypy解释器类型。py引导 Pyodidempy引导 MicroPython。workerbooleantrue是否在 Web Worker 中引导解释器。为true时隔离主线程避免阻塞 UI测试页test.js默认显式传false以便在主线程观察行为。configstring \| Objectnull字符串配置文件 URL会被fetch后解析为 JSON或 PyScript 兼容的 JS 字面量配置对象。可用于引导额外文件files等。一旦指定configworker会被隐式置为true避免在主线程上出现多份配置互相冲突。envstringnull共享环境标识。多个在不同时间加载的模块传入相同env即可复用同一 Python 环境解释器与全局状态。serviceWorkerstringnull可选 Service Worker 作为回退通道源码支持见 bridge/index.js对应属性service-worker。其中config隐式开启 worker在实现中被明确落实bridge/index.js 使用script.toggleAttribute(worker, !!config || !!worker)只要有config就强制挂上worker属性core/src/config.js 中script[type][config]:not([worker])被判定为配置冲突Ambiguous config VS config attribute/Unable to use different configs on main从主线程解析侧印证了这一设计约束。2.1config的 URL 规范化源码中的normalize()bridge/index.js负责把配置处理成 JSON 字符串若config是字符串则视为 URLfetch后解析为 JSON若配置里含files对象则把相对路径基于模块文件 URL 解析为绝对 URLnew URL(key, base)以{开头的键保持原样最终序列化为 JSON 字符串写入script的config属性。2.2env与多模块共享环境env选项最终被写成 script 的env属性bridge/index.js。它的典型场景是页面中先后 import 多个 bridge 模块只要传入同一个env值它们就共享同一个 Python 运行时环境避免重复引导解释器、重复加载依赖包。三、底层原理三级缓存、代理与事件握手虽然bridge()用起来只是一个函数但 bridge/index.js 内部实现了一整套懒加载机制值得了解第一级缓存按文件缓存代理cache以协议主机路径转换出的.py文件 URLpathname.replace(/\.m?js(?:\/\\w)?$/, .py)为键每个.py文件全局只生成一个Proxy实例。第二级缓存按字段缓存回调代理的get拦截器为每个被访问的字段创建一个唯一的异步回调后续访问直接复用Promise只建一次。第三级缓存按引导惰性加载字段首次被调用时才fetch对应.py源码并用Date.now()拼出唯一上下文标识__pyscript_模块名时间戳把 Python 代码与以下尾缀拼接后注入一个script typepy|mpy元素from pyscript import window as 唯一名 from pyscript.ffi import to_js as 唯一名to_ts 唯一名.dispatchEvent(唯一名.CustomEvent.new(..., {detail: {...}})) del 唯一名 del 唯一名to_ts该脚本要么在 worker 中执行worker属性要么在主线程执行type为py/mpy执行完成后通过CustomEvent把调用期间被访问过的导出字段字典{detail: {func_a: func_a, ...}}回传给 JS 侧JS 侧在globalThis上用{ once: true }监听该唯一事件名resolve(event.detail)后立刻script.remove()保持 DOM 干净见 bridge/index.js若页面尚未引入pyscript/corebridge 会先注入core.css并动态importcore.jsbridge/index.js。从源码结构看这套按需拉取 Python 源码 → 动态注入脚本 → 事件握手回传导出的设计让 JS 侧完全不需要手写任何py-script标签或解释器初始化代码。四、本地测试npx mini-coi起服务README 提供了开箱即用的测试方式。在bridge/目录内执行npx mini-coi .然后浏览器访问http://localhost:8080/test/页面会输出PyScript Bridge ------------------ no configmini-coi是一个本地静态服务器仓库 core/tests/manual/service-worker/mini-coi.js 中亦有同名单文件它会为响应附加Cross-Origin-Opener-Policy/Cross-Origin-Embedder-Policy等头这正是 worker 模式与共享内存场景如SharedArrayBuffer所要求的跨源隔离前提。测试页 bridge/test/index.html 通过importmap把https://esm.run/pyscript/bridge映射到本地../index.js再动态 import bridge/test/test.js。该test.js使用的默认参数为pyscript2025.8.1typempyworkerfalseconfigundefinedenvundefined因此默认输出中的no config来自 bridge/test/test.py 的version()函数它尝试from sys_version import version失败时回退为lambda: no config——而sys_version.py恰好由config选项引入。五、用查询参数切换各种变体bridge/test/test.js 从location.search读取参数因此无需改代码即可覆盖全部组合查询参数效果?typepy把type从默认mpy换成py引导 Pyodide?worker只要出现该参数searchParams.has(worker)worker即为true?config传入一个内联配置对象其files指向同目录的./sys_version.py?envxxx设置共享环境标识例如组合变体http://localhost:8080/test/?typepyworkerconfig此时输出变为PyScript Bridge ------------------ 3.12.7 (main, May 15 2025, 18:47:24) ...含义是用 Pyodidetypepy、在 Worker 中运行worker并通过config引导了sys_version.py所以version()成功 import 到了 Python 版本号。README 特别提醒一旦使用configworker属性恒为true由实现强制见上文toggleAttribute。另一个可观察点是 bridge/test/test.py 会打印运行位置from pyscript import config, RUNNING_IN_WORKER type config[type] print(f{type}-script, RUNNING_IN_WORKER and worker or main)即每次调用都会在浏览器控制台输出形如mpy-script main或py-script worker的标记可用于核对解释器类型与运行线程是否符合预期。六、远程/CDN 使用示例仓库还提供了完全基于 CDN 的远程演示页 bridge/test/remote/index.html它用importmap把pyscript/bridge与其test/test.js都指向esm.run上的latest版本并在页面里显式引入https://pyscript.net/releases/2025.5.1/core.css与core.js随后直接await import(cdn_test)并调用test_func/test_other/version。这个页面印证了两点一是bridge的产物是纯 ESMbridge/package.json 中type: module入口index.js可以直接被浏览器原生模块系统解析二是页面可以提前引入 PyScript Core此时 bridge 会跳过自动加载流程。七、小结要点结论定位纯 JS 侧导入并调用 Python 工具的桥接模块npm 包pyscript/bridge当前版本 0.2.2见 bridge/package.json用法export const ffi bridge(import.meta.url, { ... })然后await ffi.xxx(args)核心选项pyscript/type/worker/config/env/serviceWorker强制约束指定config时worker恒为true避免主线程多配置冲突底层机制三级缓存 Proxy 懒加载 动态script注入 CustomEvent握手回传导出本地验证npx mini-coi .后访问http://localhost:8080/test/用查询参数切换解释器、线程与配置对于希望在现有纯 JS 应用中零改造接入 PyScript 能力的团队pyscript/bridge提供了一个把.py文件当作可 import 模块的直通方案其测试页与源码中层层缓存的设计也可作为理解 PyScript Core 引导流程的入门切口。赞分享前端开发工具【免费下载链接】pyscriptAn open source platform for Python in the browser. https://pyscript.net Docs: https://docs.pyscript.net/ Try it: https://pyscript.com/ Community: https://discord.gg/HxvBtukrg2项目地址https://gitcode.com/gh_mirrors/py/pyscript点击查看免费下载相关推荐cppimport 使用指南直接从 Python 导入 Ccppimport 使用指南直接从 Python 导入 C cppimport 是一个强大的工具允许开发者无缝地在 Python 程序中直接导入并执行Hermes Static Hermes FFI 实战用 Typed JavaScript 直接调用 C 函数Hermes Static Hermes FFI 实战用 Typed JavaScript 直接调用 C 函数 本指南围绕 Hermes 仓库中的 examp语言运行时编译器移动开发Python-Skill Bridge终极指南让Python无缝调用Virtuoso Skill函数Python Skill Bridge终极指南让Python无缝调用Virtuoso Skill函数 在现代EDA设计流程中工程师们经常面临一个关键痛点如开发工具硬件开发上一篇HTML-Minifier自定义属性处理如何完美支持Angular、Vue等现代前端框架下一篇MUI X分页控件可访问性键盘与屏幕阅读器支持创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考