package.json详解

前言

简述写这篇文章的缘由：

写这篇文章是由于前段时间有人问我，她在面试中面试官问了她，是否了解package.json中的版本问题？安装模块的~、>、^等表明什么意思？她跟我说，平时只是用项目中的npm start启动或者构建项目，真没有一个个了解这么多，当时心态就崩了o(╥﹏╥)oo(╥﹏╥)o，后面面试也没能答好。

我给的建议就是，在面试中或者平时遇到难题这都很正常，前端问题不少很难都面面俱到，都是一个成长的过程，这个时候咱们就实话说，说没有具体了解，回去后我去补补这方面的知识，或者去请教面试官，都是能够的，也不会由于这一个问题就pass你。面试官会考察这方便的问题，一方面是根据本身业务中遇到过这些问题，还有就是考察面试者掌握前端的基础和深度广度，咱们真不知道的时候，传达给面试官咱们有学习的探索精神。

目标：你从本文能够学到什么？

• 一、关于npm
• 二、package.json是什么？
• 三、如何建立package.json
• 四、全局安装和本地安装究竟是怎么区分的？
• 五、安装、更新、卸载模块
• 六、package.json中模块的版本^2.0.0``~2.0.0等 （安装版本使用到@表示什么意思？npm install jquery@3.4.1）
• 七、package.json中每一个字段的详解
• 八、版本号version的意义，如，大更新、增长一些功能上线、修补一些小布丁的上线，咱们改怎么打包版本号？与git如何配合使用
• 九、版本号的周期、阶段，（-alpha、-beta、-rc都是什么周期的哪一个阶段项目，哪些是开发人员打包的项目，哪些是测试人员的项目，上线的项目）
• 十、一些其余的npm命令
• 十一、了解package.json与项目直接的关系
• 十二、require引入模块的时候是怎么查找模块的

在讲解package.json时，必需要先简单介绍一下npm，那npm是什么呢？要怎么安装呢？

npm

npm 是前端开发普遍使用的包管理工具， 为您和您的团队打开了整个JavaScript的世界。 来自各大洲的开源开发人员使用npm来共享和借用包，许多组织也使用npm来管理私有开发。

一、npm是什么？

官方介绍：

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing.

ps： 官方网站 www.npmjs.com/ 浏览、搜索、下载安装想要的别人上传的模块，也能够直接在命令行中 search 一下。

咱们程序开发中经常须要依赖别人提供的框架，咱们能够看到一些大型的vue、react框架中也是有依赖别人的模块或者说是包，这样能够提升效率，避免重复造轮子，且每每这些轮子用户体验也必比较好。一个包或者说模块都会有一个package.json文件用来描述这个包。

使用npm，咱们能够更方便查看依赖这些模块的更新。

npm都干什么了呢？

npm由三个不一样的组件组成：

• 网站： www.npmjs.com/
• 命令行界面（CLI）：开发者使用它来管理、安装、更新、发布模块；
• 注册表：保存着人们分享的js模块的大数据库

二、安装npm

从node.js站点安装npm

第一步：安装node.js和npm

在这里不具体讲解安装过程了，网上有不少。 npm 是依附于 node.js 的，咱们能够去它的官网 nodejs.org/en/download… 下载安装 node.js。

第二步：测试您的安装

安装后，运行node -v。没有报错，出现版本号为成功。安装node.js是，会自动安装npm。一样运行npm -v，可查看版本号。

第三步：若是你须要更新npm

npm 更新地可比 node 勤快多了，所以你下载的 node 附带的 npm 版本可能不是最新的，你可使用以下命令下载最新 npm:

npm install npm@latest -g
复制代码

在这讲解一下这句话的意思

• install：就表示是要安装；
• npm@latest： 使用 @ 的格式，表示做用域，指定版本，latest表示最新模板；咱们在下载其余模块时也是这个格式。
• -g：表示全局安装

安装 -g 是全局安装，能够在任意命令下使用,如：

npm i http-server -g
复制代码

> 咱们在命令行中http-server能够在命令中使用,是由于咱们配置了环境变量.

/usr/local/bin/http-server -> /usr/local/lb/node_modules/http-server/bin/http-server

package.json

管理本地安装的npm包的最佳方法是建立一个 package.json文件。

了解package.json

每一个项目（npm上下载的包，或者其余的nodejs项目）的根目录下面，通常都有一个package.json文件， 定义了这个项目所须要的各类模块，以及项目的配置信息（好比名称、版本、许可证、如何启动项目、运行脚步等元数据）。npm install命令根据这个配置文件，自动下载所需的模块。

