如何通过JavaScript将本地Python包加载到Pyodide并解决模块未定义问题

Pyodide运行在浏览器沙箱中，无法直接访问本地文件系统，必须把目标Python文件写入它的虚拟文件系统（Emscripten FS）才能被正常导入。以下是具体实现步骤：

1. 加载服务器上的Python文件内容 #

部署到服务器后，test_files里的文件会作为静态资源对外提供访问。用fetch API获取文件内容：

async function loadPythonFiles() {
  // 加载main.py和test.py
  const mainResp = await fetch('/test_files/main.py');
  const mainContent = await mainResp.text();
  
  const testResp = await fetch('/test_files/test.py');
  const testContent = await testResp.text();
  
  return { mainContent, testContent };
}

2. 将文件写入Pyodide虚拟文件系统 #

Pyodide初始化完成后，用pyodide.FS.writeFile把内容写入对应路径，确保导入路径匹配：

async function initPyodideAndLoadFiles() {
  const pyodide = await loadPyodide();
  const { mainContent, testContent } = await loadPythonFiles();
  
  // 在虚拟文件系统中创建test_files目录（可选，保持和服务器目录结构一致）
  pyodide.FS.mkdir('/test_files');
  // 写入文件
  pyodide.FS.writeFile('/test_files/main.py', mainContent);
  pyodide.FS.writeFile('/test_files/test.py', testContent);
  
  // 将test_files目录添加到Python的sys.path，确保能导入模块
  pyodide.runPython(`
    import sys
    sys.path.append('/test_files')
  `);
  
  return pyodide;
}

3. 执行测试脚本 #

文件写入完成后，直接导入并运行测试逻辑即可，无需担心模块未定义：

async function runTest() {
  const pyodide = await initPyodideAndLoadFiles();
  // 运行test.py中的测试代码
  await pyodide.runPythonAsync(`
    import test
    test.run_test()  // 假设test.py中有run_test函数
  `);
}

4. 支持用户编辑保存文件 #

如果要让用户在Ace编辑器中编辑文件并保存：

• 当用户点击保存时，获取Ace编辑器的内容，调用pyodide.FS.writeFile更新虚拟文件系统中的对应文件
• 如果需要持久化到服务器，发送POST请求把编辑后的内容提交到后端接口保存
• 下次加载页面时，优先拉取用户保存的文件内容，再写入Pyodide虚拟文件系统

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