如何基于Brython实现无需运行的Python转JavaScript网页工具？

核心方案：利用Brython前端编译能力 #

Brython提供了前端编译Python代码到JavaScript的API，无需后端框架，直接在浏览器中完成转换。以下是完整的可运行实现：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Python to JS Converter</title>
    <!-- 引入Brython核心及编译器脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.4/brython.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.4/brython_compiler.js"></script>
    <style>
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        textarea {
            width: 45%;
            height: 400px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
        }
        button {
            margin: 0 20px 20px;
            padding: 10px 20px;
            font-size: 16px;
        }
        .error {
            color: red;
            margin: 0 20px;
            font-family: monospace;
        }
    </style>
</head>
<body onload="brython(1)">
    <h1>Python → JavaScript 转换器</h1>
    <button onclick="convertCode()">转换代码</button>
    <div class="error" id="errorMsg"></div>
    <div class="container">
        <textarea id="pythonInput" placeholder="输入Python代码...">
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
        </textarea>
        <textarea id="jsOutput" placeholder="转换后的JavaScript代码..." readonly></textarea>
    </div>

    <script>
        function convertCode() {
            const pythonCode = document.getElementById('pythonInput').value;
            const jsOutput = document.getElementById('jsOutput');
            const errorMsg = document.getElementById('errorMsg');
            errorMsg.textContent = '';

            try {
                // 调用Brython编译器编译Python代码
                const compiled = window.BrythonCompiler.compile(pythonCode);
                // 提取编译后的JavaScript代码
                const jsCode = compiled.js;
                jsOutput.value = jsCode;
            } catch (e) {
                errorMsg.textContent = `编译错误: ${e.message}`;
            }
        }
    </script>
</body>
</html>

关键说明 #

• 脚本引入：必须同时引入brython.js和brython_compiler.js，后者提供前端编译的核心函数。
• 编译逻辑：通过window.BrythonCompiler.compile()方法直接编译Python代码，返回的对象中js属性即为转换后的JavaScript代码。
• 错误处理：捕获编译过程中的异常，将错误信息展示给用户，提升工具的可用性。

可选替代方案 #

如果Brython不符合需求，可考虑以下纯前端工具：

• Transcrypt：可通过Pyodide在浏览器中运行Transcrypt命令行工具，实现Python到JS的编译（需额外引入Pyodide脚本）。
• Pyodide：直接在浏览器中运行Python解释器，调用pyodide.runPython()执行代码，同时可通过相关API提取等效JS逻辑（适合复杂代码场景）。

内容的提问来源于stack exchange，提问作者Piotr Sztencel