Vite无法解析vue-movinglight包入口，求助调试npm包配置

问题根源 #

1. 问题确实与构建流程和npm包配置直接相关：Vite等现代构建工具优先读取package.json的exports字段解析包入口，仅配置main/module已无法满足工具的解析规则，从而导致入口解析失败。
2. 核心遗漏点是**exports字段配置**，也可能存在构建产物文件名与package.json声明路径不匹配的情况。

具体排查与解决步骤 #

1. 验证dist目录产物 #

先确认npm包的dist文件夹中，是否存在vue-movinglight.umd.js、vue-movinglight.esm.js以及types/index.d.ts文件。如果文件名不符（比如输出为vue-movinglight.es.js而非esm.js），需调整打包工具的配置。

2. 补充package.json的exports字段 #

现代包管理工具依赖exports字段明确不同环境的入口路径，替换或补充现有配置：

{
  "name": "vue-movinglight",
  "version": "1.0.2",
  "main": "dist/vue-movinglight.umd.js",
  "module": "dist/vue-movinglight.esm.js",
  "types": "dist/types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/vue-movinglight.esm.js",
      "require": "./dist/vue-movinglight.umd.js",
      "types": "./dist/types/index.d.ts"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "files": ["dist"],
  "peerDependencies": {
    "vue": "^3.3.0"
  }
}

该配置明确了：

• import导入时使用ES模块入口
• require导入时使用UMD模块入口
• 同时指定了类型文件和样式文件的访问路径

3. 检查打包工具配置（以Vite为例） #

如果使用Vite构建库，确保vite.config.js的build.lib配置正确，输出文件名与package.json声明一致：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js', // 替换为你的库实际入口文件
      name: 'MovingLight',
      fileName: (format) => `vue-movinglight.${format}.js`
    },
    rollupOptions: {
      external: ['vue'], // 排除vue，避免打包进库文件
      output: {
        globals: {
          vue: 'Vue' // UMD模式下全局变量名
        }
      }
    }
  }
})

4. 重新发布并测试 #

• 执行npm run build重新构建产物
• 更新版本号（比如从1.0.1改为1.0.2）后执行npm publish
• 在测试项目中卸载旧包：npm uninstall vue-movinglight，重新安装：npm install vue-movinglight
• 运行npm run dev验证问题是否解决

内容的提问来源于stack exchange，提问作者Mr. Dochis