如何在NX Vite库/项目构建中自定义tsconfig.json

针对你遇到的nxViteTsPaths()插件强制使用tsconfig.base.json的问题，有以下几种可行的解决方法：

方法一：替换nxViteTsPaths，使用Vite原生路径解析结合tsconfig-paths #

直接弃用NX提供的路径插件，改用Vite原生的resolve.alias配合tsconfig-paths库来解析自定义的tsconfig文件：

1. 安装依赖：

npm install tsconfig-paths --save-dev

2. 修改vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import * as path from 'path';
import { loadConfig } from 'tsconfig-paths';

// 指定自定义的tsconfig文件路径
const customTsConfigPath = path.join(__dirname, 'tsconfig.lib.json');
// 加载并解析tsconfig中的路径映射
const tsConfig = loadConfig(customTsConfigPath);

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/packages/libd',

  plugins: [
    react(),
    // 移除原有的nxViteTsPaths()
    dts({
      entryRoot: 'src',
      tsConfigFilePath: customTsConfigPath,
      skipDiagnostics: true,
    }),
  ],

  resolve: {
    // 将tsconfig中的路径映射转换为Vite的alias配置
    alias: tsConfig?.result?.paths 
      ? Object.entries(tsConfig.result.paths).reduce((acc, [key, value]) => {
          const aliasKey = key.replace('/*', '');
          const aliasPath = path.resolve(__dirname, value[0].replace('/*', ''));
          acc[aliasKey] = aliasPath;
          return acc;
        }, {} as Record<string, string>) 
      : {},
  },

  // 保留原有的build和test配置
  build: {
    outDir: '../../dist/packages/libd',
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    lib: {
      entry: 'src/index.ts',
      name: 'libd',
      fileName: 'index',
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    },
  },
  test: {
    globals: true,
    cache: {
      dir: '../../node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/packages/libd',
      provider: 'v8',
    },
  },
});

方法二：自定义路径解析插件 #

如果你想保留类似nxViteTsPaths的插件风格，可以自己实现一个轻量插件，指定要使用的tsconfig：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import * as path from 'path';
import { loadConfig } from 'tsconfig-paths';

// 自定义插件：接收tsconfig路径，处理路径映射
function customTsPathsPlugin(tsConfigPath: string) {
  return {
    name: 'custom-ts-paths',
    configResolved(config) {
      const tsConfig = loadConfig(tsConfigPath);
      if (tsConfig?.result?.paths) {
        const alias = Object.entries(tsConfig.result.paths).reduce((acc, [key, value]) => {
          const aliasKey = key.replace('/*', '');
          const aliasPath = path.resolve(config.root, value[0].replace('/*', ''));
          acc[aliasKey] = aliasPath;
          return acc;
        }, {} as Record<string, string>);
        // 合并到Vite的alias配置中
        config.resolve.alias = { ...config.resolve.alias, ...alias };
      }
    },
  };
}

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/packages/libd',

  plugins: [
    react(),
    // 使用自定义插件，传入目标tsconfig路径
    customTsPathsPlugin(path.join(__dirname, 'tsconfig.lib.json')),
    dts({
      entryRoot: 'src',
      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
      skipDiagnostics: true,
    }),
  ],

  // 其余配置保持不变
  build: { /* ... */ },
  test: { /* ... */ },
});

方法三：修改NX项目配置文件 #

直接在项目的project.json中指定build目标使用的tsconfig，NX的@nx/vite:build执行器支持该参数：

打开packages/libd/project.json，找到build目标的options，添加tsConfig字段：

{
  "name": "libd",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "packages/libd/src",
  "projectType": "library",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "../../dist/packages/libd",
        // 添加这一行，指定自定义tsconfig
        "tsConfig": "packages/libd/tsconfig.lib.json",
        "main": "packages/libd/src/index.ts",
        "assets": ["packages/libd/*.md"]
      }
    },
    // 其余目标配置
  }
}

以上三种方法都可以强制NX在构建Vite库时使用你指定的tsconfig文件，可根据项目需求选择合适的方案。

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