npm与package.json详解

1、npm是什么

npm是前端开发广泛使用的包管理工具，它让js开发者分享、复用代码更方便。可以重复的框架代码被称为包（package）或者模块(module),一个包可是是一个文件夹里放着几个文件夹，还有一个package.json文件。

npm的作用就是让我们把可复用的框架代码发布到一个地方，可以供大家一起使用。

2、安装npm

npm是依赖node.js的，先去官网https://nodejs.org/en/download/下载安装node.js，下载安装好node，npm也有了，查看版本

1. node -v

2. v10.15.3

3.  

4. npm -v

5. 6.9.0

3、更新npm

npm更新速度很快，安装node附带的npm可能不是最新的，可以执行命令到最新版本npm。install，安装；-g全局安装；npm@latest 就是 <packageName>@<version>的格式

npm install npm@latest -g

4、package.json文件

一个package.json文件可以的作用

• 作为一个描述文件，描述了你的项目依赖那些包
• 允许我们使用“语义版本规则”，指明你项目依赖的版本
• 让你的构建更好的与其他人共享、   

5、package.json文件创建

• npm init就可以创建一个package.json文件，
• npm init --yes 可以跳过所有的问题

1. npm init

2.  

3. npm init --yes

npm init会弹出很多问题，可以输入对应的内容，也可以直接enter回车使用默认值，回答所有的问题，最后输入yes就会生成package.json文件

如果嫌弃回答，很多问题麻烦，可以直接输入npm init --yes 直接跳过问题，直接生成默认值的package.json文件

6、package.json内容

 至少要有两部分内容

• name：全部小写，没有空格，可以使用下划线或者横线
• version：x.x.x的格式，符合语义化规则

  其他内容

• description：描述信息，有助于搜索
• main：入口文件，一般都是index.js
• scripts：支持的脚本，默认是一个空的test
• author：作者信息
• license：默认是MIT
• keywords：关键字，有助于人们使用npm search搜索时候发现你的项目

1. {

2. "name": "y",

3. "version": "1.0.0",

4. "main": "index.js",

5. "scripts": {

6. "test": "echo \"Error: no test specified\" && exit 1"

7. },

8. "author": "",

9. "license": "ISC",

10. "keywords": [],

11. "description": ""

12. }

可以为init命令设置一些默认值

npm set init.author.name "yunduo"

7、指定依赖的包

我们需要在package.json文件中指定项目依赖的包，别人拿到项目的时候，可以使用npm install直接下载有依赖

包依赖有2种方式

• dependencies，在生产环境中需要用到的依赖
• devDependencies，在开发、测试环境中用到的依赖

  1. {

  2. "name": "",

  3. "version": "0.1.0",

  4. "private": true,

  5. "scripts": {

  6. },

  7. "dependencies": {

  8. "connect-history-api-fallback": "^1.6.0",

  9. "vue": "^2.5.22",

  10. "vue-awesome-mui": "^1.7.3",

  11. "vue-router": "^3.0.1",

  12. "vuex": "^3.0.1"

  13. },

  14. "devDependencies": {

  15. "@vue/cli-plugin-babel": "^3.4.0",

  16. "@vue/cli-plugin-eslint": "^3.4.0",

  17. "@vue/cli-service": "^3.4.0",

  18. "babel-eslint": "^10.0.1",

  19. "eslint": "^5.8.0",

  20. "eslint-plugin-vue": "^5.0.0",

  21. "expose-loader": "^0.7.5",

  22.  

  23. }

  24. }

  8、语义化版本规则

  如上package.设置有依赖dependencies的内容，例如 "vue": "^2.5.22"，key是依赖包的名称，value是这个依赖包的版本，那么版本签名的^是什么意思呢，或者版本前面直接是一个*是什么意思，这就是npm的语义化版本规则。

npm包提供者需要了解npm规则，应该注意版本规范，如果打算与别人分享，应该从1.0.0版本开始，遵循如下标准

• 补丁版本，解决了bug或者一些较小的更改，增加最后一位数字，如：1.0.1
• 小版本，增加了新特性，同时不会影响之前的版本，增加中间一位数据，如：1.1.0
• 大版本，大改版，无法兼容之前的版本，增加第一位数字，如：2.0.0

使用者，可以在package.json文件中写明可以接受的更新程度，

• 接受补丁版本的更新，1.0   1.0.x   -1.0.4
• 接受小版本的更新，1   1.x    ^1.0.4
• 接受大版本的更新  *    x

9、安装package，本地安装

9.1、目前有2种安装方式

