• 在 vscode.dev 中直接运行 Python !纯浏览器环境,无后端!


    其实有挺长一段时间没有写自己的 VS Code 插件了!

    还是要感谢我们 DevDiv 组的 Flexible Friday 活动,让我可以在工作日研究自己感兴趣的项目。

    Flexible Friday:今天,上班不干活!

    我的 Flexible Friday 是一个Hack类型项目:

    Run Any Language in Browser (Code Runner for Web)

    Flexible Friday 是每个月一次的,上个月是第一次。但是自从开始调研这个项目后,觉得还是很有意思的!于是这周周六,准备搞一个 PoC 出来!

    我,选择了世界上第二好的语言 —— Python。

    其实在之前的文章,我也说过了,现在主流的所谓的在浏览器运行任何语言的方式主要是两种:

    • 浏览器只是个展示和交互层,真正的编译和运行还是在后端。

    • 相对进步不少的是:在后端把代码编译成 WebAssembly,然后在浏览器中运行。

    然而,这两种方式都少不了 server 端的支持。那么,有没有方法可以不用后端,整个编译(或者解释)和运行都放在浏览器呢?

    我对不同语言都进行了调研。然后,发现了 Pyodide:

    https://github.com/pyodide/pyodide

    这个项目最初由 Mozilla 主导开发,现在已经是独立的开源项目了!

    通过 Emscripten,Pyodide 把 CPython 解释器预先编译成 WebAssembly,使得 Python 文件可以运行!

    既然找到了方法,那就赶紧实现一个 VS Code 插件吧!

    于是,花了小半天时间写好了!

    那么,插件叫啥名字呢?

    之前写过一个 Code Runner 插件。

    我写的 Code Runner,下载量突破 3000 万了!

    那么,这个新插件,就叫 Code Runner for Web 吧!

    https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-for-web

    看看运行效果截图:

    欢迎大家下载试用!

    • Linux,mocOS,Windows 的 VS Code 也能装。你本地没装 Python的话,也能直接运行 Python!

    • vscode.dev 和 github.dev 也都支持!

    • 不知道是不是 VS Code 插件市场的搜索有问题,直接搜 Code Runner for Web 可能搜不到。大家可以加个双引号来搜索:"Code Runner for Web"

    下一步

    • 目前还支持标准的 Python 库,未来会支持更多 pip 包~

    • 未来会看看对其他语言的支持!

    遇到的小坑

    第一版发布到插件市场后,在 vscode.dev 试了下。发现 Edge 是正常的,但 Chrome 不行。

    查了下 console log 发现这个 error:

    Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.

    好家伙!我在 VS Code 的 WebView 使用了 document.getElementById("my-id").innerHTML 来改页面内容,竟然到了 Chrome 就行不通了!

    不过,难不倒我 workaround 小能手!

    放弃 h2 标签,改用 input + disabled 大法!使用 document.getElementById("my-id").value

    轻松解决!

    项目已经开源,也欢迎大家来围观:

    https://github.com/formulahendry/vscode-code-runner-for-web


    对了,我们组也在招人,欢迎和我一起来 Flexible Friday 带薪搞感兴趣的项目哈:

    已内推 80 人拿到微软 offer!

     
  • 相关阅读:
    关于Log和adb知识
    关于read only file system问题解决方案
    关于Android开发手机连接不上电脑问题解决方案
    Binder的设计和框架
    vi/vim基本使用方法
    利用ssh传输文件
    由tombstone文件解析jni代码过程
    关于调用系统camera和自己动手写camera
    补之前 如何改变jupyter打开文件的路径
    python logging模块
  • 原文地址:https://www.cnblogs.com/formulahendry/p/15644935.html
Copyright © 2020-2023  润新知