Node.js动态加载API调用文件后，如何恢复VS Code IntelliSense支持？

我在Node.js里封装API时，把不同功能的调用拆到了calls目录的多个文件里。原本用静态require的方式能让VS Code的IntelliSense正常识别所有函数，但改成运行时遍历文件动态加载后，智能感知直接失效了。想找个办法既能用动态加载省事儿，又不丢智能感知的支持。

静态引入方式（智能感知正常工作）：

this.usage = require('./calls/usage')(this);
this.users = require('./calls/users')(this);
this.groups = require('./calls/groups')(this);
this.exams = require('./calls/exams')(this);
this.events = require('./calls/events')(this);
this.dashboard = require('./calls/dashboard')(this);
this.curriculums = require('./calls/curriculums')(this);
this.courses = require('./calls/courses')(this);
this.content = require('./calls/content')(this);
this.badges = require('./calls/badges')(this);

偏好的动态加载方式（智能感知失效）：

_loadCalls() {
  const callsDirectory = path.join(__dirname, 'calls');
  const files = fs.readdirSync(callsDirectory);

  files.forEach(file => {
    const fileName = path.parse(file).name;
    const funcName = fileName.replace('.js', '');

    this[funcName] = require(`./calls/${fileName}`)(this);
  });
}

可行解决方案 #

方案1：用类型声明补全（推荐） #

不管你用纯JS还是TS，都能通过添加类型声明文件让VS Code识别动态挂载的属性：

1. 先给每个calls模块定义返回类型，比如在calls目录下加usage.d.ts：

import APIClient from '../api-client';

// 自动推导模块的返回类型
export type UsageModule = ReturnType<typeof require('./usage')>;

2. 然后在API客户端的根目录加api-client.d.ts，把所有模块类型挂载到客户端类上：

import { UsageModule } from './calls/usage';
import { UsersModule } from './calls/users';
import { GroupsModule } from './calls/groups';
// 把其他模块的类型也都导入进来

declare class APIClient {
  usage: UsageModule;
  users: UsersModule;
  groups: GroupsModule;
  // 把所有动态挂载的属性都列在这里
}

export default APIClient;

VS Code会自动读取这些声明文件，智能感知就回来了。

方案2：用JSDoc做类型提示，运行时仍用动态加载 #

如果不想加TS类型文件，直接用JSDoc给类补全类型：

class APIClient {
  constructor() {
    this._loadCalls();
  }

  _loadCalls() {
    // 原动态加载逻辑不变
    const callsDirectory = path.join(__dirname, 'calls');
    const files = fs.readdirSync(callsDirectory);

    files.forEach(file => {
      const fileName = path.parse(file).name;
      this[fileName] = require(`./calls/${fileName}`)(this);
    });
  }
}

// 用JSDoc定义每个模块的类型和客户端的属性
/**
 * @typedef {ReturnType<typeof require('./calls/usage')>} UsageModule
 * @typedef {ReturnType<typeof require('./calls/users')>} UsersModule
 * @typedef {ReturnType<typeof require('./calls/groups')>} GroupsModule
 * // 把其他模块的类型也补上
 * @typedef {Object} APIClient
 * @property {UsageModule} usage
 * @property {UsersModule} users
 * @property {GroupsModule} groups
 * // 对应添加所有动态挂载的属性
 */

VS Code会解析这些JSDoc注释，自动识别动态挂载的属性，不影响运行时的动态加载逻辑。

方案3：自动生成静态加载代码，开发用静态、生产用动态 #

写个简单脚本，自动遍历calls目录生成静态引入的代码，开发时用这个静态加载器拿智能感知，生产环境还是用动态加载：

1. 新建generate-calls-loader.js脚本：

const fs = require('fs');
const path = require('path');

const callsDir = path.join(__dirname, 'calls');
// 只处理.js文件
const files = fs.readdirSync(callsDir).filter(file => file.endsWith('.js'));

// 生成静态引入的代码片段
const importLines = files.map(file => {
  const name = path.parse(file).name;
  return `this.${name} = require('./calls/${name}')(this);`;
}).join('\n    ');

// 生成完整的加载器代码
const loaderCode = `// 自动生成，请勿手动修改
module.exports = function loadStaticCalls(apiClient) {
    ${importLines}
};`;

// 写入到静态加载器文件
fs.writeFileSync(path.join(__dirname, 'static-calls-loader.js'), loaderCode);

2. 在API客户端里判断环境加载：

class APIClient {
  constructor() {
    if (process.env.NODE_ENV === 'development') {
      // 开发环境用静态加载器，保证智能感知
      require('./static-calls-loader')(this);
    } else {
      // 生产环境用动态加载
      this._loadCalls();
    }
  }

  _loadCalls() {
    // 原动态加载逻辑不变
    const callsDirectory = path.join(__dirname, 'calls');
    const files = fs.readdirSync(callsDirectory);

    files.forEach(file => {
      const fileName = path.parse(file).name;
      this[fileName] = require(`./calls/${fileName}`)(this);
    });
  }
}

每次新增calls下的文件，运行一遍脚本重新生成静态加载器就行，两边的好处都占了。

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