• 全局安装，如果想在命令行使用grunt CLI,需要全局安装
• npm install，默认安装到本地，当前项目路径安装，如果在当前项目require()加载使用，直接安装到本地，如果项目有package.json文件，运行npm install后，会查找文件中的依赖包，dependencies和devDependencies里面的所有模块，如果只安装dependencies中的内容，可以使用--production字段

  1. npm install

  2. grunt CLI

   

本地安装详细介绍

• npm install <pageage_name>，安装指定的包。
• npm install <pageage_name@version> ，安装指定的版本。

 

注意：如果项目中有package.json文件，下载包时会下载这个文件中指定的版本，如果项目中没有package.json文件，然后会下载指定包的最新版本；如果指定了安装版本，会下载指定的安卓版本。有时候会报错，执行npm init，先生成一个package.json文件。

9.2、安装参数--save 和--save dev

项目中需要添加包的时候，可以手动更改package.json文件，在 dependencies devDependencies 中新增、删除或修改依赖包

还用一种方式是，使用命令行，增加--save 或者--save dev 后缀

• --save，表示将包名和对应的版本，添加到package.json里的dependencies模块(生产环境)
• --save dev，表示将包名和对应的版本，添加到package.json里的devDependencies模块（开发环境）

1. npm install <package_name> --save

2. npm install <package_name> --save dev

9.2、更新package

• npm outdataed 查看，是否有新版本
• npm updata <package_name>,更新指定依赖的版本
• npm updata,更新所有的包，不建议这么做，风险太大，了解清楚每个包更新版本的的新特性，是否兼容老代码等再更新
• npm updata工作过程，远程仓库查询最新版本；对比本地版本；查看package.json中对应的版本；package符合语义规则，更新，否则不更新。

9.4、卸载package

npm uninstall <package_name> --save lodash

 

10、全局安装

在命令行，直接使用依赖包，需要全局安装，全局安装比本地安装多了个-g

1. //全局安装某个包

2. npm install -g <package_name>

3.  

4. //全局更新某个包

5. npm upate-g <package_name>

6.  

7. //更新全局所有包

8. npm update -g

9.  

10. //查看全局包版本

11. npm outdated -g --depth=0

12.  

13. //卸载全局package

14. npm uninstall -g <package_name>

目前，本地安装使用比较多，全局安装不再详细描述。

 

11、npm常用命令

  npm简介：npm不需要单独安装，安装node的时候就已经安装了，node可能不是最新版本，执行npm install npm@latest -g，全局更新到最新版本，用npm安装npm自己。

1. # 更新npm最新版本

2. npm install npm@latest -g

3.  

4. # 查看npm命令列表

5. npm help

6.  

7. #查看各个命令的简单用法

8. npm -l

9.  

10. #查看npm版本

11. npm -v

12.  

13. #查看npm的配置

14. npm config list- l

15.  
16.  

17. #初始化生成package.json文件,可以自定义设置，

18. #也可以使用默认值安装,-ye后缀直接跳过提问环节，默认安装

19. npm init

20. npm init -y

21.  
22.  

23. #设置环境变量，为npm init 设置默认值

24. npm set init-author-name 'you name'

25. npm set init-author-email 'your email'

26. npm set init-author-url 'your url'

27. npm set init-license 'MIT'

28.  
29.  

30. #搜索npm仓库，可以跟字符串，也可以跟正则表达式

31. npm search <搜索词>

32.  
33.  

34. #列出安装的依赖包列表

35. npm list

36.  
37.  

38. #安装命令，比较常用,node_modules目录如果已经存在（老版本也是如此），那么就不在安装

39. npm install <package_name>

40. npm isntall <git url>

41.  

42. #安装最新版本

43. npm install <package_name>@latest

44.  

45. #安装指定版本

46. npm install <package_name>@0.1.1

47.  

48. #安装写到dependencies,-s是简写

49. npm install <package_name> --save

50. npm install <package_name> --s

51.  
52.  

53. #安装写到devDependencies,-D是简写,

54. npm install <package_name> --save-dev

55. npm install <package_name> --D

56.  

57. #安装beta版本

58. npm install <module-name>@beta

59.  
60.  

61. #npm更新

62. npm update <package_name>

63.  
64.  

65. #npm 卸载

66. npm uninstall <package_name>

67.  
68.  
69.  

70. #npm执行脚本，package.json文件有个scripts字段，可以定义脚本命令(lint,build)，npm直接执行

71. npm run lint

72. npm run build

73.  
74.  

75. #npm run 执行script下面所有的命令

76. npm run

77.  
78.  

79. #dev 脚本，开发阶段要做的处理.dev是自定义命令

80. npm run dev

81.  

82. #serve,脚本用于启动服务,serve是自定义命令

83. npm run serve

84.  
85.  
86.  
87.  
88.  
89.