Vue3+TS多入口NPM包问题：WebStorm类型提示异常

核心问题是多入口库的类型声明未被IDE正确识别，构建正常说明JS代码输出没问题，但类型文件的生成、导出配置环节存在疏漏。以下是具体排查和修复步骤：

一、修正package.json的exports配置 #

多入口必须为每个子路径同时配置JS入口和类型声明路径，IDE（如WebStorm）依赖types字段识别类型。示例配置：

{
  "name": "my-services",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./transportService": {
      "import": "./dist/transportService.js",
      "require": "./dist/transportService.cjs",
      "types": "./dist/transportService.d.ts"
    }
    // 其他子入口按此格式添加
  },
  "types": "./dist/index.d.ts", // 根类型兜底
  "files": ["dist"] // 明确npm发布时包含dist目录
}

注意：如果库用CommonJS规范，type字段设为commonjs，对应调整文件后缀为.cjs/.js。

二、确保构建工具生成对应类型文件 #

不管用Vite还是Rollup，必须开启类型声明生成，并保证每个入口对应独立的.d.ts文件：

用Vite构建（推荐TS项目） #

安装vite-plugin-dts插件，配置多入口和类型输出：

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: {
        index: './src/index.ts',
        transportService: './src/transportService.ts'
        // 其他工具类入口
      },
      formats: ['es', 'cjs'],
      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'cjs'}`
    },
    rollupOptions: {
      external: [] // 排除vue等外部依赖（如果有）
    }
  },
  plugins: [
    dts({
      include: ['src/**/*.ts'],
      outputDir: 'dist',
      entryRoot: 'src', // 确保类型文件路径与JS文件对应
    })
  ]
})

用Rollup构建 #

配置@rollup/plugin-typescript生成类型：

import typescript from '@rollup/plugin-typescript'

export default {
  input: {
    index: './src/index.ts',
    transportService: './src/transportService.ts'
  },
  output: [
    { dir: 'dist', format: 'es', entryFileNames: '[name].js' },
    { dir: 'dist', format: 'cjs', entryFileNames: '[name].cjs' }
  ],
  plugins: [
    typescript({
      declaration: true,
      declarationDir: 'dist',
      rootDir: 'src'
    })
  ]
}

三、调整库的tsconfig.json #

确保类型生成相关配置正确：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "declaration": true, // 必须开启，生成类型文件
    "declarationDir": "./dist", // 类型输出目录
    "outDir": "./dist", // JS输出目录
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

四、WebStorm适配处理 #

1. 同步TS版本：Settings > Languages & Frameworks > TypeScript，选择项目本地node_modules/typescript，避免用IDE内置版本
2. 清除缓存：File > Invalidate Caches... > 勾选Invalidate and Restart
3. 标记dist目录：右键dist > Mark Directory as > Sources Root，让IDE识别其中的类型文件

五、后续组件库多入口方案 #

组件库的多入口逻辑和工具类一致，只需调整目录结构和配置：

1. 组件目录结构：

src/
  components/
    Button/
      index.ts
      Button.vue
    Input/
      index.ts
      Input.vue
  index.ts // 统一导出所有组件

2. 每个组件的index.ts导出组件和类型：

import Button from './Button.vue'
export default Button
export type { ButtonProps } from './Button.vue' // 导出Props类型

3. vite.config.ts和package.json按工具类的多入口方式配置即可，每个组件对应一个子入口。

内容的提问来源于stack exchange，提问作者Алексей Матвеев