TypeScript搭配webpack编译时无法访问Node.js fs模块如何解决

默认webpack的编译目标是浏览器环境，而fs是Node.js专属的原生模块，浏览器运行环境不存在该API，因此webpack打包时不会处理Node原生模块，就会抛出找不到fs模块的报错。你之前添加的node: {fs: 'empty'}配置作用是将fs模块 mock 为空对象，仅适用于打包浏览器代码时屏蔽依赖中未被实际使用的fs引用，完全无法满足你实际调用fsAPI的需求。

根据你代码的实际运行环境选择对应方案即可：

场景1：代码最终运行在Node.js环境（非浏览器） #

如果你的代码是服务端脚本、CLI工具等跑在Node端的程序，直接修改webpack配置即可：

1. 删除你之前添加的node: {fs: 'empty'}配置
2. 在webpack.config.js的根配置项中添加target: 'node'，告诉webpack打包目标为Node环境，会自动处理Node原生模块的引用，不会将其打包进bundle，运行时直接调用Node原生的fs
3. 安装Node类型定义依赖，解决TypeScript类型报错：npm i @types/node -D
4. 确认你的tsconfig.json中compilerOptions.types包含node，或者没有配置types字段（会自动加载@types下的包）

示例修改后的webpack配置：

const path = require('path')

module.exports = {
  target: 'node', // 新增这一行
  mode: 'development',
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist',
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
}

场景2：代码最终运行在浏览器环境 #

浏览器有安全沙箱限制，不允许JS直接读取本地磁盘的任意文件，不存在原生fsAPI，需要换实现方案：

• 如果是需要读取项目内固定的plans.csv文件：可以在编译阶段把文件内容打入bundle，不用运行时读取。安装raw-loader，在webpack的rules中新增CSV文件处理规则：

  // webpack.config.js的module.rules中添加
  {
    test: /\.csv$/,
    use: 'raw-loader',
    exclude: /node_modules/,
  }
  

  然后修改ts代码，直接导入csv文件：

  import plans from './plans.csv'
  console.log(plans)
  

  同时需要在TS项目的类型声明文件中添加csv模块的类型定义，避免导入报错：

  // 新建typings.d.ts放在src目录下
  declare module '*.csv' {
    const content: string
    export default content
  }
  

• 如果是需要读取用户本地的任意文件：使用浏览器原生的File和FileReaderAPI，通过文件上传控件让用户主动选择文件后读取内容，无法直接通过本地路径读取文件。

场景3：代码运行在Electron等混合环境 #

• 主进程可以直接使用fs模块，按场景1的方案配置webpack即可
• 渲染进程需要在创建窗口时开启nodeIntegration: true并关闭contextIsolation（不推荐，有安全风险），或者通过preload脚本将需要的fs操作封装后暴露给渲染进程使用。

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