在Vite打包的TS Monorepo中避免桶文件的批量配置方法咨询

一、修复tsconfig paths通配符配置 #

你之前的通配符配置无效，是因为路径映射的目标没有匹配到实际文件位置。根据组件目录的入口结构调整配置：

情况1：组件目录下使用index.ts作为入口 #

"paths": {
  "@my/component-library/atoms/*": ["./packages/component-library/src/atoms/*/index.ts"]
}

此时import { Link } from '@my/component-library/atoms/Link'会自动映射到./packages/component-library/src/atoms/Link/index.ts。

情况2：组件目录下使用与目录同名的文件作为入口（如Link/Link.ts） #

"paths": {
  "@my/component-library/atoms/*": ["./packages/component-library/src/atoms/*/*.ts"]
}

该配置会将通配符匹配到的组件名，自动对应到目录下的同名文件。

二、修复package.json exports通配符配置 #

Node.js的exports支持通配符，但需遵循一对一匹配规则（不能用**递归通配符），同时需要配合TypeScript的正确配置：

前置配置要求 #

1. 在@my/component-library/package.json中设置"type": "module"
2. 在tsconfig-base.json中设置"moduleResolution": "NodeNext"或"Node16"

根据编译后的文件结构调整exports #

情况1：编译后组件入口为dist/esm/atoms/[组件名]/index.js

"exports": {
  ".": {
    "types": "./dist/esm/index.d.ts",
    "import": "./dist/esm/index.js"
  },
  "./atoms/*": {
    "import": "./dist/esm/atoms/*/index.js",
    "types": "./dist/esm/atoms/*/index.d.ts"
  }
}

情况2：编译后组件入口为dist/esm/atoms/[组件名]/[组件名].js

"exports": {
  ".": {
    "types": "./dist/esm/index.d.ts",
    "import": "./dist/esm/index.js"
  },
  "./atoms/*": {
    "import": "./dist/esm/atoms/*/*.js",
    "types": "./dist/esm/atoms/*/*.d.ts"
  }
}

三、自动生成配置（避免手动维护） #

当组件数量超过80个时，手动维护配置效率极低，可以通过Node脚本自动生成tsconfig paths和package.json exports条目：

示例脚本（可根据实际结构调整） #

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

// 目标组件目录
const atomsDir = path.resolve(__dirname, 'packages/component-library/src/atoms');
// 获取所有组件子目录
const components = fs.readdirSync(atomsDir).filter(dir => 
  fs.statSync(path.join(atomsDir, dir)).isDirectory()
);

// 更新tsconfig-base.json的paths
const tsConfigPath = path.resolve(__dirname, 'tsconfig-base.json');
const tsConfig = require(tsConfigPath);
tsConfig.compilerOptions.paths = tsConfig.compilerOptions.paths || {};
components.forEach(comp => {
  tsConfig.compilerOptions.paths[`@my/component-library/atoms/${comp}`] = [
    `./packages/component-library/src/atoms/${comp}/index.ts`
  ];
});
fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2));

// 更新component-library/package.json的exports
const pkgPath = path.resolve(__dirname, 'packages/component-library/package.json');
const pkg = require(pkgPath);
pkg.exports = pkg.exports || {};
components.forEach(comp => {
  pkg.exports[`./atoms/${comp}`] = {
    import: `./dist/esm/atoms/${comp}/index.js`,
    types: `./dist/esm/atoms/${comp}/index.d.ts`
  };
});
fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));

每次新增组件后运行该脚本，即可自动同步所有配置。

替代方案：借助构建工具自动处理 #

• 使用tsup：配置entry为所有组件文件路径，自动生成编译产物和类型文件，配合上述通配符exports即可实现自动映射。
• 使用rollup：通过插件（如rollup-plugin-generate-package-json）自动生成符合要求的exports配置。

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