npm打包后Vue3 TS库类名异常致instanceof失效求助

核心原因 #

你的库打包时将Zod一同打包并开启了代码混淆，导致类名被替换为$i这类短标识符，进而引发instanceof校验和类名判断失效。从当前配置看，仅把vue、pinia设为外部依赖，Zod被包含在打包产物中，经过压缩混淆后类名丢失。

解决方案 #

方案1：将Zod设为外部依赖（推荐） #

修改vite.config.ts的rollupOptions.external，把zod加入外部依赖列表，这样库不会打包Zod，而是复用应用端安装的Zod版本，既避免重复打包，也不会出现类名混淆问题：

build: {
  target: 'esnext',
  lib: {
    entry: path.resolve(__dirname, 'src/index.ts'),
    name: 'mylib',
    fileName: format => `mylib.${format}.js`,
  },
  rollupOptions: {
    // 添加zod到external
    external: ['vue', 'pinia', 'zod'],
    output: {
      inlineDynamicImports: true,
      globals: {
        vue: 'Vue',
        pinia: 'Pinia',
        // 对应添加zod的全局变量映射
        zod: 'Zod'
      },
    },
  },
}

同时在库的package.json中把zod设为peerDependencies，提示用户安装对应版本：

{
  "peerDependencies": {
    "zod": "^x.x.x" // 替换为你使用的Zod版本
  }
}

方案2：禁用类名混淆（若必须打包Zod） #

如果必须把Zod打包进库，需要配置压缩插件保留类名。Vite默认使用terser做压缩，在vite.config.ts中添加terser配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext',
    minify: 'terser', // 指定使用terser压缩
    terserOptions: {
      keep_classnames: true, // 保留类名
      keep_fnames: true // 保留函数名（包括类构造函数）
    },
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'mylib',
      fileName: format => `mylib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'pinia'],
      output: {
        inlineDynamicImports: true,
        globals: {
          vue: 'Vue',
          pinia: 'Pinia',
        },
      },
    },
  }
})

验证 #

修改配置后重新打包发布，在应用中安装测试，此时ZodString.name应恢复为ZodString，instanceof校验也能正常工作。

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