Vite 与 Webpack 模块解析差异

问题背景

在 activity 项目中引入 @fs/sentry 包时，构建报错：

复制代码

Failed to resolve entry for package "@fs/sentry". 
The package may have incorrect main/module/exports specified in its package.json

但同样的代码在 pages 项目（Vue CLI）中可以正常运行。

原因分析

npm 包的入口配置

一个 npm 包的 package.json 通常会配置两个入口字段：

字段	用途	模块格式
`main`	传统入口，供 Node.js 和旧版打包工具使用	CommonJS
`module`	ESM 入口，供现代打包工具使用	ES Module

@fs/sentry 包的配置问题

查看 @fs/sentry 的 package.json：

json 复制代码

{
  "main": "dist/lib/index.js",      // CommonJS 入口
  "module": "dist/lib/index.mjs"    // ESM 入口
}

实际 dist/lib 目录下的文件：

复制代码

dist/lib/
  ├── index.js      ✅ 存在
  ├── index.d.ts    ✅ 存在
  └── index.mjs     ❌ 不存在（配置了但没有生成）

问题：module 字段声明了 .mjs 文件，但这个文件实际不存在。

Webpack 与 Vite 的处理差异

Webpack（Vue CLI 使用）--- 宽松模式

复制代码

1. 读取 package.json 的 module 字段 → "dist/lib/index.mjs"
2. 尝试加载该文件 → 不存在
3. 自动回退到 main 字段 → "dist/lib/index.js"
4. 加载成功 ✅

Vite --- 严格模式

复制代码

1. 读取 package.json 的 module 字段 → "dist/lib/index.mjs"
2. 尝试加载该文件 → 不存在
3. 直接报错 ❌（不会回退到 main 字段）

对比图示

复制代码

┌──────────────────────────────────────────────────────────────┐
│                    import { x } from 'pkg'                    │
└──────────────────────────┬───────────────────────────────────┘
                           │
              ┌────────────┴────────────┐
              │                         │
              ▼                         ▼
      ┌───────────────┐         ┌───────────────┐
      │   Webpack     │         │     Vite      │
      └───────┬───────┘         └───────┬───────┘
              │                         │
              ▼                         ▼
      ┌───────────────┐         ┌───────────────┐
      │ 读取 module   │         │ 读取 module   │
      │ 字段          │         │ 字段          │
      └───────┬───────┘         └───────┬───────┘
              │                         │
              ▼                         ▼
      ┌───────────────┐         ┌───────────────┐
      │ 文件不存在？  │         │ 文件不存在？  │
      └───────┬───────┘         └───────┬───────┘
              │                         │
        ┌─────┴─────┐             ┌─────┴─────┐
        │           │             │           │
        ▼           ▼             ▼           ▼
   ┌────────┐  ┌────────┐   ┌────────┐  ┌────────┐
   │ 回退到 │  │ 使用   │   │ 直接   │  │ 使用   │
   │ main   │  │ module │   │ 报错   │  │ module │
   └────────┘  └────────┘   └────────┘  └────────┘

解决方案

方案一：直接指定文件路径（临时方案）

绕过包的入口配置，直接指定存在的文件：

javascript 复制代码

// ❌ 原来的写法（依赖包的 module 字段）
import { registerSentry, SentryEnv } from '@fs/sentry'

// ✅ 修改后的写法（直接指定文件路径）
import { registerSentry, SentryEnv } from '@fs/sentry/dist/lib/index.js'

方案二：修复 npm 包（根本方案）

联系 @fs/sentry 包的维护者，修改 package.json 配置：

json 复制代码

{
  // 方案 A：移除 module 字段（只用 main）
  "main": "dist/lib/index.js"
  
  // 或 方案 B：module 指向存在的 .js 文件
  "main": "dist/lib/index.js",
  "module": "dist/lib/index.js"
  
  // 或 方案 C：构建时生成 .mjs 文件
  "main": "dist/lib/index.js",
  "module": "dist/lib/index.mjs"  // 确保该文件存在
}

总结

对比项	Webpack	Vite
模块解析	宽松，有回退机制	严格，遵循 ESM 规范
module 字段文件不存在	回退到 main	直接报错
适用场景	兼容性好，容错性高	性能好，但对包质量要求高

教训：发布 npm 包时，确保 package.json 中声明的所有入口文件都实际存在。