package.json 字段说明

参考：https://www.cnblogs.com/tzyy/p/5193811.html（比较详细）或 https://juejin.cn/post/7099041402771734559（有分类）或 https://mp.weixin.qq.com/s/RrHPyjQjGXqRWxz6LvslMw

{
  // 名称
  "name": "vue",
  // 版本
  "version": "2.6.10",
  // 描述
  "description": "Reactive, component-oriented view layer for modern web interfaces.",
  // npm包项目的主要入口文件，必须的
  "main": "dist/vue.runtime.common.js",
  // rollup 打包需要的入口文件
  "module": "dist/vue.runtime.esm.js",
  // npm 上所有的文件都开启 cdn 服务地址
  "unpkg": "dist/vue.js",
  // jsdelivr cdn公共库
  "jsdelivr": "dist/vue.js",
  // TypeScript 的入口文件
  "typings": "types/index.d.ts",
  // 当你发布package时，具体那些文件会发布上去
  "files": [
    "src",
    "dist/*.js",
    "types/*.d.ts"
  ],
  // 声明该模块是否包含 sideEffects（副作用），从而可以为 tree-shaking 提供更大的优化空间。
  "sideEffects": false,
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment 
  },
  // 代码质量检查
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  },
  // 代码检查
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  // git仓库所在位置
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue.git"
  },
  // 关键词
  "keywords": [
    "vue"
  ],
  // 作者
  "author": "Evan You",
  // 开源协议
  "license": "MIT",
  // bug地址
  "bugs": {
    "url": "https://github.com/vuejs/vue/issues"
  },
  // 主页
  "homepage": "https://github.com/vuejs/vue#readme",
  // 依赖
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "acorn": "^5.2.1",
    "babel-eslint": "^10.0.1",

  },
  // 设置一些用于npm包的脚本命令会用到的配置参数
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

说明：

作为包的 package.json 文件和作为顶层项目目录下的 package.json 是有点区别。项目目录下的 package 文件，字段不是很严格的要求。
包版本的的问题：package.json中包的版本不一定是指定版本，可能是版本的也范围。https://blog.csdn.net/qq_29180565/article/details/106674104
```
npm 包 设定的版本规则：主版本号.次版本号.修补版本号
```

- version ：指定版本。比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
- ~version：大概匹配某个版本。比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
- ^version：兼容某个版本。比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。
- latest ：安装最新版本。
- >version：必须大于某个版本。
- >=version：可大于或等于某个版本。
- X ：x号的位置表示任意版本。如：1.2.x，表示可以1.2.0，1.2.1，…，1.2.n

一、必须属性

name
version

二、描述信息

description
keywords
author：author顾名思义就是作者，表示该项目包的作者。
contributors：contributors表示该项目包的贡献者，和author不同的是，该字段是一个数组，包含所有的贡献者
homepage：homepage就是项目的主页地址了，它是一个字符串。
repository：表示代码的存放仓库地址。

三、依赖配置

dependencies
devDependencies
peerDependencies

四、脚本配置

scripts
config：用来配置scripts运行时的配置参数，如下所示：
```
"config": { 
      "port": 3000
}
```
如果运行npm run start，则port字段会映射到npm_package_config_port环境变量中：
```
console.log(process.env.npm_package_config_port) // 3000
```

五、文件&目录

main：用来指定加载的入口文件，在 browser 和 Node 环境中都可以使用。如果我们将项目发布为npm包，那么当使用 require 导入npm包时，返回的就是main字段所列出的文件的module.exports 属性。如果不指定该字段，默认是项目根目录下的index.js。如果没找到，就会报错。【如果不是作为npn库的包，这个字段不需要写】
browser：定义 npm 包在 browser 环境下的入口文件。
module：定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用。如果 npm 包导出的是 ESM 规范的包，使用 module 来定义入口文件。
{ 说明下 }：main、browser、module 三个的入口入口文件相关的配置是有差别的，特别是在不同的使用场景下。在Web环境中，如果使用loader加载ESM（ES module），那么这三个配置的加载顺序是browser→module→main，如果使用require加载CommonJS模块，则加载的顺序为main→module→browser。
bin：用来指定各个内部命令对应的可执行文件的位置
files
man

六、发布配置

private
publishConfig
license

七、第三方配置

typings：指定TypeScript的入口文件
TypeScript 的入口文件。【npm 包中 package.json 可能会有，项目下的根据开发者自己定】

　个人理解：typings 字段就是方便 IDE 识别、编译、智能提示 js 语法的工具。项目中引入包，根据 main字段引入文件的。

　　　　　　 typings 的入口文件里面的代码只是为编辑器智能提示服务的【同时，开发人员 通过这个文件，可以找到某个方法具体有哪些参数以及参数类型】。

　　　　　　真正执行的程序是不会执行这里面的代码的；所以编辑器跳转是先根据 typings 字段进行跳转的，如果没有这个字段再跳转 main 字段的文件。

　　经验：webstorm中npm包的类型声明中 interface 定义的类型类型变量，跳转时可以跳转到 ts 的源文件的定义处。
eslintIgnore：eslint 使用这个字段

posted @ 2020-12-13 23:26 吴飞ff 阅读(1605) 评论(0) 编辑收藏举报

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

package.json 字段说明

一、必须属性

二、描述信息

三、依赖配置

四、脚本配置

五、文件&目录

六、发布配置

七、第三方配置

公告