如何移除Vite构建的NPM库导入路径中的/dist/src？

核心问题分析 #

你的构建产物最终落在dist/src目录下，导致外部项目导入时必须带上/dist/src路径。要简化导入，需要调整构建输出结构，让编译后的文件直接放在dist根目录，同时通过package.json的exports字段配置子路径映射，配合类型文件的正确输出。

步骤1：修改Vite配置，调整输出结构 #

在vite.config.ts中添加构建配置，指定多入口并调整输出结构，同时配置vite-plugin-dts让类型文件同步输出到dist根目录：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    react(),
    dts({
      outputDir: 'dist',
      tsConfigPath: './tsconfig.json',
    }),
  ],
  build: {
    lib: {
      entry: {
        index: resolve(__dirname, 'src/index.ts'),
        forms: resolve(__dirname, 'src/forms/index.ts'),
        'forms/utils': resolve(__dirname, 'src/forms/utils.ts'),
      },
      name: '@my-org/my-lib',
      formats: ['es', 'umd'],
      fileName: (format, entryName) => `${entryName}.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'leaflet', 'react-redux'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          leaflet: 'L',
          'react-redux': 'ReactRedux',
        },
        preserveModules: true,
        preserveModulesRoot: 'src',
      },
    },
  },
});

步骤2：更新package.json的exports和types字段 #

修改exports字段，为每个子路径配置对应的导出文件和类型文件，确保外部项目能正确解析：

{
  "name": "@my-org/my-lib",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js",
      "types": "./dist/index.d.ts"
    },
    "./forms": {
      "import": "./dist/forms.es.js",
      "require": "./dist/forms.umd.js",
      "types": "./dist/forms/index.d.ts"
    },
    "./forms/utils": {
      "import": "./dist/forms/utils.es.js",
      "require": "./dist/forms/utils.umd.js",
      "types": "./dist/forms/utils.d.ts"
    }
  },
  "files": ["dist"]
}

步骤3：调整tsconfig.json配置 #

指定源码根目录，确保TypeScript编译后的文件直接输出到dist根目录，避免生成嵌套的src子目录：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "declaration": true,
    "skipLibCheck": true,
    "declarationMap": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@my-org/my-lib/*": ["src/*"]
    },
    "typeRoots": ["node_modules/@types"],
    "allowImportingTsExtensions": false,
    "noImplicitAny": false,
    "composite": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "exclude": ["dist"],
  "references": [
    {
      "path": "./tsconfig.vite.json"
    }
  ]
}

步骤4：验证效果 #

1. 执行npm run build，查看dist目录结构，应直接包含index.*.js、forms/、forms/utils.*.js等文件，无嵌套的src子目录
2. 在外部项目中安装库后，即可使用简化路径导入：

   import { example } from "@my-org/my-lib/forms/utils";
   

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