package.json的认识

前言

感觉这块也是一个知识点，虽然我现在还不能系统的用xmind总结每个知识点的串联关系，但是只能看一个记一个了

package.json是什么

我个人理解，package.json是描述包，管理包的一个信息json文件，给npm用的，比如你可以写一个包，发到npm，那这个json就是记录这个包的信息，或者对用vue脚手架开发的项目而言，它就是管理包的文件，npm install会读这个文件的denp配置包信息然后下载

package.json 如何产生的

用npm init初始化，一路回车，这里说一句，npm init，这句话，我们是用shell窗口输入的，就是在这种
要知道，这个窗口里面的指令，其实执行的是shell指令，也就是说，npm init，打下去后，它内部跑了一个sehll的指令，这个指令调用系统创建文本的指令，然后巴拉巴拉，最后输出到本文件夹。

dependenices和devDependenices

这两个字段，从始至终，我只知道，dependenices的依赖包是本地，线上开发都需要，比如UI框架，而devDependenices的依赖包，只是本地开发才需要，比如eslint；

（1）什么叫本地需要，线上开发需要？
我的理解啊，就是npm run dev的时候，这两个字段的依赖包全部都会加载，而npm run build的时候，devDependenices的依赖包不会打包进去，从而减少了整个包的体积，访问更快一点

（2）锁版本
我今天才知道，原来安装依赖的时候，把包前面的倒三角删掉，版本就锁定了

那么这样做有什么用呢？？
你的同事，拉代码，跑npm install的时候，如果依赖包前面带倒三角，它其实是默认拉最新的包，如果它跑完了，代码一推，这个package.json被更新了，重点来了！
依赖A版本是1.0，它匹配依赖B版本是1.0，后面依赖B更新了2.0，你安装依赖的 时候，A还是1，但是B被你更新变成2了，结果就报错了

（3）指令

// 安装最新到dependenices(默认)
npm i xxxxx

// 安装最新到dependenices
npm i xxxxx -S

// 安装指定版本到dependenices
npm i xxxxx@2.0.0

// 安装最新到devDependenices
npm i xxxxx -D

bin

在介绍这个字段之前，先来举一个例子，
大家在新的电脑安装环境的时候，装那个node的时候，如果那个node安装后，没有配置PATH(环境变量地址)，在shell窗口输入node -v的时候，会报错说找不到，配了path后，其实就是把安装目录路径填进去，就可以

好了说完上面那个之后，回到这个bin，这个bin字段的作用其实也类似。
在我们的依赖包里，比如gulp，有这个bin字段配置

一旦有这个配置，那么其实我们装npm i gulp的时候，它会读取到这个字段，并且，会写一份文件到node_modules下的.bin文件夹（这个文件夹的由来就是这样）

然后呢，当我们npm run dev的时候，都知道，这句代码，其实跑的是scripts那里的

gulp dev-local，问题来了，gulp我没有全局安装，PATH我没有配，为什么这样跑不会报错！！！

答案就是，下面我引入大佬文章的一段解释

(1) 我们每次在运行 scripts 中的一个属性时候(npm run),实际系统都会自动新建一个shell(一般是Bash)，在这个shell里面执行指定的脚本命令。因此 凡是能在 shell 中允许的脚本，都可以写在npm scripts中。

(2) 特别的点，npm run 新建的 shell，会在当前目录的 node_modules/.bin 子目录加入到 PATH 变量，执行结束后，再将 PATH 变量恢复原样。也就是说，当前项目目录 node——modules/.bin 子目录中所有的脚本，都可以直接用脚本名称调用，不需要增加路径.（简单总结：通过 npm 启动的脚本，会默认把 node_modules/.bin 加到 PATH 环境变量中。）

比如本来我们应该要这样写的

"scripts": {
    "dev": "./node_modules/.bin/gulp  dev-local",
    "server": "gulp dev-local",
    "build": "gulp deploy && gulp dev-server"
  },

但是有这个机制在，就可以

"scripts": {
    "dev": "gulp dev-local",
    "server": "gulp dev-local",
    "build": "gulp deploy && gulp dev-server"
  },

大家也可以联想到webpack，webpack我没有全局安装，为什么用依赖的形式安装webpack却可以执行，一样的道理

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

未完待续
资料参考这位大佬
【Node进阶】你应该知道的NPM知识都在这！