package.json文件就是一个JSON对象，该对象的每个成员就是当前项目的一项设置。好比name就是项目名称，version是版本（遵照“大版本.次要版本.小版本”的格式）。还会在项目的生命周期中扮演多个角色、开发、测试、上线版本。

package.json的做用

• 做为一个描述文件，描述了你的项目所依赖的包
• 容许咱们使用 “语义化版本规则”（后面介绍）指明你项目依赖包的版本
• 让你的构建更好地与其余开发者分享，便于重复使用

package.json如何建立

一、使用命令行工具客户端CLI

npm init
复制代码

这将启动命令行调查问卷，该调查问卷将package.json在您启动命令的目录中建立.

二、建立默认值

要获取默认值package.json，请npm init使用--yes or -y标志运行：

npm init -y
复制代码

此方法将package.json使用从当前目录中提取的信息生成默认值, 跳过回答问题步骤 。

三、手动建立

直接在项目根目录新建一个 package.json 文件，而后输入相关的内容。 具体请查看package.json的注意事项。

package.json文件常见字段详解

一、 name

必须字段 ，当前模块\包名称， 长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母。

这个名字可能会做为参数被传入require()，因此它应该比较短，但也要意义清晰。

二、 version

必须字段 ，当前包的版本号，初次创建默认为1.0.0。

version必须能够被npm依赖的一个node-semver模块解析 。定义了当前项目的版本迭代进度。 （遵照“大版本.次要版本.小版本”的格式）

可能如今不少小伙伴们没有注意或者不在意版本号，更多使用产品的版本号，或者git hashcode方式。

三、 description

可选字段，必须是字符串。当前包的描述信息，是一个字符串。它能够帮助人们在使用npm search时找到这个包。

若是 package.json 中没有 description 信息，npm 使用项目中的 README.md 的第一行做为描述信息。这个描述信息有助于别人搜索你的项目，所以建议好好写 description 信息。

四、 main

可选字段， 指定了项目加载的入口文件。

这个字段的默认值是模块根目录下面的index.js。

五、 scripts

可选字段，scripts是一个由脚本命令组成的hash对象，他们在包不一样的生命周期中被执行。key是生命周期事件，value是要运行的命令。 指定了运行脚本命令的npm命令行缩写，好比start指定了运行npm run start时，所要执行的命令。咱们能够自定义咱们想要的运行脚步命令。

参考： www.ruanyifeng.com/blog/2016/1…

scripts配置执行的脚步

• 1）执行命令 echo xxx

• 2. 执行node_modules/.bin 下的文件

为何能够执行呢？

当我执行 npm run的时候，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。所以，只要是 Shell（通常是 Bash）能够运行的命令，就能够写在 npm 脚本里面。会把当前目录下的node_modules/.bin也拷贝到当前的系统的path（只是临时拷贝，执行结束后，在将PATH变量恢复原样）， 因此当前目录的node_modules/.bin子目录里面的全部脚本，均可以直接用脚本名调用，而没必要加上路径。

例如：

咱们用node执行一个node.js服务是，node + 文件 能够用node server.js; 咱们也能够用webpack的打包前端文件，webpack-dev-server,固然webpack 和webpack-dev-server是要安装依赖的模块；

"scripts": {   
    "build": "webpack --mode=development",
    "dev": "webpack-dev-server --mode=development --contentBase=./dist",
    "server":"node app.js"
  }
复制代码

咱们在命令行工具中输入npm run server ，就会调用node app.js帮咱们运行。

简写形式：

npm start是npm run start
npm stop是npm run stop的简写
npm test是npm run test的简写
npm restart是npm run stop && npm run restart && npm run start的简写
复制代码

经常使用脚本 -----网上收集转

// 删除目录
"clean": "rimraf dist/*",

// 本地搭建一个 HTTP 服务
"serve": "http-server -p 9090 dist/",

// 打开浏览器
"open:dev": "opener http://localhost:9090",

// 实时刷新
 "livereload": "live-reload --port 9091 dist/",

// 构建 HTML 文件
"build:html": "jade index.jade > dist/index.html",

// 只要 CSS 文件有变更，就从新执行构建
"watch:css": "watch 'npm run build:css' assets/styles/",

// 只要 HTML 文件有变更，就从新执行构建
"watch:html": "watch 'npm run build:html' assets/html",

// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",

// 构建 favicon
"build:favicon": "node scripts/favicon.js",

"start": "cross-env NODE_ENV=production node server/index.js",

复制代码

六、 dependencies、devDependencies

可选字段， dependencies字段指定了项目运行所依赖的模块 ， devDependencies指定项目开发所须要的模块 。

值指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

