npm系列：package.json

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" : "project@hostname.com"
}

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

  "license": "MIT",

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

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

"author": { "name" : "Barney Rubble", "email" : "b@rubble.com", "url" : "http://barnyrubble.tumblr.com/"
},
"contributors": [{ "name" : "Barney Rubble", "email" : "b@rubble.com", "url" : "http://barnyrubble.tumblr.com/"}, { "name" : "Barney Rubble", "email" : "b@rubble.com", "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-01.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时的一些配置项

参考文章：

1、https://www.jb51.net/article/254565.htm

npm系列：package.json相关推荐

npm与package.json
[背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [npm与package.json] 今天给大家分享的 ...
npm升级package.json依赖包到最新版本号
转载自:https://blog.csdn.net/syaivin/article/details/79388244?utm_source=blogxgwz1 1.安装: npm install -g ...
npm 与 package.json 快速入门
摘自 https://blog.csdn.net/u011240877/article/details/76582670#什么是-npm npm 是前端开发广泛使用的包管理工具,之前使用 Weex ...
npm中package.json详解
通常我们使用npm init命令来创建一个npm程序时,会自动生成一个package.json文件.package.json文件会描述这个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息,格 ...
npm和package.json那些不为常人所知的小秘密
此文已由作者黄锴授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 强大的命令功能如果你没使用过script,那你可算是从来没手动编辑过package.json.script作 ...
npm 与 package.json 快速入门教程
npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本文你将了解: 什么是 npm? 安装 npm 更新 npm ...
npm升级package.json依赖包
使用npm管理node的包,可以使用npm update <name>对单个包升级,对于npm的版本大于 2.6.1,可以使用命令: npm install -g 升级全局的本地包. 对于 ...
npm 创建 package.json 文件
本教程必须先安装nodejs,才可以使用npm命令 1 首先新建一个空白项目文件夹helloworld 2 cmd 进入项目文件helloworld 3 输入node 命令 npm init ,然后根 ...
Npm如何升级package.json
升级npm // 1.查看npm版本 npm -v// 2.升级npm(npm可换成cnpm) npm install -g npm 升级package.json // 1.安装升级插件 npm i ...
npm 包与模块关系下载使用包 init命令 package.json文件 node_modules文件夹全局安装包和本地安装包开发依赖和生产依赖
npm 了解npm npm 全称Node Package Manager(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题. npm 不需要单独安装.在安装Node的时候,会连 ...

npm系列：package.json

npm系列：package.json相关推荐

最新文章

热门文章