npm系列：package.json

Posted 2021-09-28 赏花赏景赏时光

1、关于packag.json的基础知识

这还是我最熟悉的package.json吗？

2、npm发包流程

npm发包流程 - 知乎

3、sh: vue-cli-service: command not found

mac 报错：sh: vue-cli-service: command not found_充电五分钟...-CSDN博客

一、在开发npm包，或者库的时候，package.json以下属性的配置很重要：

1）files：定义了哪些文件应该被包括在 npm install 后的 node_modules中（有些文件是自动暴露的），避免一些不必要的文件暴露到 node_modules，比如开发一个组件库或者插件的时候，避免使用方多安装依赖

files值可以是文件夹名称，也可以是具体文件名称

  // 可以
  "files": [
    "src"
  ]
   
  // 不可以，前面不能用绝对路径的写法
  "files": [
    "./src"
  ]

注意：如果在发布的包或者库中，没有在package.json中定义files字段，则会暴露源码

2）dependencies、devDependencies：

网上大多数文章说dependecies用于生产依赖、devDependencies用于开发环境依赖（通常是工具类的包），但是在做项目的时候，把依赖都安装到devDependencies时候，生产上项目也是可以正常跑起来。这是为什么呢？

因为webpack不管依赖是放在dependencies，还是devDependencies，只要在项目中引用了相关依赖，那么这些依赖就会出现在webpack的Dependency Graph( 依赖图)，在构建的时候，都会把依赖打包进构建结果中

个人感觉：这两个属性的作用主要在于开发插件、组件库的时候，发布npm包时候的区分。当发布了一个npm包即A包，第三方在npm install A包时，会将A包中package.json里面的depengdencies依赖都安装，devDependencies不会安装。这样的话可以最大限度避免第三方重复安装依赖。

举个例子：开发了一个基于Vue的插件，那么这个插件要在Vue搭建的项目中才能使用，即第三方的项目里面一定有安装了Vue依赖。为了避免用户在安装插件A的时候又装了一遍Vue，可以在开发A插件的项目的package.json将Vue定义在devDependencies中并结合peerDependencies就可以实现上面的功能了

3）peerDependencies：

在开发npm包的时候，提示宿主环境去安装满足插件A中peerDependencies所指定依赖的包，然后在插件import、require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题，避免依赖重复安装

4）main：指定引用模块的路径

5）name：包名

6）verision：包版本，每次修改内容在发布之前，要修改包版本

7）repository（string，object）：代码仓库的地址

二、package.json中字段browser   module     main的优先级

package.json中你还不清楚的browser，module，main 字段优先级 - 浅笑· - 博客园

1、文件优先级：ejs>js

2 、npm包使用环境：

1）只允许在客户端使用

2）只允许在服务端使用

3）允许在客户端和服务端使用

三、package.json文件中的字段含义和作用

一些字段的解释：package.json里的一些属性讲解 - 知乎

1）description（字符串）、keywords（字符串数组）

这两个字段都是用来在npm官网上搜索的, 区别是一个是字符串, 一个是字符串数组。npm会对description做分词搜索, 而对于 keywords会做精准搜索

"description": "Reactive, component-oriented view layer for modern web interfaces.",
"keywords": [
  "vue"
]

2）name（string）、version（string）（option）

在开发npm包的时候一定要写，因为名字加版本号是包的唯一标识；name表示包名；version表示包的版本。但是如果是项目的话，可以不写。

"name": "vue",
"version": "2.6.14"

需要注意下面几点

包名注意事项：

A、包名必须少于等于 214 字符,
B、包名不能以 .或_开头
C、包名不能含有大写字母 (历史原因, 有的老包还有大写字母,新的已经不能用大写字母)
D、另外, 一些URL规范里不允许的字符也不能用(具体哪些字符就需要大家自己查查了)
E、建议不要在包名里包含js``node等字眼, 因为npm默认就是js或node的
F、因为包名最终会用在require语句里, 所以尽可能短一些,但要注意能明确表达自己的用途
G、你开发一个包之前, 最好自己上 npm官网看看名字是不是已经被占用了(很重要)

版本号注意事项：对于版本号, npm使用业界标准的 {major}.{feature}.{patch} 模式

major：做了重大改变

feature：增加新功能

patch：修复一些bug

3）homepage（url）：这个包的官网 （option）

"homepage": "https://github.com/vuejs/vue#readme"

4）bugs（object）：给用户提供上报缺陷的途径。可以是email或者直接给出链接（option）

bugs: { 
    "url" : "https://github.com/owner/project/issues",
    "email" : "[e-mail]"
}

