pyodide 简单讲解持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情 p

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

pyodide 是什么？

官网是这样说的：Pyodide is a Python distribution for the browser and Node.js based on WebAssembly.

翻译说: Pyodide 是基于 WebAssembly 的浏览器和 Node.js 的 Python 发行版。

说通俗一点讲就是可以在浏览器和nodejs中直接用 Python代码的 js库。

可以在浏览器运行Python代码，厉害。。。。留下感动的眼泪。。。

pyodide 文档

pyodide 文档: pyodide.org/

pyodide github: github.com/pyodide/pyo…

pyodide npmjs: www.npmjs.com/package/pyo…

pyodide 实现

1. CDN

https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js
https://pyodide-cdn2.iodide.io/v0.20.0/full/pyodide.js"

说一嘴jsdelivr最近不稳定，pyodide-cdn2官网不推荐，但是可以用，可以用就行还要啥自行车呀！！！

2.demo

写一个demo，不需要python环境，和服务器，本地浏览器就可以运行了！太方便了！！！

<!DOCTYPE html>
<html>
  <head>
     <!-- <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script> -->
    <script src="https://pyodide-cdn2.iodide.io/v0.20.0/full/pyodide.js"></script>
  </head>

  <body>
    <p>
      You can execute any Python code. Just enter something in the box below and
      click the button.
    </p>
    <input id="code" value="sum([1, 2, 3, 4, 5])" />
    <button onclick="evaluatePython()">Run</button>
    <br />
    <br />
    <div>Output:</div>
    <textarea id="output" style="width: 100%;" rows="6" disabled></textarea>

    <script>
      const output = document.getElementById("output");
      const code = document.getElementById("code");

      function addToOutput(s) {
        output.value += ">>>" + code.value + "\n" + s + "\n";
      }

      output.value = "加载中...\n";
      // init Pyodide
      async function main() {
        let pyodide = await loadPyodide();
        output.value += "Ready!\n";
        return pyodide;
      }
      let pyodideReadyPromise = main();

      async function evaluatePython() {
        let pyodide = await pyodideReadyPromise;
        try {
          let output = pyodide.runPython(code.value);
          addToOutput(output);
        } catch (err) {
          addToOutput(err);
        }
      }
    </script>
  </body>
</html>

3.效果展示

4.运行效果

5. 代码解析

`main`函数加载`pyodide`库

注意：因为pyodide包有很多文件所以首次加载会有点慢，以后有缓存就好了~

async function main() {
    let pyodide = await loadPyodide();
    output.value += "Ready!\n";
    return pyodide;
}

`evaluatePython`函数运行`Python`代码

async function evaluatePython() {
    let pyodide = await pyodideReadyPromise;
    try {
        let output = pyodide.runPython(code.value);
        addToOutput(output);
    } catch (err) {
        addToOutput(err);
    }
}

pyodide 总结

Pyodide的一大优势，就是Python和Javascript之间的跨语言函数接口，该接口可以消除使用两个不同语言的麻烦。所有I/O都需要透过一般的网页API，因此要让Python代码可以利用浏览器的优势，可以在没有安装Python的环境中，能够通过支持由Python产生数据，并且由HTML5或Canvas table渲染数据，或是在Python中实例化事件处理程序这样的案例。

pyodide 简单讲解