Node包管理工具详解

一、初始化一个 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
npm semver：npm sermver 规范

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的区别
npm或yarn切换为国内镜像可查看我的这边文章：Yarn 和 NPM 国内镜像（淘宝镜像）

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目录下查找对应的命令；