webpack打包的npm包导入时VSCode IntelliSense无法生效问题咨询

VSCode的IntelliSense依赖静态代码分析提取导出结构，webpack打包后的产物是转译、合并后的代码，默认会破坏原始的导出结构静态特征，因此指向打包产物时无法生成智能提示，指向未编译的源文件时可正常分析。

1. 全部可行解决方案 #

• 配置类型声明文件：在package.json中新增types字段指向生成的.d.ts类型声明文件，VSCode会优先读取该文件提供智能提示，这是NPM包的通用标准方案。
• 双路径适配：私有包场景可在package.json中同时配置main（指向生产打包产物）和development入口（指向源码），开发环境自动读取源码生成提示，该方案不适合公开NPM包使用。
• 保留打包产物的原始导出结构：打包时关闭代码混淆、压缩，保留ES模块导出的原始语法，该方案会降低包体积优化效果，适配成本高，不推荐使用。

2. 无需手动声明类型的简易修复方法 #

存在，不需要手动编写每个导出的类型声明，可通过工具自动生成，无需修改webpack配置：
如果是JS项目，安装typescript依赖后，在项目根目录新增tsconfig.json，加入以下配置：

{
  "compilerOptions": {
    "allowJs": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist"
  },
  "include": ["src/index.js"]
}

之后在打包命令末尾追加tsc命令即可自动生成类型声明文件，示例：
"build": "webpack build && tsc"
如果是TS项目，只需在原有tsconfig中开启declaration: true、emitDeclarationOnly: true即可直接自动生成。

3. 可自动支持该能力的替代打包工具 #

目前主流的NPM库打包工具都内置了自动生成类型声明的能力，配置成本远低于webpack：

• tsup：基于esbuild的轻量库打包工具，只需添加--dts启动参数即可自动完成打包+类型声明生成，支持JS/TS源码，无需额外配置TS相关内容，适合绝大多数NPM库场景。
• Vite 库模式：配合vite-plugin-dts插件，开启dts: true配置即可自动生成类型，适合同时有前端组件demo调试需求的库项目。
• Rollup：配合rollup-plugin-dts插件即可实现自动类型生成，配置逻辑比webpack简洁很多。

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