默认建立的package.json没有，当咱们安装npm install一个模块时就会生成。

npm install express
npm install express --save
npm install express --save-dev
复制代码

上面代码表示单独安装express模块，

• 后边没有参数时，表示安装到dependencies属性，
• --save参数表示将该模块写入dependencies属性，
• --save-dev表示将该模块写入devDependencies属性。

七、bundledDependencies

可选字段，发布包时同时打包的其余依赖。

八、 peerDependencies

可选字段，兼容性依赖，若是你的项目或者模块，同时依赖另外一个模块，可是所依赖的版本不同。

好比，你的项目依赖A模块和B模块的1.0版，而A模块自己又依赖B模块的2.0版。

{
  "name": "chai-as-promised",
  "peerDependencies": {
    "chai": "1.x"
  }
}
复制代码

上面代码指定，安装chai-as-promised模块时，主程序chai必须一块儿安装，并且chai的版本必须是1.x。若是你的项目指定的依赖是chai的2.0版本，就会报错。

九、 bin

可选字段，bin字段用来指定各个内部命令对应的可执行文件的位置。

例如： 以前我在写建立一个本身的脚手架时，也用到了这个。 juejin.im/post/5e1802…

具体使用可查看，这篇文章的第三步，工程建立。

在项目根目录建立/bin/www文件

#! /usr/bin/env node
复制代码

package.json中配置

"bin":{
  "lee-cli":"./bin/www"
}
复制代码

npm link 将package中的属性bin的值路径添加全局连接 建立快捷方式链接

在命令行中执行lee-cli就会执行bin/www文件。过程是：

在上面的例子中，www会创建符号连接node_modules/.bin/www。因为node_modules/.bin/目录会在运行时加入系统的PATH变量，所以在运行npm时，就能够不带路径，直接经过命令来调用这些脚本。

十、 config

config字段用于向环境变量输出值

{
  "name" : "package",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}
复制代码

若是想改变咱们可使用

npm config set package:port 80
复制代码

十一、engines

可选字段，指明了该模块运行的平台版本，好比 Node 的某个版本或者浏览器， 也能够指定适用的npm版本 。

"engines" : { 
"node" : 
">=0.10.3 <0.12"
} 
复制代码

十二、license

可选字段， 表示定义适用于package.json所描述代码的许可证。不一样的协议有不一样的限制。让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制。

可参考： choosealicense.com/ 选择许可证。

如：MIT：最大许可，别人下载你的代码能够改你的代码,默认安装值。

1三、author

可选字段，项目开发者。

1四、private

可选字段，布尔值，是否私有，设置为 true 时，npm 拒绝发布。

这是防止私有包被之外发布的一种方法。若是你但愿包装某个包只能被发布到特定的一个registry中(好比，一个内部的registry)，则可使用下面的publishConfig字典来描述以在publish-time重写registry配置参数。

1五、keywords

可选字段，项目关键字，是一个字符串数组。它能够帮助人们在使用npm search时找到这个包。

1六、os

可选字段，指定模块能够在什么操做系统上运行

1七、style

style指定供浏览器使用时，样式文件所在的位置。

1八、repository

包代码存放的地方的类型，能够是 git 或 svn，git 可在 Github 上

1九、homepage

可选字段，没有http://等带协议前缀的URL。

版本问题：

version:"1.0.0"

1.0.0:

第一位改变表示：不兼容老代码,大规模的更新，新版本发布；

第二位表示：增长了一些功能，向下兼容；

第三位表示：小的补丁，bug修改；

咱们发表项目的时候，一盘使用npm + git

• 使用npm version patch (patch打补丁) 这种会改变版本的第三位；使用git tag 执行即会自动在git上版本号
• 使用npm version minor这种改变的版本号的第二位；同步git版本；
• 使用npm version major 这种改变版本号的第一位；同步git版本；

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

major：主版本号

minor：次版本号

patch：补丁号

premajor：预备主版本

prepatch：预备次版本

prerelease：预发布版本
复制代码

ps：注意，若是报错：Git working directory not clean 是说明你如今须要git status是clean的。

git add .
git commit -m"package.json详解 "
复制代码

npm versin monir -m"增长版本号"

git push -u origin master
复制代码

如何制定规则？

做为使用者，咱们能够在 package.json 文件中写明咱们能够接受这个包的更新程度（假设当前依赖的是 1.2.4 版本）：

• 若是只打算接受补丁版本的更新（也就是最后一位的改变），就能够这么写：

  1.2
   1.2.x
   ~1.2.4
  复制代码

• 若是接受小版本的更新（第二位的改变），就能够这么写：

  1
  1.x
  ^1.2.4
  复制代码

