一些package.json配置示列

ant-design-mobile

  1. {
  2.   "name": "antd-mobile",
  3.   "version": "5.10.2",
  4.   "scripts": {
  5.     "start": "dumi dev",
  6.     "build": "gulp",
  7.     "build-doc": "dumi build",
  8.     "lint": "eslint \"src/**/*.{ts,tsx}\"",
  9.     "postinstall": "husky install",
  10.     "test": "jest",
  11.     "test-with-coverage": "jest --coverage",
  12.     "publish": "npm publish ./lib --registry=https://registry.npmjs.org",
  13.     "publish:alpha": "npm publish ./lib --registry=https://registry.npmjs.org --tag alpha",
  14.     "publish:dev": "npm publish ./lib --registry=https://registry.npmjs.org --tag dev"
  15.   },
  16.   "dependencies": {
  17.     "@floating-ui/dom": "^0.4.2",
  18.     "@react-spring/web": "^9.4.4",
  19.     "@types/big.js": "^6.1.3",
  20.     "@types/react-is": "^17.0.3",
  21.     "@types/resize-observer-browser": "^0.1.7",
  22.     "@use-gesture/react": "^10.2.10",
  23.     "ahooks": "^3.1.14",
  24.     "antd-mobile-icons": "^0.2.2",
  25.     "antd-mobile-v5-count": "^1.0.1",
  26.     "big.js": "^6.1.1",
  27.     "classnames": "^2.3.1",
  28.     "dayjs": "^1.11.0",
  29.     "lodash": "^4.17.21",
  30.     "rc-field-form": "^1.24.0",
  31.     "react-is": "^17.0.2",
  32.     "staged-components": "^1.1.2",
  33.     "tslib": "^2.3.1"
  34.   },
  35.   "devDependencies": {
  36.     "@babel/cli": "^7.17.6",
  37.     "@babel/core": "^7.17.8",
  38.     "@babel/plugin-transform-modules-commonjs": "^7.17.7",
  39.     "@babel/preset-env": "^7.16.11",
  40.     "@babel/preset-react": "^7.16.7",
  41.     "@babel/preset-typescript": "^7.16.7",
  42.     "@docsearch/react": "^3.0.0",
  43.     "@jest/types": "27.5.1",
  44.     "@testing-library/jest-dom": "^5.16.3",
  45.     "@testing-library/react": "^12.1.4",
  46.     "@testing-library/react-hooks": "7.0.2",
  47.     "@testing-library/user-event": "13.5.0",
  48.     "@types/jest": "^27.4.1",
  49.     "@types/jest-axe": "3.5.3",
  50.     "@types/lodash": "^4.14.180",
  51.     "@types/react": "^17.0.43",
  52.     "@types/react-helmet": "^6.1.5",
  53.     "@typescript-eslint/eslint-plugin": "^5.16.0",
  54.     "@typescript-eslint/parser": "^5.16.0",
  55.     "babel-loader": "^8.2.4",
  56.     "css-loader": "^6.7.1",
  57.     "del": "^6.0.0",
  58.     "dumi": "^1.1.40",
  59.     "eslint": "^8.12.0",
  60.     "eslint-config-prettier": "^8.5.0",
  61.     "eslint-plugin-react": "^7.29.4",
  62.     "eslint-plugin-react-hooks": "^4.3.0",
  63.     "gulp": "^4.0.2",
  64.     "gulp-babel": "^8.0.0",
  65.     "gulp-less": "^5.0.0",
  66.     "gulp-postcss": "^9.0.1",
  67.     "gulp-rename": "^2.0.0",
  68.     "gulp-replace": "^1.1.3",
  69.     "gulp-typescript": "^6.0.0-alpha.1",
  70.     "husky": "^7.0.4",
  71.     "jest": "27.5.1",
  72.     "jest-axe": "^5.0.1",
  73.     "jest-environment-jsdom": "27.5.1",
  74.     "jest-watch-typeahead": "1.0.0",
  75.     "less": "^4.1.2",
  76.     "lorem-ipsum": "^2.0.4",
  77.     "mockdate": "^3.0.5",
  78.     "postcss": "^8.4.12",
  79.     "postcss-px-multiple": "^0.1.5",
  80.     "postcss-pxtorem": "^6.0.0",
  81.     "prettier": "^2.6.1",
  82.     "pretty-quick": "^3.1.3",
  83.     "prism-react-renderer": "^1.3.1",
  84.     "prismjs": "^1.27.0",
  85.     "qrcode.react": "^1.0.1",
  86.     "react": "^17.0.2",
  87.     "react-dom": "^17.0.2",
  88.     "react-helmet": "^6.1.0",
  89.     "react-test-renderer": "^17.0.2",
  90.     "react-virtualized": "^9.22.3",
  91.     "style-loader": "^3.3.1",
  92.     "through2": "^4.0.2",
  93.     "ts-jest": "27.1.4",
  94.     "ts-node": "10.7.0",
  95.     "typescript": "~4.5.5",
  96.     "vite": "^2.8.6",
  97.     "webpack": "^5.70.0",
  98.     "webpack-bundle-analyzer": "^4.5.0",
  99.     "webpack-stream": "^7.0.0"
  100.   },
  101.   "peerDependencies": {
  102.     "react": "^16.8.0 || ^17.0.0"
  103.   },
  104.   "main": "./cjs/index.js",
  105.   "module": "./es/index.js",
  106.   "types": "./es/index.d.ts",
  107.   "typings": "./es/index.d.ts",
  108.   "unpkg": "./umd/antd-mobile.js",
  109.   "GravityCDN": "./umd/antd-mobile.js",
  110.   "files": [
  111.     "./lib"
  112.   ],
  113.   "sideEffects": [
  114.     "**/*.css",
  115.     "**/*.less",
  116.     "./es/index.js",
  117.     "./src/index.ts",
  118.     "./es/global/index.js",
  119.     "./src/global/index.ts"
  120.   ],
  121.   "publishConfig": {
  122.     "registry": "https://registry.npmjs.org"
  123.   },
  124.   "repository": {
  125.     "type": "git",
  126.     "url": "git+https://github.com/ant-design/ant-design-mobile.git",
  127.     "branch": "master",
  128.     "platform": "github"
  129.   },
  130.   "packageManager": "yarn@3.2.0"
  131. }

