Python社区长期以来一直在讨论如何使Python成为网络浏览器中流行的编程语言。然而，网络浏览器实际上只支持一种编程语言：JavaScript。随着网络技术的发展，我们把越来越多的程序放到了网络上，比如游戏、数据科学可视化、音视频编辑软件等。这意味着我们为网络带来了繁重的计算——这不是JavaScript的设计目标。所有这些挑战都提出了对可以提供快速、可移植、紧凑和安全代码执行的新编程语言的需求。因此，主要的浏览器供应商致力于实现这个想法，并在2017年向世界推出了WebAssembly。在本教程中，我们将了解WebAssembly如何帮助您在浏览器中运行Python代码。需要明确的是，JavaScript本身就是一种强大的编程语言。它只是不适合某些操作。关于这一点，请看JavaScript之父BrendanEich的文章《从ASM.JS到WebAssembly》。我们正在构建什么假设您想教授Python课程。为了使您的课程更加有趣和有趣，您希望在每节课后为您的学生提供一个练习，以便他们可以练习所学内容。这里的问题是学生需要通过安装特定版本的Python、创建和激活虚拟环境以及安装所有必要的包来准备开发环境。这可能需要花费大量时间和精力。也很难对此给出准确的指导，因为每台机器都不一样。虽然您可以创建后端以在Docker容器或AWSLambda函数中运行提交的代码，但您选择保持堆栈简单，将Python编辑器添加到课程内容，并在客户端的Web浏览器中运行Python代码，并将结果显示给用户。这正是您将在本教程中构建的内容。WebAssembly根据MozillaDeveloperNetwork(MDN)文档的定义，WebAssembly(WASM)的定义如下：WebAssembly是一种运行在现代网络浏览器中并提供新的性能特性和效果的新型代码。它不是为手写代码而设计的，而是为C、C++和Rust等低级源语言提供高效的编译目标。因此，WASM让我们可以在浏览器中运行用不同语言（不仅仅是JavaScript）编写的代码，具有以下好处：快速、高效和可移植。它是安全的，因为代码在安全的沙盒执行环境中运行。它可以在客户端运行。所以在我们上面的例子中，我们不需要担心用户在我们的服务器上运行代码，也不需要担心成千上万的学生尝试练习代码，因为代码的执行发生在客户端,在网络浏览器上。WebAssembly并不是为了杀死JavaScript而设计的。它是对JavaScript的补充。当JavaScript不是合适的工具时可以使用它，例如游戏、图像识别和图像/视频编辑等。请参阅WebAssembly.org上的用例，了解您可能想要利用WebAssembly的更多情况。Pyodide本教程使用Pyodide库运行Python代码，它将CPython解释器编译成WebAssembly，并在浏览器的JavaScript环境中运行。它带有一些预装的Python包。你也可以使用Micropip来使用更多的包。HelloWorld使用以下代码创建一个新的HTML文件。
在浏览器中打开文件。然后，在浏览器的开发人员工具控制台中，您应该执行以下操作：浏览器！可以看到，最后一行是Python代码在浏览器中执行的结果。让我们快速浏览一下上面的代码。首先，您可以使用CDN或直接从GitHub版本下载并安装Pyodide。loadPyodide加载并初始化Pyodidewasm模块。pyodide.runPython将Python代码作为字符串并返回代码的结果。Pyodide的优势在前面的示例中，您看到了安装和开始使用Pyodide是多么容易。你只需要从CDN导入pyodide.js并通过loadPyodide初始化它。之后，您可以使用pyodide.runPython("yourPythoncode")在浏览器中运行您的Python代码。当您第一次下载Pyodide时，下载量很大，因为您下载的是完整的CPython解释器，但您的浏览器会缓存它，您不需要再次下载。Pyodide上还有一个庞大而活跃的社区。其官网如下：https://pyodide.org/en/stable/你可以看看Pyodide路线图、GitHub上的未解决问题和Gitter社区。Pyodide的局限性第一次加载Pyodide时，需要四到五秒钟（取决于您的连接速度），因为您必须下载一个大约10MB左右的文件。此外，Pyodide代码的运行速度比原生Python慢3到5倍。其他选项一般来说，如果你想在浏览器中运行Python，你有两个选项可用。1.使用转译器将Python转换为JavaScript。Brython、Transcrypt和Skulpt都使用这种方法。2.转换Python运行环境，在浏览器中使用。Pyodide和PyPy.js使用这种方法。选项1和选项2之间的一个主要区别是选项1中提到的库不支持Python包。也就是说，它们的下载大小比选项二中的库小得多，因此它们也更快。在本教程中，我们选择了Pyodide，因为它的语法更简单并且支持Python包。如果您对其他选项感兴趣，请随时查看他们的文档。Python代码编辑器在本节中，我们将创建一个可以在浏览器中运行代码的简单Python编辑器。1.Pyodide2、CodeMirror3、Flask新建工程。$mkdirpython_editor_wasm$cdpython_editor_wasm创建并激活虚拟环境。$python3.10-mvenvenv$sourceenv/bin/activate(env)$安装Flask:(env)$pipinstallFlask在项目的根目录下创建一个名为app.py的文件并添加以下代码。fromflaskimportFlask,render_templateapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')如果__name__=='__main__':app.run(debug=True)在我们项目的根目录下创建一个“templates”文件夹，并在其下添加index.html文件。templates/index.html: