自制NPM颜色转换库无法裸导入及404错误求助

架构老林

2026-7-19

解决方案

1. 修正package.json入口配置

你当前的main和module字段配置颠倒了——main对应CommonJS模块入口，module对应ES模块入口，调整为：

"main": "dist/lib/commonjs/index.js",
"module": "dist/lib/es6/index.js"

同时添加现代包规范的exports字段，明确不同模块系统的入口（包含类型文件）：

"exports": {
  ".": {
    "import": "./dist/lib/es6/index.js",
    "require": "./dist/lib/commonjs/index.js",
    "types": "./dist/lib/index.d.ts"
  }
}

2. 修复TypeScript编译配置

恢复src/index.ts中ColorConverter类的export关键字——只有导出才能被外部导入，之前移除是错误操作
保留dist下的.d.ts类型文件，TypeScript项目依赖这些文件提供类型支持，删除会导致类型解析错误
检查编译配置：
- 确保tsconfig.json的outDir指向正确输出目录，比如"outDir": "./dist/lib"
- 开启declaration: true，保证编译时生成类型文件
- 针对ES6和CommonJS分环境编译：可创建两个tsconfig子文件（如tsconfig.es6.json、tsconfig.cjs.json），分别设置module: "ESNext"和module: "CommonJS"，编译时分别执行tsc -p tsconfig.es6.json、tsc -p tsconfig.cjs.json

3. 确保发布文件完整

在package.json中添加files字段，指定发布时需包含的目录，避免dist目录被遗漏：

"files": [
  "dist"
]

4. 解决相对路径404问题

手动检查dist目录结构，确认dist/lib/es6/index.js和dist/lib/commonjs/index.js文件存在
前端无框架场景：确保服务器正确托管dist目录文件，导入路径需对应文件实际HTTP路径（比如文件放在项目根目录lib下，路径应为./lib/es6/index.js）
前端构建工具场景（如Vite/Webpack）：配置resolve.alias简化路径，或确保工具能正确解析相对路径