npm初始化

  1. {
  2.   "name": "css-demo",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "babel-preset-stage-0": "^6.24.1",
  14.     "cross-env": "^7.0.3",
  15.     "react": "^18.0.0",
  16.     "react-dom": "^18.0.0",
  17.     "webpack": "^5.72.0",
  18.     "webpack-cli": "^4.9.2",
  19.     "webpack-dev-server": "^4.8.1",
  20.     "webpack-merge": "^5.8.0"
  21.   },
  22.   "devDependencies": {
  23.     "babel-plugin-import": "^1.13.3",
  24.     "css-loader": "^6.7.1",
  25.     "file-loader": "^6.2.0",
  26.     "jsx-loader": "^0.13.2",
  27.     "less": "^4.1.2",
  28.     "less-loader": "^10.2.0",
  29.     "style-loader": "^3.3.1",
  30.     "url-loader": "^4.1.1"
  31.   }
  32. }

配置字段解析

参考文档

name

name: 这个很好理解，就是package的名称 过需要注意的是，name有长度限制(虽然一般都不会超)，而且name不能以 【点】 或者 【下划线】开头，name中不能有大写字母 在业务代码中，通过require(${name})就可以引入对应的程序包了

  1. {
  2.   name: "ant-design-mobile"
  3. }

version

