如何配置Vite使npm库打包时保留外部依赖的import语句？

一、修正Vite配置 #

你的问题核心是external配置未正确生效，导致外部依赖被打包进ES模块。以下是调整后的完整配置，重点优化了依赖识别规则和输出格式：

import { defineConfig } from 'vite';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer], // 移除重复的tailwindcss插件
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'lib_name',
      fileName: (format) => {
        // 按输出格式分配不同路径，避免文件冲突
        return format === 'iife' ? 'browser/lib_name.js' : 'esm/index.js';
      },
    },
    rollupOptions: {
      // 精准匹配所有npm外部依赖，排除Vite虚拟模块和本地文件
      external: (id) => {
        if (id.startsWith('\0')) return false; // 跳过Vite内部虚拟模块
        // 匹配@开头的作用域包或普通npm包，排除相对路径/绝对路径的本地文件
        return /^@?[a-z0-9-]+/.test(id) && !id.startsWith('.') && !id.startsWith('/');
      },
      output: [
        {
          format: 'iife',
          name: 'global_name',
          dir: 'dist',
          // 为IIFE格式配置外部依赖对应的全局变量（浏览器环境用）
          globals: {
            '@uppy/core': 'Uppy',
          },
        },
        {
          format: 'es',
          dir: 'dist',
          entryFileNames: 'esm/index.js',
          sourcemap: true,
          // 确保ES模块保留import语句，不打包外部依赖
          preserveModules: false,
        },
      ],
    },
  },
  plugins: [dts({ rollupTypes: true })],
});

关键调整说明：

• 移除了postcss插件列表中重复的tailwindcss
• 优化external函数，避免误判本地文件和Vite虚拟模块，确保所有npm依赖被标记为外部依赖
• 为IIFE格式添加globals配置，保证浏览器环境下能正确找到外部依赖的全局变量
• 明确ES模块输出格式为es，确保Rollup保留import语句

二、配置package.json关键字段 #

仅修改Vite配置不够，还需配合package.json的字段声明，确保npm能正确识别你的库模块类型和依赖：

{
  "name": "your-lib-name",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/browser/lib_name.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/esm/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/browser/lib_name.js",
      "types": "./dist/esm/index.d.ts"
    }
  },
  "dependencies": {
    "@uppy/core": "^x.x.x" // 确保依赖已正确声明在这里
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vite build"
  }
}

关键字段说明：

• "type": "module"：声明你的库是ES模块，符合发布要求
• "exports"：明确不同环境（import/require）的入口文件，让工具链能正确解析
• "dependencies"：必须包含@uppy/core，这样用户安装你的库时会自动拉取该依赖
• "files"：指定发布到npm的文件目录，仅上传dist文件夹，减少包体积

三、验证结果 #

执行npm run build后，打开dist/esm/index.js，你会看到代码中保留了import { ... } from '@uppy/core'的语句，而非将@uppy/core的代码打包进来。

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