package.json 配置指南

颜酱2025-11-28 12:46

package.json 配置指南

package.json 是 npm 项目的核心配置文件，定义了项目的基本信息、依赖关系和脚本命令。

📑 目录

快速参考

字段配置速查表

字段 应用项目 工具库 CLI工具 组件库 Hooks库
private ✅ 必填 ❌ ❌ ❌ ❌
bin ❌ ❌ ✅ 必填 ❌ ❌
peerDependencies ❌ ❌ ❌ ✅ 必填 ✅ 必填
sideEffects - false false ["*.css"] false
exports ❌ ✅ 推荐 ✅ 推荐 ✅ 推荐 ✅ 推荐
main + module + types ❌ ✅ 必填 ✅ 必填 ✅ 必填 ✅ 必填

配置选择决策树

text 复制代码 
是否需要发布到 npm？
├─ 否 → 应用项目配置（private: true）
└─ 是 → 是否包含可执行命令？
    ├─ 是 → CLI 工具配置（bin 字段）
    └─ 否 → 是否依赖框架（React/Vue）？
        ├─ 是 → 是否为组件？
        │   ├─ 是 → UI 组件库配置（peerDependencies + sideEffects: ["*.css"]）
        │   └─ 否 → Hooks 库配置（peerDependencies + sideEffects: false）
        └─ 否 → 工具库配置（sideEffects: false）

快速配置模板链接

