在TypeScript开发的Jupyter Lab扩展中如何使用fs模块？

这个问题和TypeScript类型配置无关，你安装的@types/node和tsconfig里的类型配置只负责解决代码编写阶段的类型校验问题，实际报错来自Jupyter Lab扩展默认使用的webpack打包逻辑：默认Jupyter Lab扩展会被打包为前端浏览器可运行的代码，webpack在构建前端bundle时，会默认忽略Node.js原生核心模块（包括fs、os、path等），不会尝试从Node环境加载这些内置模块，因此会报模块找不到的错误。

根据你的实际使用场景选择对应方案即可：

场景1：需要操作用户本地文件系统 #

不要在前端侧的扩展代码里直接调用fs，Jupyter Lab的前端代码运行在浏览器沙箱中，本身就没有权限直接访问本地文件系统，必须走前后端交互的方式实现：

• 开发对应的Jupyter服务端扩展（可以用Python或者Node.js编写），在服务端代码中完成文件读写逻辑，暴露对应的HTTP接口
• 前端扩展侧通过Jupyter官方提供的请求API调用你编写的服务端接口，间接实现文件读写操作

场景2：扩展仅运行在Node.js侧，不需要兼容浏览器环境 #

修改项目的webpack配置，明确告诉webpackfs是Node原生外部模块，不需要打包进bundle：

1. 找到项目根目录下的webpack配置文件（通常为webpack.config.js，如果是Jupyter Lab官方模板生成的项目，可在package.json的jupyterlab配置段下修改构建配置）
2. 添加externals配置：

module.exports = {
  // 保留你原有的其他配置不变
  externals: {
    'fs': 'commonjs fs',
    // 如果需要用到其他Node核心模块，也可以在这里依次添加，例如：
    // 'path': 'commonjs path',
    // 'os': 'commonjs os'
  }
}

修改配置后重新构建扩展即可解决报错。

如果配置后仍然报错，可以检查以下两项配置：

• 查看package.json中是否存在browser字段，如果该字段下配置了"fs": false，删除该配置即可
• 确认tsconfig.json中的module配置项设置为CommonJS或ESNext，不要配置为仅浏览器兼容的模块规范

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