本地调试 npm 包, 可以使用 yalc. 具体的使用教程在下方参考文档部分。
- module: 字段指定了 ES 模块版本的入口文件路径,
- main: 字段则指定了 CommonJS 模块版本的入口文件路径。
注意:尽管 module 字段在构建工具中被广泛支持,但它并不是所有 JavaScript 环境都遵循的规范。在 Node.js 中,通常使用 main 字段指定 CommonJS 模块的入口,而在现代浏览器环境中,使用 type=“module” 的 script 标签加载模块时会优先考虑 module 字段。
- exports 字段:
- 作用: exports 字段是 Node.js 12+ 版本引入的,它用于指定模块的导出规则,允许你定义模块的多个入口。
- 用法: exports 字段可以用来指定模块的入口文件,允许你为不同的环境提供不同的入口。它支持多种格式,例如:
- 注意: 目前 exports 字段在 Node.js 环境中得到较好的支持,但在其他环境中的兼容性可能有限。
2023/12/20 更新
对于 exports 字段有了更深的理解, 如果 exports 只指定了一条路径, 那么就无法使用包内部的其他子模块, 类似与下面的情景
import { hexSend, hexEventTrack, hexGetToken } from 'hex-event-track' //正确
import { hexSend, hexEventTrack, hexGetToken } from 'hex-event-track/mini' // 错误
如果想要使用子路径参考下方代码示例的配置。
关键的两个字段,exports
和 typesVersions
是相辅相成的。
- package.json 文件内部的 exports、typesVersions 字段
- exports 的功能是配置打包工具的解析,
- 而 typesVersions 是针对ts的类型文件解析, 如果没有typesVersions 也可以成功打包, 但是在vscode里面得不到正常的类型提示。
{
"name": "hex-event-track",
"version": "1.1.0",
"description": "",
"type": "module",
"scripts": {
"build": "tsup --global-name globalHexEventTrack",
"watch": "tsup --watch --global-name globalHexEventTrack",
"test": "vitest -u"
},
"keywords": [
"hexfuture event track"
],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/ua-parser-js": "^0.7.37",
"eslint": "^8.46.0",
"tsup": "^7.2.0",
"typescript": "^5.1.6",
"vitest": "^0.34.4"
},
"files": [
"dist",
"src"
],
"types": "./dist/index.d.ts",
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"./mini": {
"import": "./dist/mini/index.js",
"require": "./dist/mini/index.cjs"
}
},
"typesVersions": {
"*": {
".": [
"./dist/index.d.ts"
],
"mini": [
"./dist/mini/index.d.ts"
]
}
},
"repository": {
"type": "git"
},
"dependencies": {
"ua-parser-js": "^1.0.36"
}
}
遇到的问题
我在使用老版本vuecli时遇到了不识别exports字段的问题。需要加上 main 字段
参考文档
exports, typesVersions 字段使用
yalc: 可能是最好的前端link调试方案