前言

感觉这块也是一个知识点，尽管我当初还不能零碎的用 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 常识都在这！