如何配置Vite不打包指定外部依赖并保留TypeScript类型提示？

要搞定这个需求，核心是让Vite知道这些库不需要打包，同时让TypeScript能正常给import语句提供类型提示，具体分三步来配置：

1. 修改Vite配置文件 #

在vite.config.ts里，通过两个配置项来控制：

• optimizeDeps.exclude：告诉Vite不要预构建这些外部库；
• resolve.alias：把这些库的导入指向空模块或者全局变量，让构建时自动移除相关导入语句。

示例配置：

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    // 把所有通过<script>引入的库列在这里
    exclude: ['jquery', 'echarts', 'your-custom-lib']
  },
  resolve: {
    alias: {
      // 全局变量类的库（比如jQuery的$）可以直接指向window上的变量
      'jquery': 'window.$',
      // 其他库可以指向空模块，Vite构建时会自动移除对应导入
      'echarts': 'vite-plugin-external-alias',
      'your-custom-lib': 'vite-plugin-external-alias'
    }
  }
})

2. 配置TypeScript类型提示 #

为了让TS识别这些import的类型，需要添加类型声明：

• 如果库有官方的@types包（比如jquery的@types/jquery），直接安装后，在项目的类型声明文件里引入；
• 如果没有官方类型，就手动写声明文件。

比如在src/types/external.d.ts里写：

// 引入已有类型
/// <reference types="jquery" />
/// <reference types="echarts" />

// 手动声明自定义库的类型
declare module 'your-custom-lib' {
  export function init(options: { el: string }): void;
  export const version: string;
}

然后在tsconfig.json里确保这个类型文件被包含：

{
  "compilerOptions": {
    "typeRoots": ["./src/types", "./node_modules/@types"]
  },
  "include": ["src/**/*", "src/types/**/*.d.ts"]
}

3. 在HTML中引入外部库 #

最后在index.html里用<script>标签引入这些CDN资源，注意依赖顺序：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://your-cdn.com/your-custom-lib.min.js"></script>

效果验证 #

• 在TS文件里正常写import $ from 'jquery'，能拿到完整的类型提示；
• 运行或构建项目时，Vite不会把这些库打包进产物，而且会自动移除对应的import语句，直接使用全局环境里的库。

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