一、初始化一个 package.json

npm init 手动配置

npm init -y 使用默认配置

1.1 各参数说明

• name 是项目的名称 (必须)
• version 是当前项目的版本号 (必须)
• description 是描述信息，很多时候是作为项目的基本描述 (发布到 npm 上的简介)；
• author 是作者相关信息（发布时用到）
• license 是开源协议（发布时用到）

private 属性：
private 属性记录当前的项目是否是私有的；
当值为 true 时，npm 是不能发布它的，这是防止私有项目或模块发布出去的方式；

main 入口文件，前端项目中如果使用 webpack 配置了入口文件则该配置失效。
main 主要作用是，当我们把包发布到 npm 上去的时候，别人下载后，引入的是哪个文件就是在这里指定的。
例如：包名称是 utils-format
main 配置是： “main”: “main.js”
则 const format = require(‘utils-format’) 引入的实际是 main.js

{
  "name": "npmdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private":true, //是否是私有的
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1.2 dependencies devDependencies 属性

dependencies
属性是指定无论开发环境还是生成环境都需要依赖的包；
通常是我们项目实际开发用到的一些库模块；

devDependencies
一些包在生成环境是不需要的，比如 webpack、babel 等；
这个时候我们会通过 npm install xxx --save-dev，将它安装到 devDependencies 属性中；

但是对于 前端 项目来说，意义并不大，因为 webpack 在打包的时候，从入口文件开始查找并生成依赖树，如果文件存在于依赖树中，那么它还是会被打包的。

真正的意义：
在我们开发服务器的时候，或者开发一个共享出去的包工具的时候(发布到 npm 上)，别人在安装你这个工具的时候，它则是根据这两个属性来的。

疑问：那么在生成环境如何保证不安装这些包呢？

生成环境不需要安装时，我们需要通过
npm install --production 来安装文件的依赖；

1.3 版本管理问题

我们在写 Vue 项目的时候，经常能够看到某些依赖的版本号前面有一个 ~ 或者 ^,那么这两个符号到底是什么意思呢？

npm 的包通常需要遵从 semver 版本规范：

semver 规范：semver (opens new window)
npm semver：npm sermver 规范 (opens new window)

semver 版本规范是 X.Y.Z：

• X 主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）；
• Y 次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
• Z 修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的 bug）；

我们这里解释一下 ^和~的区别：

• ^x.y.z：表示 x 是保持不变的，y 和 z 永远安装最新的版本；
• ~x.y.z：表示 x 和 y 保持不变的，z 永远安装最新的版本；

1.4 engines 属性

engines 中译为 引擎

engines 属性用于指定 Node 和 NPM 的版本号；
在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；

例：

 "engines": {
   "node": ">= 4.0.0",
   "npm": ">= 3.0.0"
 }

1.5 browserlist 属性

• 用于配置打包后的 JavaScript 浏览器的兼容情况，参考；
• 否则我们需要手动的添加 polyfills（补丁）来让支持某些语法；
• 也就是说它是为 webpack 等打包工具服务的一个属性

例：

"browserslist": [
	"> 1%",
	"last 2 versions",
	"not ie <= 8"
]

二、npm install 命令

安装 npm 包分两种情况：

• 全局安装（global install）： npm install yarn -g;
• 项目（局部）安装： npm install

全局安装

• 全局安装是直接将某个包安装到全局：
• 比如 yarn 的全局安装：
  • npm install yarn -g

但是很多人对全局安装有一些 误会 ：

• 通常使用 npm 全局安装的包都是一些工具包：yarn、webpack 等；
• 并不是类似于 axios、express、koa 等库文件；
• 所以全局安装了之后并不能让我们在所有的项目中使用 axios 等库；

那全局安装有什么用呢？
全局安装一般不会安装普通的包，如axios、express等，一般安装的都是工具包，比如yarn、webpack、gulp之类的，安装之后会生成对应的可执行文件的(.exe),并且会自动配置环境变量的。

这里推荐一手yarn，具体差别看: yarn 和 npm 的区别 (opens new window)
npm 或 yarn 切换为国内镜像可查看我的这边文章：Yarn 和 NPM 国内镜像（淘宝镜像） (opens new window)

2.1 安装开发和生产依赖

npm install axios
npm i axios

2.2 开发依赖

npm install webpack --save-dev
npm install webpack -D
npm i webpack –D

2.3 根据 package.json 中的依赖包

npm install

三、npm install 原理解析

很多朋友之前应该已经会了 npm install <package>，但是你是否思考过它的内部原理呢？

• 执行 npm install 它背后帮助我们完成了什么操作？
• 我们会发现还有一个成为 package-lock.json 的文件，它的作用是什么？
• 从 npm5 开始，npm 支持缓存策略（来自 yarn 的压力），缓存有什么作用呢？

这是 coderwhy 大神总结出来的一幅原理图：

四、package-lock.json

package-lock.json 文件解析：

• name：项目的名称；
• version：项目的版本；
• lockfileVersion：lock 文件的版本；
• requires：使用 requires 来管理子依赖；
• dependencies：项目的依赖
  • 当前项目依赖 axios，但是 axios 依赖 follow-redireacts；所以安装axios的时候，会连带安装follow-redireacts
• axios 中的属性如下：
  • version表示实际安装的 axios 的版本；
  • resolved用来记录下载的地址，registry 仓库中的位置；
  • requires记录当前模块的依赖；
  • integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

示例文件：

五、npm 其他常用命令

强制删除 node_modules 并重新安装:rm \-rf node_momdules && npm install（windows 不支持）

查看缓存路径：npm config get cache

卸载某个依赖包(效果都是一样的)：

• npm uninstall package
• npm uninstall package --save-dev
• npm uninstall package -D

强制重新 build

• npm rebuild

清除缓存

• npm cache clean

npm 的命令其实是非常多的：

• https://docs.npmjs.com/cli-documentation/cli
• 更多的命令，可以根据需要查阅官方文档

六、cnpm 工具

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。

查看 npm 镜像：npm config get registry

我们可以直接设置 npm 的镜像：npm config set registry https://registry.npm.taobao.org

但是对于大多数人来说（比如我），并不希望将 npm 镜像修改了：

• 第一，不太希望随意修改 npm 原本从官方下来包的渠道；
• 第二，担心某天淘宝的镜像挂了或者不维护了，又要改来改去；

这个时候，我们可以使用 cnpm，并且将 cnpm 设置为淘宝的镜像：
npm install \-g cnpm \--registry=https://registry.npm.taobao.org

七、npx 工具

npx 是 npm5.2 之后自带的一个命令。

npx 的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

我们以 webpack 为例：

• 全局安装的是 webpack5.1.3
• 项目安装的是 webpack3.6.0
• 如果我在终端执行 webpack --version 使用的是哪一个命令呢？
  • 显示结果会是 webpack 5.1.3，事实上使用的是全局的，为什么呢？
  • 原因非常简单，在当前目录下找不到 webpack 时(没有自动注册环境变量)，就会去全局找，并且执行命令；

如何解决这个问题呢？

使用项目（局部）的 webpack，常见的是两种方式：

方式一：明确查找到 node_module 下面的 webpack
在终端中使用如下命令（在项目根目录下）：./node_modules/.bin/webpack \--version

方式二：在 scripts 定义脚本，来执行 webpack；
修改 package.json 中的 scripts:npm run webpack

"scripts": {
	"webpack": "webpack --version"
}`

方式三：使用 npx
npx webpack \--version
npx 的原理非常简单，它会到当前目录的 node_modules/.bin 目录下查找对应的命令；