以下，仅供参考

  • 应用项目模板
  • 工具库模板
  • [CLI 工具模板](#CLI 工具模板 "#cli-%E5%B7%A5%E5%85%B7%E9%85%8D%E7%BD%AE%E6%A8%A1%E6%9D%BF")
  • [UI 组件库模板](#UI 组件库模板 "#ui-%E7%BB%84%E4%BB%B6%E5%BA%93%E9%85%8D%E7%BD%AE%E6%A8%A1%E6%9D%BF")
  • [Hooks 库模板](#Hooks 库模板 "#hooks-%E5%BA%93%E9%85%8D%E7%BD%AE%E6%A8%A1%E6%9D%BF")

项目分类

前端项目按发布方式分类：

  • 应用项目（Application）：不发布到 npm，如 Web 应用、移动端应用、桌面应用
  • npm 包（Package/Library） ：发布到 npm，供他人使用
    • 工具库（Utility Library）：纯函数库，如 lodash、dayjs、axios
    • CLI 工具（CLI Tool）：命令行工具，如 create-react-app、vite、eslint
    • UI 组件库（Component Library）：React/Vue 组件库，如 antd、element-ui、shadcn/ui
    • Hooks 库（Hooks Library）：React Hooks 集合，如 ahooks、react-use

第一部分：基础字段详解

通用基础字段

以下字段是所有项目的基础配置，确保项目可识别、可依赖：

字段名 作用说明 示例
name 项目名称（npm 包需唯一，不能包含大写字母、空格，建议用 kebab-case） "name": "my-web-app"（应用） "name": "utils-tool"（npm 包）
version 版本号（npm 包必填，遵循语义化版本：MAJOR.MINOR.PATCH） "version": "1.0.0"（首次发布） "version": "2.1.3-beta.1"（测试版）
description 项目描述（npm 包必填，帮助用户理解用途，影响 npm 搜索） "description": "A lightweight date processing tool"
author 作者信息（姓名、邮箱、主页可选） "author": "John <john@example.com> (https://john.dev)"
license 开源协议（npm 包建议填写，如 MIT、Apache-2.0；应用可省略或填 UNLICENSED） "license": "MIT"（npm 包） "license": "UNLICENSED"（私有应用）
keywords 关键词（npm 包必填，提升搜索曝光；应用可选） "keywords": ["date", "format", "utils", "browser"]
homepage 项目主页（npm 包建议填写，如 GitHub 仓库地址、文档地址） "homepage": "https://github.com/username/utils-tool#readme"
repository 代码仓库地址（npm 包必填，方便用户贡献代码） "repository": { "type": "git", "url": "git+https://github.com/username/utils-tool.git" }
bugs 问题反馈地址（npm 包建议填写，如 GitHub Issues） "bugs": "https://github.com/username/utils-tool/issues"
engines 声明依赖的 Node.js/npm 版本（避免环境兼容问题） "engines": { "node": ">=16.0.0", "npm": ">=8.0.0" }
type 模块类型（Node.js 14.13+ 支持，默认 commonjs，ES 模块需显式设为 module） "type": "module"
publishConfig 发布配置（如指定 npm 源、访问权限） "publishConfig": { "registry": "https://registry.npmjs.org/", "access": "public" }
files 发布到 npm 的文件 / 目录（指定需要上传的内容，避免冗余文件） "files": ["dist", "README.md", "package.json"]（排除 node_modules、.git 等）

应用项目专用字段

应用项目（如 Web 应用、React/Vue 项目、Electron 桌面应用）不发布到 npm，核心关注依赖管理、脚本命令、构建配置：

字段名 作用说明 示例
dependencies 生产环境依赖（项目运行必需，如 react、vue、axios） "dependencies": { "react": "^18.2.0", "axios": "^1.6.0" }
devDependencies 开发环境依赖（构建、测试、代码检查等，如 webpack、babel、jest） "devDependencies": { "webpack": "^5.88.0", "jest": "^29.7.0" }
scripts 自定义脚本命令（启动、构建、测试、部署等，核心字段） "scripts": { "start": "vite", "build": "vite build", "test": "jest", "lint": "eslint src" }
main 应用入口文件（Node.js 应用必填，如 Express 后端；前端应用可省略，由构建工具指定） "main": "src/index.js"（Node.js 后端应用）
browserslist 浏览器兼容目标（前端应用常用，配合 babel、autoprefixer 等工具） "browserslist": ["last 2 versions", "not dead", "iOS >= 12"]
proxy 开发环境跨域代理（React/Vue 等前端框架常用，简化跨域配置） "proxy": "https://api.example.com"
private 标记为私有项目（防止误发布到 npm，前端应用强烈建议设置） "private": true
workspaces monorepo 项目配置（管理多子包，如前端 + 后端 + 组件库放在同一仓库） "workspaces": ["packages/*", "apps/*"]
config 自定义脚本配置（可在 scripts 中通过 npm_config_xxx 读取） "config": { "port": 3000 }（脚本中用 $npm_config_port 获取）

npm 包专用字段

npm 包需发布到 npm 供他人使用，核心关注入口文件、导出规范、兼容性、发布配置：

字段名 作用说明 示例
main 主入口文件（CommonJS 模块，require 时默认加载） "main": "dist/index.cjs"
module ES 模块入口（支持 tree-shaking，webpack/rollup 优先加载） "module": "dist/index.esm.js"
browser 浏览器环境入口（区分 Node.js 和浏览器差异，如避免加载 fs 模块） "browser": "dist/index.browser.js"
exports 条件导出（Node.js 12+ 支持，精确控制不同环境的入口，替代 main/module/browser） "exports": { ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs", "browser": "./dist/index.browser.js" }, "./utils": "./dist/utils.esm.js" }
types / typings TypeScript 类型声明文件（TS 项目必填，提供类型提示） "types": "dist/index.d.ts"
bin CLI 工具入口（仅 CLI 类型 npm 包必填，映射命令到执行文件） "bin": { "my-cli": "./dist/cli.js" }（用户安装后可直接执行 my-cli）
peerDependencies 对等依赖（声明与宿主环境的兼容版本，如 React 组件库依赖 React） "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" }
peerDependenciesMeta 对等依赖可选配置（标记某些 peerDependency 为可选） "peerDependenciesMeta": { "vue": { "optional": true } }
optionalDependencies 可选依赖（缺失时不影响项目运行，如可选的性能优化模块） "optionalDependencies": { "lodash-es": "^4.17.0" }
sideEffects 标记包是否有副作用（Tree-shaking 优化） "sideEffects": false（纯工具库） "sideEffects": ["*.css"]（组件库样式文件）

字段优先级 ：exports（最高）→ module → main → types（独立）

推荐配置：同时配置所有字段，确保最大兼容性。

第二部分：按项目类型配置

应用项目配置

适用场景：Web 应用、移动端应用、桌面应用、企业内部项目、个人项目（不发布到 npm）

核心字段：基础字段 + scripts + dependencies + private

配置模板
json 复制代码 
{
  "name": "my-web-app",
  "version": "1.0.0",
  "description": "我的 Web 应用",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest run",
    "lint": "eslint src"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@types/react": "^18.2.0",
    "vitest": "^2.0.5",
    "eslint": "^8.50.0"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "packageManager": "pnpm@9.0.0",
  "browserslist": ["last 2 versions", "not dead"]
}

关键配置说明：

  • ✅ private: true：防止误发布到 npm
  • ✅ scripts：定义开发、构建、预览等命令
  • ✅ packageManager：锁定包管理器版本，确保团队一致
  • ❌ 无需配置 files、exports、main 等发布相关字段
  • ❌ 无需配置 repository、bugs、homepage 等公开信息

工具库配置

适用场景：纯函数库、工具类库、不依赖框架的 JS/TS 库，如 lodash、dayjs、axios

核心字段：双模式入口 + sideEffects: false + files

配置模板
json 复制代码 
{
  "name": "my-utils",
  "version": "1.0.0",
  "description": "实用的工具函数库",
  "keywords": ["utils", "helpers", "tools"],
  "author": "张三 <zhangsan@xxx.com>",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "devDependencies": {
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/my-utils.git"
  },
  "bugs": "https://github.com/xxx/my-utils/issues",
  "homepage": "https://github.com/xxx/my-utils#readme"
}

关键配置说明：

  • ✅ exports + main + module + types：双模式兼容，确保新旧工具都能使用
  • ✅ sideEffects: false：纯函数库无副作用，支持 Tree-shaking
  • ✅ files：仅发布 dist 目录，减小包体积
  • ✅ prepublishOnly：发布前自动构建，避免忘记打包
实际案例要点：Axios

核心设计：

  • 跨环境适配：通过 exports 区分 browser/node/react-native
  • 类型支持：区分 CJS/ESM 类型声明
  • Tree-shaking：sideEffects: false

关键配置：

json 复制代码 
{
  "exports": {
    ".": {
      "browser": { "require": "./dist/browser/axios.cjs", "default": "./index.js" },
      "default": { "require": "./dist/node/axios.cjs", "default": "./index.js" }
    }
  },
  "sideEffects": false
}

CLI 工具配置

适用场景：命令行工具、脚手架工具，如 create-react-app、vite、eslint

核心字段：bin + preferGlobal + shebang

配置模板
json 复制代码 
{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "命令行工具",
  "keywords": ["cli", "command-line", "tool"],
  "author": "张三 <zhangsan@xxx.com>",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "bin": {
    "my-cli": "./dist/cli.js"
  },
  "preferGlobal": true,
  "files": ["dist", "templates", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "commander": "^11.1.0",
    "inquirer": "^8.2.6",
    "chalk": "^4.1.2",
    "fs-extra": "^11.2.0",
    "handlebars": "^4.7.8"
  },
  "devDependencies": {
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/my-cli.git"
  },
  "bugs": "https://github.com/xxx/my-cli/issues",
  "homepage": "https://github.com/xxx/my-cli#readme"
}

关键配置说明：

  • ✅ bin：必须配置，映射命令名到入口文件
  • ✅ preferGlobal: true：提示用户全局安装（可选）
  • ✅ 入口文件需添加 Shebang ：#!/usr/bin/env node（tsup 打包时可通过 shebang: true 自动添加）
  • ✅ files 包含 templates：如果 CLI 工具包含模板文件，需在 files 中声明
  • ✅ dependencies 包含 CLI 相关库：commander、inquirer、chalk 等
实际案例要点：Vite

核心设计：

  • monorepo 架构：根包管理工程化，子包专注功能
  • 模块规范统一：type: module，统一使用 ESM
  • 多包协作：通过 pnpm workspace 实现版本联动

关键配置：

json 复制代码 
{
  "private": true,
  "type": "module",
  "packageManager": "pnpm@10.23.0",
  "workspaces": ["packages/*"]
}

UI 组件库配置

适用场景：React/Vue 组件库、UI 组件库，如 antd、element-ui、shadcn/ui

核心字段：peerDependencies + sideEffects（样式）+ 样式导出

配置模板
json 复制代码 
{
  "name": "my-components",
  "version": "1.0.0",
  "description": "React 组件库",
  "keywords": ["react", "components", "ui"],
  "author": "张三 <zhangsan@xxx.com>",
  "license": "MIT",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./style.css": "./dist/style.css"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": ["*.css", "./dist/style.css"],
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "clsx": "^2.0.0"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tsup": "^8.3.0",
    "typescript": "^5.5.4"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/my-components.git"
  },
  "bugs": "https://github.com/xxx/my-components/issues",
  "homepage": "https://github.com/xxx/my-components#readme"
}

关键配置说明：

  • ✅ peerDependencies：声明框架依赖（React/Vue），用户需自行安装
  • ✅ sideEffects: ["*.css"]：样式文件有副作用，需标记避免被 Tree-shaking 移除
  • ✅ exports 支持样式导出 ：允许用户单独导入样式文件（import 'my-components/style.css'）
  • ✅ devDependencies 包含框架：开发时需要，但不会被打包到最终产物
实际案例要点：Ant Design

核心设计：

  • 样式方案：CSS-in-JS（antd 6.x）或 Less 变量（antd 4.x）
  • 多格式输出：CJS/ESM/UMD，支持按需加载
  • 工程化完善：size-limit、视觉回归测试、文档生成

关键配置：

json 复制代码 
{
  "sideEffects": ["*.css"],
  "main": "lib/index.js",
  "module": "es/index.js",
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  }
}

Hooks 库配置

适用场景：React Hooks 集合、自定义 Hooks 库，如 ahooks、react-use

核心字段：peerDependencies (react) + sideEffects: false

配置模板
json 复制代码 
{
  "name": "my-hooks",
  "version": "1.0.0",
  "description": "实用的 React Hooks 集合",
  "keywords": ["react", "hooks", "custom-hooks"],
  "author": "张三 <zhangsan@xxx.com>",
  "license": "MIT",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "peerDependencies": {
    "react": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "react": "^18.2.0",
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/my-hooks.git"
  },
  "bugs": "https://github.com/xxx/my-hooks/issues",
  "homepage": "https://github.com/xxx/my-hooks#readme"
}

关键配置说明：

  • ✅ peerDependencies: react：Hooks 必须在 React 环境中使用
  • ✅ sideEffects: false：纯 Hooks 函数，支持 Tree-shaking
  • ✅ 无需样式文件：Hooks 库通常不包含样式
  • ⚠️ React 16.8+：Hooks 功能要求 React 16.8 及以上版本
实际案例要点：ahooks

核心设计：

  • monorepo 架构：根包管理工程化，子包专注业务
  • 多模块格式：CJS/ESM/UMD，覆盖不同场景
  • React 版本兼容：peerDependencies 覆盖主流版本

关键配置：

json 复制代码 
{
  "sideEffects": false,
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}

第三部分：进阶内容

npm 生命周期脚本

npm 生态中的「生命周期脚本」是包管理器（npm/yarn/pnpm）内置的自动化钩子机制------当执行 npm install「安装依赖」、npm publish「发布包」、npm version「版本变更」等核心操作时，会按固定顺序触发一系列预定义脚本，无需手动调用即可自动完成编译、测试、打包等重复性工作。

核心规则

  1. pre/post 前缀自动链式执行

    • 对于任意自定义或内置脚本（如 build/publish），npm 会自动识别并按以下顺序执行：prexxx（前置脚本）→ xxx（核心脚本）→ postxxx（后置脚本）
    • 示例：若定义了 build 脚本，执行 npm run build 时，实际执行顺序为：prebuild → build → postbuild（即使未定义 prebuild/postbuild，也会跳过而非报错）

  2. 内置事件触发规则

    • npm 预定义了一批核心操作（如 install/publish/version）作为「触发事件」，当执行这些操作时，会自动触发对应的生命周期脚本
    • 例如：执行 npm install 会触发 preinstall → 安装核心流程 → postinstall
常用生命周期脚本
脚本名 触发时机 执行顺序 常用场景
preinstall npm install 前 1 检查环境、安装前置依赖
postinstall npm install 后 2 初始化配置、编译代码
prepare npm install 和 npm publish 时 特殊 Git Hooks 初始化（husky install）
prepublishOnly npm publish 前 1 构建、测试、版本校验
postpublish npm publish 后 2 推送代码、更新文档
preversion npm version 前 1 运行测试、检查代码
version npm version 时 2 自定义版本变更逻辑
postversion npm version 后 3 提交版本变更、打标签
prepare 的使用场景

prepare 脚本会在以下场景自动执行：

  • 你在自己的项目里执行 npm install（安装依赖时）
  • 别人执行 npm install 你的包（安装你的包时，不管是从 npm 还是 GitHub 源码）
  • 你执行 npm publish（发布包到 npm 时）

常见用法：

json 复制代码 
{
  "scripts": {
    "prepare": "husky install" // 安装依赖时自动初始化 Husky
  }
}

npx 使用指南

npx 是 npm 5.2.0+ 内置的包执行工具，全称是 Node Package Execute，用于直接执行 npm 包中的可执行文件，无需手动全局安装包。

核心功能

  1. 临时执行包（无需全局安装）

    bash 复制代码 
    # 无需全局安装 create-react-app，直接创建 React 项目
npx create-react-app my-app

# 无需全局安装 @vue/cli，直接创建 Vue 项目
npx @vue/cli create my-vue-app

  2. 调用本地已安装包的命令

    bash 复制代码 
    # 项目已安装 eslint，直接运行（等价于 ./node_modules/.bin/eslint）
npx eslint src/**/*.js

# 项目已安装 webpack，直接执行打包
npx webpack --mode production

  3. 执行指定版本的包

    bash 复制代码 
    # 使用 4.x 版本的 create-react-app
npx create-react-app@4 my-app

# 使用特定版本的 vite 创建项目
npx vite@4 create my-vite-app

  4. 执行 GitHub 仓库的脚本

    bash 复制代码 
    npx github:piuccio/cowsay hello
npx 与 npm run 的区别
特性 npx npm run
执行内容 任意 npm 包的可执行命令（本地/全局/临时） package.json 中 scripts 定义的命令
调用范围 可调用未安装的包（临时下载） 仅调用项目 package.json 依赖的包
使用场景 临时工具、单次命令、指定版本测试 项目固定脚本（如 dev/build/test）

示例：

bash 复制代码 
# npx：直接调用全局/临时包的命令
npx eslint src

# npm run：调用 package.json 中 scripts 里的 "lint" 命令
npm run lint
常用技巧
  • 跳过本地安装，强制使用远程包 ：npx --ignore-existing create-react-app my-app
  • 查看包的可执行命令 ：npx --commands cowsay
  • 执行本地脚本 ：npx ./scripts/my-script.js（需有 shebang 或 .js 后缀）

附录

配置模板汇总

应用项目模板
json 复制代码 
{
  "name": "my-web-app",
  "version": "1.0.0",
  "description": "我的 Web 应用",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@types/react": "^18.2.0"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "packageManager": "pnpm@9.0.0"
}
工具库模板
json 复制代码 
{
  "name": "my-utils",
  "version": "1.0.0",
  "description": "实用的工具函数库",
  "keywords": ["utils", "helpers", "tools"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "devDependencies": {
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name/my-utils.git"
  },
  "bugs": "https://github.com/your-name/my-utils/issues",
  "homepage": "https://github.com/your-name/my-utils#readme"
}
CLI 工具模板
json 复制代码 
{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "命令行工具",
  "keywords": ["cli", "command-line", "tool"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT",
  "type": "module",
  "bin": {
    "my-cli": "./dist/cli.js"
  },
  "preferGlobal": true,
  "files": ["dist", "templates", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "commander": "^11.1.0",
    "inquirer": "^8.2.6",
    "chalk": "^4.1.2"
  },
  "devDependencies": {
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name/my-cli.git"
  },
  "bugs": "https://github.com/your-name/my-cli/issues",
  "homepage": "https://github.com/your-name/my-cli#readme"
}
UI 组件库模板
json 复制代码 
{
  "name": "my-components",
  "version": "1.0.0",
  "description": "React 组件库",
  "keywords": ["react", "components", "ui"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./style.css": "./dist/style.css"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": ["*.css"],
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "clsx": "^2.0.0"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tsup": "^8.3.0",
    "typescript": "^5.5.4"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name/my-components.git"
  },
  "bugs": "https://github.com/your-name/my-components/issues",
  "homepage": "https://github.com/your-name/my-components#readme"
}
Hooks 库模板
json 复制代码 
{
  "name": "my-hooks",
  "version": "1.0.0",
  "description": "实用的 React Hooks 集合",
  "keywords": ["react", "hooks", "custom-hooks"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": false,
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest run",
    "prepublishOnly": "npm run build"
  },
  "peerDependencies": {
    "react": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "react": "^18.2.0",
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "vitest": "^2.0.5"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name/my-hooks.git"
  },
  "bugs": "https://github.com/your-name/my-hooks/issues",
  "homepage": "https://github.com/your-name/my-hooks#readme"
}

字段速查表

字段名 类型 必填 适用场景 说明
name string ✅ 所有项目 项目名称（npm 包需唯一）
version string ✅ 所有项目 版本号（npm 包必填）
description string ✅ npm 包 项目描述
private boolean ✅ 应用项目 防止误发布
main string ✅ npm 包 CJS 入口
module string ✅ npm 包 ESM 入口
types string ✅ TS npm 包 类型声明
exports object 推荐 npm 包 条件导出（优先级最高）
bin object/string ✅ CLI 工具 命令映射
sideEffects boolean/array 推荐 npm 包 Tree-shaking 优化
peerDependencies object ✅ 组件库/Hooks库 对等依赖
files array ✅ npm 包 发布文件列表
scripts object ✅ 所有项目 自定义脚本
dependencies object - 所有项目 生产依赖
devDependencies object - 所有项目 开发依赖

参考资源

相关推荐
todoitbo35 分钟前
基于 DevUI MateChat 搭建前端编程学习智能助手：从痛点到解决方案
前端·学习·ai·状态模式·devui·matechat
oden41 分钟前
SEO听不懂？看完这篇你明天就能优化网站了
前端
IT_陈寒1 小时前
React性能优化：这5个Hooks技巧让我减少了40%的重新渲染
前端·人工智能·后端
Sunhen_Qiletian1 小时前
《Python开发之语言基础》第六集：操作文件
前端·数据库·python
珑墨1 小时前
【唯一随机数】如何用JavaScript的Set生成唯一的随机数？
开发语言·前端·javascript·ecmascript
L***d6701 小时前
十七：Spring Boot依赖 （2）-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
少云清1 小时前
【功能测试】6_Web端抓包 _Fiddler抓包工具的应用
前端·功能测试·fiddler
豐儀麟阁贵1 小时前
8.5在方法中抛出异常
java·开发语言·前端·算法
zengyuhan5032 小时前
Windows BLE 开发指南（Rust windows-rs)
前端·rust
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08Labelme从安装到标注：零基础完整指南09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中