背景:在我自己开发的npm包,上传到了npm之后,测试的时候使用vite框架进行导入这个包报的错误
json
{
"name": "xxx-demo",
"version": "1.0.0",
"description": "this is learn npm package",
"main": "index.js",
"type": "module",
"scripts": {
"build": "rollup -c"
},
"files": [
"/dist"
],
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@10.14.0",
"devDependencies": {
"rollup": "^4.46.4",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.36.0"
}
}
-
main 字段指向错误 :
"main": "index.js"
指向根目录的index.js
,但我的files
配置只包含/dist
文件夹,所以发布到 npm 的包中根本没有根目录的index.js
文件。 -
缺少 ES 模块入口配置 :虽然你设置了
"type": "module"
,但没有配置module
字段或现代的exports
字段来指定 ES 模块的入口点。 -
Vite 无法找到正确的入口:Vite 作为现代构建工具,优先查找 ES 模块入口,但你的配置没有提供正确的路径。
推荐 直接使用 exports
字段
json
{
"name": "xxx-demo",
"version": "1.0.0",
"description": "this is learn npm package",
"main": "index.js",
"type": "module",
"scripts": {
"build": "rollup -c"
},
"files": [
"/dist"
],
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@10.14.0",
"devDependencies": {
"rollup": "^4.46.4",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.36.0"
}
}
为什么推荐呢?
- 现代标准 :
exports
字段是 Node.js 和现代打包工具的标准 - 明确的入口点:清楚地指定了不同模块系统的入口
- 更好的兼容性:同时支持 ES 模块和 CommonJS
- Vite 友好 :Vite 会优先查找
exports.import
字段