version: package的版本 ame和version共同决定了唯一一份代码 npm是用[npm-semver来解析版本号的 版本号的规则、含义其实蛮多的，可以参考这篇文章

  1. {
  2.   "name": "antd-mobile",
  3.   "version": "5.10.2",
  4. }

author 、contributors

author 和 contributors 字段的功能类似。它们都是 people 字段，可以是”Name” 格式的字符串，也可以是具有 name，email，url 字段的对象。email 和 url 都是可选的

license

license：开源协议。 对于开源组件库，这个十分重要 之前react还因为这事儿没少被社区嫌弃。开源协议略微复杂，用阮一峰前辈的一张图来说明一下吧。注：图里少了ISC, ISC和BSD差不多

desription：包的描述 开发组件库时必需，简明的向库的使用者介绍这个库是干嘛的。对于公司的业务项目，这个配置项一般无所谓

  1. {
  2.   "name": "antd-mobile",
  3.   "version": "5.10.2",
  4.   "desription": "这是一个移动端react组件库",
  5. }

keywords

keywords：关键词 一个字符串数组，对这个npm包的介绍。组件库必需，便于使用者在npm中搜索 对于公司业务项目，这个配置一般无所谓，对于组件库，工具库，在npm发布的重要

private

若package.json中设置了 “private”: true，npm 将拒绝发布它 web 项目大多不需要提交到 npm 仓库，建议将 private 设为 true

homepage

  • homepage： 项目主页。对于开发组件库来说挺有用的。

repository

对于组件库很有用。 让组件库使用者找到你的代码库地址。这个配置项会直接在组件库的npm首页生效

  1. "repository": {
  2.     "type": "git",
  3.     "url": "git+https://github.com/CoyPan/react-scroll-to-show-cb.git"
  4. },

bugs

开发者的联系方式，代码库的issues地址等。如果代码使用者发现了bug，可以通过这个配置项找到提bug的地方。

scripts

scripts控制项目生命周期的脚本

  1. "scripts": {
  2.     "start": "dumi dev",
  3.     "build": "gulp",
  4.     "build-doc": "dumi build",
  5.     "lint": "eslint \"src/**/*.{ts,tsx}\"",
  6.     "postinstall": "husky install",
  7.     "test": "jest",
  8.     "test-with-coverage": "jest --coverage",
  9.     "publish": "npm publish ./lib --registry=https://registry.npmjs.org",
  10.     "publish:alpha": "npm publish ./lib --registry=https://registry.npmjs.org --tag alpha",
  11.     "publish:dev": "npm publish ./lib --registry=https://registry.npmjs.org --tag dev"
  12.   },

engines

保证node版本开发一致 我们很难保证同事间的开发环境统一，例如不同开发者的 node 版本是不一致的，有人是8.x， 有人是10.x 有人是14.x。来个新人问一下你们 node 用什么版本，累不累。配置下 engines 吧

  1. "engines": {
  2.   "node": ">=12.10.0 <15"
  3. }

main

包的入口文件。默认是项目根目录下的index.js

  1. "main": "index.js"

image.png

files

files用于决定哪些文件被发布到 npm 仓库去 cjs,ejs等模块加载规范

  1. "files": [
  2.     "src",
  3.     "dist/*.js",
  4.     "types/*.d.ts"
  5.   ],

bin

命令行工具入口,使用 npm 开发一个命令行工具 当你的包提供了一个命令行工具时，你需要为命令行工具指定一个入口。命令名称和本地可指定文件的对应关系

  1. "bin": {
  2.     "paytm-security-cli": "index.js"
  3.   },

config

用于添加命令行的环境变量

directories

对整个代码结构的描述 告诉代码包使用者可以在哪里找到对应的文件

dependencies

项目的依赖。通过npm install —save安装的包会出现在这里 注意：不要把测试工具、代码转换器或者打包工具等放在这里。

  1. "dependencies" : { 
  2.     "foo" : "1.0.0 - 2.9999.9999",
  3.     "bar" : ">=1.0.2 <2.1.2",
  4.     "baz" : ">1.0.2 <=2.3.4",
  5.     "boo" : "2.0.1",
  6.     "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
  7.     "asd" : "http://asdf.com/asdf.tar.gz",
  8.     "til" : "~1.2",
  9.     "elf" : "~1.2.3",
  10.     "two" : "2.x",
  11.     "thr" : "3.3.x",
  12.     "lat" : "latest",
  13.     "dyl" : "file:../dyl"
  14.   }

devDependencies

项目的依赖。 通过npm run install —save-dev安装的包会出现在这里。主要是在开发过程中依赖的一些工具

  1. "devDependencies": {
  2.     "@babel/cli": "^7.17.6",
  3.     "@babel/core": "^7.17.8",
  4.     "@babel/plugin-transform-modules-commonjs": "^7.17.7",
  5.     "@babel/preset-env": "^7.16.11",
  6.     "@babel/preset-react": "^7.16.7",
  7.     "@babel/preset-typescript": "^7.16.7",
  8.     "@docsearch/react": "^3.0.0",
  9.     "@jest/types": "27.5.1",
  10.     "@testing-library/jest-dom": "^5.16.3",
  11.     "@testing-library/react": "^12.1.4",
  12.     "@testing-library/react-hooks": "7.0.2",
  13.     "@testing-library/user-event": "13.5.0",
  14.     "@types/jest": "^27.4.1",
  15.     "@types/jest-axe": "3.5.3",
  16.     "@types/lodash": "^4.14.180",
  17.     "@types/react": "^17.0.43",
  18.     "@types/react-helmet": "^6.1.5",
  19.     "@typescript-eslint/eslint-plugin": "^5.16.0",
  20.     "@typescript-eslint/parser": "^5.16.0",
  21.     "babel-loader": "^8.2.4",
  22.     "css-loader": "^6.7.1",
  23.     "del": "^6.0.0",
  24.     "dumi": "^1.1.40",
  25.     "eslint": "^8.12.0",
  26.     "eslint-config-prettier": "^8.5.0",
  27.     "eslint-plugin-react": "^7.29.4",
  28.     "eslint-plugin-react-hooks": "^4.3.0",
  29.     "gulp": "^4.0.2",
  30.     "gulp-babel": "^8.0.0",
  31.     "gulp-less": "^5.0.0",
  32.     "gulp-postcss": "^9.0.1",
  33.     "gulp-rename": "^2.0.0",
  34.     "gulp-replace": "^1.1.3",
  35.     "gulp-typescript": "^6.0.0-alpha.1",
  36.     "husky": "^7.0.4",
  37.     "jest": "27.5.1",
  38.     "jest-axe": "^5.0.1",
  39.     "jest-environment-jsdom": "27.5.1",
  40.     "jest-watch-typeahead": "1.0.0",
  41.     "less": "^4.1.2",
  42.     "lorem-ipsum": "^2.0.4",
  43.     "mockdate": "^3.0.5",
  44.     "postcss": "^8.4.12",
  45.     "postcss-px-multiple": "^0.1.5",
  46.     "postcss-pxtorem": "^6.0.0",
  47.     "prettier": "^2.6.1",
  48.     "pretty-quick": "^3.1.3",
  49.     "prism-react-renderer": "^1.3.1",
  50.     "prismjs": "^1.27.0",
  51.     "qrcode.react": "^1.0.1",
  52.     "react": "^17.0.2",
  53.     "react-dom": "^17.0.2",
  54.     "react-helmet": "^6.1.0",
  55.     "react-test-renderer": "^17.0.2",
  56.     "react-virtualized": "^9.22.3",
  57.     "style-loader": "^3.3.1",
  58.     "through2": "^4.0.2",
  59.     "ts-jest": "27.1.4",
  60.     "ts-node": "10.7.0",
  61.     "typescript": "~4.5.5",
  62.     "vite": "^2.8.6",
  63.     "webpack": "^5.70.0",
  64.     "webpack-bundle-analyzer": "^4.5.0",
  65.     "webpack-stream": "^7.0.0"
  66.   }

bundledDependencies

数组，打包时的依赖 如果配置了bundledDependencies，在项目中执行 npm pack将项目打包时，最后生成的.tgz包中，会包含bundledDependencies中配置的依赖 bundledDependencies中的依赖必须在devDependencies或者dependencies中声明过

peerDependencies

指定当前组件的依赖以其版本 如果组件使用者在项目中安装了其他版本的同一依赖，会提示报错

  1. "peerDependencies": {
  2.     "react": "^16.8.0 || ^17.0.0"
  3.   },

publishconfig

一组配置值，发布时使用 当我们开发完自己的项目想要将它发布到 Npm 仓库就需要使用这个属性，默认情况下我们是往 Npm 公共仓库中发布包，默认地址是：https://www.npmjs.com/，此时在 package.json 文件中可以不加这个属性 但是如果公司内部搭建了 Npm 私有仓库，此时发布包就不是往 https://www.npmjs.com/ 这个地址上发布了，而是公司内部提供的地址，如：http://gongsineibu/nexus/repository/npm-hosted/

  1. "publishConfig": {
  2.     "registry": "http://gongsineibu/nexus/repository/npm-hosted/"
  3.   }

type

type字段的产生用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式 值为’moduel’则当作es模块处理；值为’commonjs’则被当作commonJs模块处理 目前node默认的是如果pacakage.json没有定义type字段，则按照commonJs规范处理 node官方建议包的开发者明确指定package.json中type字段的值 无论package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理

  1. "type": "module"