记录一下npm包的关键字段, 以及在本地如何方便调试 npm 包

本地调试 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调试方案