TurboRepo组件导出索引自动生成与VSCode导入提示问题咨询

一、自动生成导出索引的工具方案 #

1. 使用第三方工具快速生成 #

安装create-index工具，它能自动遍历指定目录并生成标准导出语句：

npm install create-index --save-dev

在共享包的package.json中添加生成脚本，绑定到构建流程：

{
  "scripts": {
    "generate:index": "create-index src/",
    "build": "npm run generate:index && tsc"
  }
}

每次执行npm run build时，工具会自动扫描src目录下的组件文件（排除已有的index.ts），生成如下格式的导出内容到src/index.ts：

export { default as Button } from './Button';
export { default as Input } from './Input';
// ... 其他组件自动追加

2. 自定义Node脚本实现灵活控制 #

如果需要自定义导出规则（比如导出命名导出而非默认导出），可以写一个简单的Node脚本：

1. 安装依赖：

npm install glob --save-dev

2. 创建scripts/generate-index.js：

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

const srcDir = path.resolve(__dirname, '../src');
const indexPath = path.join(srcDir, 'index.ts');

// 匹配src下的组件文件，可根据实际调整后缀和排除规则
glob('**/*.tsx', { cwd: srcDir, ignore: ['index.ts', '**/*.test.tsx'] }, (err, files) => {
  if (err) throw err;

  const exports = files.map(file => {
    const componentPath = './' + file.replace('.tsx', '');
    // 若组件为命名导出，可改为 `export * from '${componentPath}';`
    return `export { default as ${path.basename(file, '.tsx')} } from '${componentPath}';`;
  });

  fs.writeFileSync(indexPath, exports.join('\n') + '\n');
});

3. 在package.json中添加执行脚本：

{
  "scripts": {
    "generate:index": "node scripts/generate-index.js",
    "build": "npm run generate:index && tsc"
  }
}

二、无需维护索引的替代方案：让VSCode识别完整路径导入 #

如果不想维护index.ts，可以通过调整TypeScript配置，让VSCode直接识别组件的完整路径导入并提供代码提示：

1. 配置共享包的tsconfig.json #

{
  "compilerOptions": {
    "baseUrl": "./src",
    "declaration": true,
    "declarationDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.tsx"]
}

2. 配置根目录的tsconfig.json（Monorepo场景） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@your-shared-package/*": ["packages/shared/src/*"]
    }
  },
  "include": ["packages/**/*"]
}

3. 完善共享包的package.json字段 #

{
  "name": "@your-shared-package",
  "types": "./dist/index.d.ts",
  "exports": {
    "./*": "./dist/*"
  }
}

配置完成后，其他包可直接通过import Button from '@your-shared-package/Button'导入组件，VSCode会自动读取dist目录下的类型文件提供提示。

三、进阶：自动维护package.json的exports字段 #

如果需要更规范的导出路径，可以扩展自定义脚本，自动更新package.json中的exports和typesVersions字段，确保类型提示的准确性，避免手动维护路径映射。

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