• 若是能够接受大版本的更新（天然接受小版本和补丁版本的改变），就能够这么写：

  *
  x
  复制代码

  小结一下：总共三种版本变化类型，接受依赖包哪一种类型的更新，就把版本号准确写到前一位。

版本周期、阶段：

• α -Alpha 第一阶段 通常只供内测使用
• β -Beta 第二阶段 已经消除了软件中大部分的不完善之处，可是仍有可能还存在缺陷和漏洞，通常提供给特定的用户群里来测试使用；
• γ - RC 是第三阶段，此时产品已经至关成熟，只须要在个别地方在作进一步的优化处理便可上市发布

例如：

2.1.0-beta.1 通常这样用户不会安装这种的，这种能够用内侧、测试人员使用。

依赖包的版本问题

实例	说明
~1.2.3	主版本+次要版本+补丁版本;1.2.3 <= version < 1.3.0;
~1.2	主版本+次要版本;1.2.0 <= version < 1.3.0
~1	主版本;1.0.0 <= version < 2.0.0

符号	实例	版本范围	说明
	1.0.0	1.0.0	锁定1.0.0版本，必须这个版本。
^会匹配最新的大版本依赖包	^1.2.三、^0.2.3	>=1.2.3 <2.0.0、>=0.2.3 <0.3.0	表示安装1.x.x的最新版本（不低于1.2.3，包括1.3.0），可是不安装2.x.x，也就是说安装时不改变大版本号。须要注意的是，若是大版本号为0，则插入号的行为与波浪号相同，这是由于此时处于开发阶段，即便是次要版本号变更，也可能带来程序的不兼容。(主版本)
~会匹配最近的小版本依赖包	~1.2.3	>=1.2.3 <1.3.0	表示安装1.2.x的最新版本（不低于1.2.3），可是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
>=	>=2.1.0	>=2.1.0	大于等于2.1.0
<=	<=2.0.0	<=2.0.0	小于等于2.0.0
laster			安装最新的版本
*		>=0.0.0	任何版本
-	1.2.3 - 2.3.4	>=1.2.3 <=2.3.4

区分安装Dependencies和dependencies？

devDependencies是开发所须要的模块，因此咱们能够在开发过程当中须要的安装上去，来提升咱们的开发效率，好比一些知名的第三方库， webpack、rollUp、less、babel这些。 就不必在生成环境安装。

如下类库都建议安装到devDependencies:

• 单元测试支撑（mocha、chai）；
• 语法兼容（babel）；
• 语法转换（jsx to js、coffeescript to js、typescript to js）
• 程序构建与优化（webpack、gulp、grunt、uglifyJS）；
• css 处理器（postCSS、SCSS、Stylus）；
• 代码规范（eslint）；

依赖包（指定、更新、本地、使用、卸载）

一、安装本地依赖包

npm install jquery
复制代码

这个命令会在当前目录建立一个 node_modules 目录，而后下载咱们指定的包到这个目录中。

二、指定安装版本，能够在package name后@版本号。

若是包的名称以包开头@，则它是一个范围包。

npm install jquery@3.4.1
npm install jquery@">=1.1.0 <2.2.0"
npm install jquery@latest
复制代码

更新以后，dependencies内的版本号也会改变。

三、更新依赖包

npm update jquery
复制代码

四、使用包

let jquery = require('jquery');
复制代码

<script src="/node_modules/jquery/dist/jquery.js">//这个须要注意路径</script> 
复制代码

六、卸载依赖包

npm uninstall jquery
复制代码

Semantic versioning（语义化版本规则）

docs.npmjs.com/about-seman…

github.com/npm/node-se…

package.json注意事项

根据上边咱们在使用npm init会询问咱们填几项内容，有的能够不填，有的必须填，这些必填都是一个package.json内容必需要具有的字段：name和version,若是没有，没法执行install

• name:全是小写，没有空格,循序使用连字符和下划线
• version: 版本号,遵循上边说的语义化版本规则x.x.x

其余注意事项：

• 添加中文注释会编译出错

延伸

其余

一、咱们常常会在安装一半退出在继续安装会报错，这是由于有缓存的缘由。

npm cache clean --force
复制代码

二、npx

npx能够直接执行node_modules/.bin文件 不须要在去配置scripts

若是模块不存在能够安装，安装完有后会本身销毁，避免安装全局模块

参考资料：

cloud.tencent.com/developer/s…

docs.npmjs.com/about-seman…

semver.org/lang/zh-CN/

docs.npmjs.com/misc/semver…

www.ruanyifeng.com/blog/2016/1…