5）license（string）：使我们可以定义适用于 package.json 所描述代码的许可证，有MIT 、 ISC（option）

  "license": "MIT",

6）author（object）、contributors（对象数组）（option）

这是关于作者或者其他开发人员信息的字段。区别是author是单个对象, 而contributors是数组，每一项是一个对象

"author": { 
    "name" : "Barney Rubble", 
    "email" : "[e-mail]", 
    "url" : "http://barnyrubble.tumblr.com/"
},
"contributors": [
  { 
      "name" : "Barney Rubble", 
      "email" : "[e-mail]", 
      "url" : "http://barnyrubble.tumblr.com/"
  }, { 
      "name" : "Barney Rubble", 
      "email" : "[e-mail]", 
      "url" : "http://barnyrubble.tumblr.com/"
  }
]

7）funding：捐助信息，一般用不到（option）

8）files（array）：在发布包的时候，很重要，指明包中应该包含哪些文件，支持目录和通配

  "files": [
    "src",
    "dist/*.js",
    "types/*.d.ts"
  ]

发包时候，一些文件会自动忽略掉

.git
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
.*.swp
.DS_Store
._*
npm-debug.log
.npmrc
node_modules
config.gypi
*.orig
package-lock.json

9）browser：定义npm包在客户端下的入口文件

 // browser 可定义成和 main/module 字段一一对应的映射对象，也可以直接定义为字符串
  "browser": {
    "./lib/index.js": "./lib/index.browser.js", // browser+cjs
    "./lib/index.mjs": "./lib/index.browser.mjs"  // browser+mjs
  },

  // "browser": "./lib/index.browser.js" // browser

10）module：定义npm包在node端的入口文件

"module": "lib/index.mjs", // module

11）main：定义npm包在客户端和node端的入口文件

"main": "lib/index.js",  // main 

12）bin：定义了一系列可执行命令, 在全局安装的命令行包里尤其多见；带有bin信息的包, 在局部安装后, 可执行文件会在./node_modules/.bin下,；如果是全局安装, 可执行文件会在 $PATH 里对应npm那个目录下.

带有bin信息的包, 在局部安装后, 可执行文件会在./node_modules/.bin下,

如果是全局安装, 可执行文件会在 $PATH 里对应npm那个目录下

"bin": {
    "pm2": "./bin/pm2",
    "pm2-dev": "./bin/pm2-dev",
    "pm2-docker": "./bin/pm2-docker",
}

13）man（manuel手册）：指定一个(或多个)文件, 用于执行man {包名}时, 用来指定当前模块的man文档的位置

"man" :[ "./doc/calc.1" ]

14）directories：是一个object, 包含了lib``bin``man``doc``example``test等属性,

主要是用来告诉用户某些功能目录放在哪里

"directories": {
    "bin": "./bin",
    "doc": "./doc",
    "lib": "./lib",
 

15）repository（string，object）：代码仓库的地址

 "repository": "git+https://github.com/vuejs/vue.git"



 "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue.git"
  },

16）scripts：指定了运行脚本命令的npm命令行缩写

"scripts": {
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
}

17）config（object）：添加命令行的环境变量

package.json内容如下：

{
  "name": "foo",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}

在server.js脚本就可以引用config字段的中port的值：npm_package_config_xxx，如npm_package_config_port

http
  .createServer(...)
  .listen(process.env.npm_package_config_port)

用户执行npm run start命令时，这个脚本就可以得到值：

npm run start

修改端口号，（但是实际中没有生效，待解决） ：

$ npm config set foo:port 80

18）dependencies、devDependencies（object）：指定项目的依赖

两者的区分，如上面所述。

对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围，版本范围格式如下：

1、version Must match version exactly
2、>version Must be greater than version
3、>=version etc
4、<version
5、<=version
6、~version "Approximately equivalent to version" See semver
7、^version "Compatible with version" See semver
8、1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
9、http://... See 'URLs as Dependencies' below
10、* Matches any version
11、"" (just an empty string) Same as *
12、version1 - version2 Same as >=version1 <=version2.
13、range1 || range2 Passes if either range1 or range2 are satisfied.
14、git... See 'Git URLs as Dependencies' below
15、user/repo See 'GitHub URLs' below
16、tag A specific version tagged and published as tag See npm dist-tag
17、path/path/path See Local Paths below



{
  "dependencies": {
    "foo": "1.0.0 - 2.9999.9999",
    "bar": ">=1.0.2 <2.1.2",
    "baz": ">1.0.2 <=2.3.4",
    "boo": "2.0.1",
    "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd": "http://asdf.com/asdf.tar.gz",
    "til": "~1.2",
    "elf": "~1.2.3",
    "two": "2.x",
    "thr": "3.3.x",
    "lat": "latest",
    "dyl": "file:../dyl"
  }
}

