前端实现 python 编译器

,前端实现 python 编译器，整体包含两个部分：

• 一部分是编译器的样式（背景、主题、换行、行号等等）
• 另外一部分是编译运行的功能

编译器

编译器的选择较多一些，比如 CodeMirror 。实现简版的甚至可以使用文本域（使用文本域具有一定的限制性，无法进行语法检查）

编译运行

编译的部分可以使用 Pyodide （Pyodide 是基于 WebAssembly 的Python 发行版，能让浏览器和 Node.js 运行python程序）

由于一部分特殊的需求，并没有找到比较合适的 npm 包，所以选择直接引入 js 依赖（cdn 也可以，但会受访问速度影响）

引入：

https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js

注意：在脚手架项目中，直接引入的资源文件，需要放在目录 public/static/... 下才能生效。

使用

如下代码就可以执行一些简单的 python 语句：

<input  v-model="code" />  
<button @click="runPython()">运行</button>  
<div>输出:</div>  
<textarea v-model="result" style="width: 100%;" rows="10" disabled></textarea>  
  
<script>  

    mounted() {
     this.result = "初始化中..."; 
     this.code = "print('hello word!')"
    }
    
    // 初始化 Pyodide  
    async main() {  
        let pyodide = await loadPyodide();  
        this.result += "Ready!\n";  
        return pyodide;  
    }  
    let pyodideReadyPromise = main();  

    async runPython() {  
        let pyodideReadyPromise = main();
        let pyodide = await pyodideReadyPromise;  
        try {  
            this.result = pyodide.runPython(this.code)
        } catch (err) {  
            this.result = err
        }  
    }  
</script>  

引入的资源文件较多时可能遇到的问题

由于文件较多，提交Git 可能遇到如下问题：

解决方法：

进入项目的.git文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找)，再进入hooks文件夹，删除pre-commit文件，重新git commit -m 'message'即可。（pre-commit可以用来在提交前检查代码错误）

其他解决方式

git commit --m "message" 或者 git commit --no-verify -m "message"