首页 前端知识 记录一下npm包的关键字段, 以及在本地如何方便调试 npm 包

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

2024-05-18 18:05:37 前端知识 前端哥 217 367 我要收藏

本地调试 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' // 错误

在这里插入图片描述

如果想要使用子路径参考下方代码示例的配置。

关键的两个字段,exportstypesVersions 是相辅相成的。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8761.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!