a）固定版本号，形如：“2.0.1”

b）版本范围，由运算符+固定版本号组成，运算符如下：

< ：小于
<=：小于等于
> ：大于
>=：大于等于
=：等于. 该符号在实际中可以被忽略掉

形如：
>=1.2.7 <1.3.0：表示版本范围在大于等于1.2.7，小于1.3.0都可以
1.2.7 || >=1.2.9 <2.0.0：可以是1.2.7,1.2.9等，但不能是1.2.8，2.0.0

c）预发布标签alpha

如：>1.2.3-alpha.3中带了预发布标识alpha，那么带预发布标识的版本号需要
[major, minor, patch]一样，即1.2.3-alpha.4,但是1.2.4-alpha.4不满
足条件。没有带预发布标识的版本只要满足大于1.2.3-alpha.3就可以了，比如：1.2.5

d）预发布标识beta

1.2.4-beta.0

e）连字符范围“-”：X.Y.Z - A.B.C

1、1.2.3 - 2.3.4 等价于 >=1.2.3 <=2.3.4
2、如果在第一个范围内少了的部分，则用0替换：
  1.2 - 2.3.4 等价于 >=1.2.0 <=2.3.4
3、如果在第二个范围内少了的部分，则范围都要从这个版本开始：
  1.2.3 - 2.3 等价于 >=1.2.3 <2.4.0-0
  1.2.3 - 2   等价于 >=1.2.3 <3.0.0-0

f）波浪号范围“～”：~1.2.3     ~1.2      ~1

1、~1.2.3 等价于 >=1.2.3 <1.(2+1).0 即：>=1.2.3 <1.3.0-0
2、~1.2 等价于 >=1.2.0 <1.(2+1).0 即：>=1.2.0 <1.3.0-0 (Same as 1.2.x)
3、~1 等价于 >=1.0.0 <(1+1).0.0 := >=1.0.0 <2.0.0-0 (Same as 1.x)
4、~0.2.3 := >=0.2.3 <0.(2+1).0 := >=0.2.3 <0.3.0-0
5、~0.2 := >=0.2.0 <0.(2+1).0 := >=0.2.0 <0.3.0-0 (Same as 0.2.x)
6、~0 := >=0.0.0 <(0+1).0.0 := >=0.0.0 <1.0.0-0 (Same as 0.x)
7、~1.2.3-beta.2 := >=1.2.3-beta.2 <1.3.0-0 Note that prereleases in the 1.2.3 version will be allowed, if they are greater than or equal to beta.2. So, 1.2.3-beta.4 would be allowed, but 1.2.4-beta.2 would not, because it is a prerelease of a different [major, minor, patch] tuple

g）插入符号范围“^“：^1.2.3     ^0.2.5       ^0.0.4

1、^1.2.3 := >=1.2.3 <2.0.0-0
2、^0.2.3 := >=0.2.3 <0.3.0-0
3、^0.0.3 := >=0.0.3 <0.0.4-0
4、^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0-0 Note that prereleases in the 1.2.3 version will be allowed, if they are greater than or equal to beta.2. So, 1.2.3-beta.4 would be allowed, but 1.2.4-beta.2 would not, because it is a prerelease of a different [major, minor, patch] tuple.
5、^0.0.3-beta := >=0.0.3-beta <0.0.4-0 Note that prereleases in the 0.0.3 version only will be allowed, if they are greater than or equal to beta. So, 0.0.3-pr.2 would be allowed.

19）peerDependencies同上述

20）peerDependenciesMeta 用户安装您的软件包时，如果peerDependencies尚未安装指定的软件包，npm将发出警告。该 peerDependenciesMeta字段用于向npm提供有关如何使用对等依赖项的更多信息

21）bundledDependencies 这些软件包名称将在发布软件包时捆绑在一起

22）optionalDependencies 如果找不到依赖项或安装失败，则希望npm继续，则可以将其放在 optionalDependencies对象中

23）engines字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器

{ "engines" : { "node" : ">=0.10.3 <0.12" } }

24）os 指定操作系统

{
    "os": [
        "darwin",
        "linux",
        "!win32"
    ]
}

25、cpu 指定cpu

{
    "cpu": [
        "x64",
        "ia32",
        "!arm",
        "!mips"
    ]
}

26、private

这个设置为true, 就会无法npm publish。如果项目需要保密，则需要设置该字段为true，如果需要发包，则不能设置为true

27、publishConfig，定义一个包在发布到npm时的一些配置项