使用 CodeMirror 和 pyodide 构建Python代码编辑器

在本文中，我们将学习开发一个可以在 Web 浏览器中运行Python代码的应用程序。

为此，我们将使用 pyodide.org，它由编译为 WebAssembly 的 CPython 解释器组成，它允许Python在浏览器中运行。我们将在 Python 模式下使用 codemirror.net 作为代码编辑器组件。您可以在本文末尾找到 API 参考和源代码链接。

让我们快速浏览一下我们的项目结构：

项目结构

我们在这里基本上有两个文件，一个用于用户界面的 HTML 文件和一个用于设置 pyodide 和 CodeMirror 的 javascript 文件。

让我们从用户界面组件index.html文件开始：

首先，我们使用 CDN 服务 cdnjs 链接一些外部 CSS 资源以及 pyodide 和 CodeMirror 的 JavaScript 文件。我们还将我们自己的脚本文件 main.js 包含在我们的 body 标记中，因为我们将使用它来编写页面内容。作为 UI 组件，我们有一个简单的标题，一个用于代码输入的 textarea，其 ID 为“code”，CodeMirror 将使用它来设置Python代码编辑器，以及一个用于输出的 textarea，其 ID 为“output” pyodide 将使用它来显示执行的Python代码的输出。

HTML

    
    
    run python in browser!
    
    
    
    

  

    
        
            python editor with CodeMirror
                and
                pyodide
            
        
        
            
                
                    
                        
                            Input
                        
                    
                
                                
                
            
            
                
                    Run
                
            
            
                
                    
                        
                            Output
                        
                    
                
                
                                        
                
            
        
  
    
    
    
    

  

好的，现在让我们继续我们的 JavaScript 文件，其中包含 CodeMirror 和 pyodide 设置的代码。

主.js：

我们定义了输出元素，它使用 document.getElementById 来表示 id 为“output”的 textarea 元素。为了初始化编辑器，我们使用 CodeMirror 提供的 fromTextArea 方法，该方法将 textarea 替换为 CodeMirror 实例。 textarea 中的文本将为我们稍后使用 editor.getValue() 访问的编辑器提供内容。为了设置 pyodide，我们定义了一个异步函数main()，它调用 loadPyodide 方法，indexURL 为最新版本的 pyodide，由 CDN 服务提供。它设置Python环境并返回 Pyodide 顶级命名空间作为承诺。现在，pyodide 可以使用了。

Javascript

const output = document.getElementById("output");
  
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: {
        name: "python",
        version: 3,
        singleLineStringErrors: false
    },
    lineNumbers: true,
    indentUnit: 4,
    matchBrackets: true
});
  
editor.setValue(`sum([1, 2, 3, 4, 5])`);
output.value = "Initializing...\n";
  
async function main() {
    let pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/" });
    // Pyodide ready
    output.value += "Ready!\n";
    return pyodide;
};
  
let pyodideReadyPromise = main();
  
function addToOutput(s) {
    output.value += ">>>" + s + "\n";
}
  
async function evaluatePython() {
    let pyodide = await pyodideReadyPromise;
    try {
        console.log(editor.getValue())
        let output = pyodide.runPython(editor.getValue());
        addToOutput(output);
    } catch (err) {
        addToOutput(err);
    }
}

为了执行代码，我们定义了一个方法evaluatePython()，它本质上调用了pyodide提供的runPython方法。它将Python代码作为字符串形式的输入，并执行它，并返回表达式的结果，翻译成 JavaScript 字符串。我们使用 addtoOutput() 方法将此字符串附加到我们的输出中。此输出表示最终输出，它是执行Python代码的结果。

就是这样，我们已经构建了一个简单的代码编辑器，可以在浏览器中执行Python代码！作为一个有趣的小活动，您可以尝试构建另一个组件，调试输出，它将显示代码中所有打印语句的结果，默认情况下结果显示在控制台中。

要运行此应用程序，只需在浏览器中打开 index.html：