npm包管理、cnpm、yarn、cyarn的使用

总结

包管理工具

一 、包管理工具 有四种：npm、cnpm、yarn、cyarn

npm

二 、npm

• 2.1 如果是针对于局部某一个项目的使用，首先第一件事必然是:npm init / npm init -y(yes)

  注意事项: 初始化的目录名称最好不要叫npm/node/cnpm/yarn/cyarn/中文目录
  

• 2.2 下一件事基本上都是做包的安装：
  npm i(install) 包名 附加参数

  • 局部包的安装：
    附加参数：
    -D(--save-dev):开发环境:只有在书写代码的情况之下使用这个包带来的结果，而这个结果形成了就不会在发生变化上传到git仓库之后，其他程序员使用这个项目中的文件也不会提示需要安装这个包例如：webpack、webpack-cli…
    -S(--save):生产环境（默认）：不光在写代码的时候需要这个包的支持，将来将项目上传到git仓库之后，其他程序员下载项目也是需要这个包的支持，文件才能运行，那么这个包在安装的时候就需要定义在生产环境之中

  • 全局包的安装：
    -g(global):只要是全局安装的包，是不受终端运行路径的影响，也就是说任何路径都可以
    可以通过:npm root -g这个命令来查找所有安装的全局的包的路径
    有一些全局包是基本固定的：cnpm、yarn、webpack、nodemon

• 2.3 npm i(install):安装package.json中的所有的依赖包（当其他人将项目放到了gitee仓库之后，自己克隆下载项目首先需要这个文件的依赖包，那么咱们也没有必要一个一个的下载，统一下载）

• 2.4 npm i 包名@版本：安装这个包中的特定版本，否则不加版本号则是安装这个包的最新版本

• 2.5npm remove 包名：针对于局部包的移除
  npm remove 包名 -g 删除全局安装的包

• 2.6 通过配置package.json文件中的scripts启动服务命令来运行程序文件
  语法：npm run 别名
  特殊别名：start 只需要:npm start
  非start的别名，必须语法写全了：npm run xxx
  后期通过webpack打包工具，项目运行的入口只有一个文件，所以咱们配置运行程序的别名也只有一句话，
  不会运行哪一个文件就配置一条!!!

• 2.7 配置淘宝镜像：npm config set registry https://registry.npmmirror.com/
  - 设置官方镜像源：npm config set registry https://registry.npmjs.org
  - 查看镜像使用状态：npm config get registry
  如果返回https://registry.npmmirror.com/，说明配置的是淘宝镜像。
  如果返回https://registry.npmjs.org/，说明配置的是官方镜像。

• npm 清除缓存 npm cache clean

• npm view 包名称 versions
  列入：npm view vue-lazyload versions

nodemon 可以用来启动server服务，类似于热更新 （nodemon server.js）

cnpm

三、cnpm
cnpm只是国内的淘宝镜像的包

• 安装： npm i cnpm -g --registry=https://registry.npm.taobao.org
• 使用：npm的使用和cnpm使用是一致的
  初始化package.json文件：cnpm init / cnpm init -y
  安装包：cnpm i 包名 -D / cnpm i 包名 -S(省略) / cnpm i 包名 -g
  安装特定版本的包：cnpm i 包名@版本
  移出局部包：cnpm remove 包名

yarn

四 、yarn

• 初始化：yarn init / yarn init -y

• 安装包：

  • 局部包：
    生产环境中安装：yarn add 包名
    开发环境中安装：yarn add 包名 --dev

  • 全局包：yarn global add 包名
    如果想要查看全局包的安装位置：yarn global dir

• 安装特定版本：yarn add 包名@版本号
  注意：安装特定版本的时候一定要将版本号写全，但是使用npm安装特定版本的时候不需要

• 移除包：
  局部包：yarn remove 包名
  全举报：yarn global remove 包名

• 查看安装哪一些包的列表明细：yarn list

• 安装依赖：yarn(这个命令等同于npm i / cnpm i)

• 配置淘宝镜像：yarn config set registry https://registry.npm.taobao.org

	yarn --version 查看版本号
	
	yarn init 生成package.json
	
	yarn global add 包名（如：axios）全局安装包
	
	yarn global dir 查看全局安装的位置
	
	​ 全局安装路径 C:\Users\你的用户名\AppData\Local\Yarn\bin
	
	yarn global remove 包名（如：axios） 全局删除包
	
	yarn add 包名（如：axios） 局部安装包生产环境包
	
	yarn add 包名（如：axios）--dev (相当于npm中的–save-dev)局部安装开发环境包
	
	yarn remove 包名（如：axios）移除局部安装的包
	
	yarn list 列出已经安装的包名 用的很少
	
	yarn 安装package.json中的所有依赖
	
	yarn add 包名@版本号 安装指定版本的包（版本号必须写全）

cyarn

五 、cyarn

安装以及配置淘宝镜像：npm install cyarn -g --registry "https://registry.npm.taobao.org"

cyarn的使用和yarn是一致的

NPM

一、npm的介绍

全称：Node Package Manager，Node的包管理器，也是一个应用程序。

二、包是什么

Node.js的包基本遵循CommonJS规范，将一组相关的模块组合在一起，形成一个完整的工具

三、作用

通过NPM可以对Node的工具包进行搜索、下载、安装、删除、上传，

借助别人写好的包，可以让我们的开发更加方便。

四、安装

安装完nodejs之后会自动安装npm

五、常用命令

5.1 查看 npm 的版本

npm -v 

5.2 初始化

npm init：用来创建package.json包的配置文件，注意包名不能随便起

npm init -y： yes的意思，在init的时候省去了敲回车的步骤

运行之后就会在当前目录中创建package.json文件

{
  "name": "test",      #包的名称
  "version": "1.0.0",  #包的版本
  "description": "",   #包的描述
  "main": "hello.js",  #包的入口文件
  "scripts": {         #脚本配置
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",        #作者
  "license": "ISC",    #版权声明
}

注意生成的包名不能使用中文，大写~~~，也不能使用npm作为包的名字。

npm init命令一般在项目的根目录下运行，与git命令执行位置是相同的。

5.3 搜索包

一般在搜索工具包的时候，会到https://npmjs.org搜索

5.4 安装工具包

将需要的包从npm的官网下载到我们自己的电脑中，功能是用来安装对应的模块。

npm i(install) 包名 附加参数

附加参数：-D(–save-dev) / -S(–save)

–save: 将npm i 后面安装的包安装到了生产环境之中

–save-dev:将npm i 后面安装的包安装到了开发环境之中

生产环境：无论是在写代码的期间，还是最终上线到git仓库共享给其他成员之后，项目之中的文件仍然需要有一些包的功能支持，则这个包当初下载的时候就必须是生产环境

开发环境：只有在写代码的期间使用这个包，这个包运行之后得到的结果是一个固定的结果，且不会在发生改变，不会影响到其他成员使用这个项目，则这个包在下载的时候就是开发环境。

npm install jquery
npm i jquery

# 安装并在 package.json 中保存包的信息(dependencies 属性) 需要发布到生产环境的
npm install jquery --save
npm install jquery -S

# 安装并在 package.json 中保存包的信息(devDependencies 属性) 只用于开发环境，不用于生产环境
npm install babel --save-dev
npm install babel -D

6版本的npm，安装包会自动保存在Dependencies中，可以不用写--save了

安装模块之后会产生package-lock.json文件和node_module目录

1.package-lock.json:是一个锁文件，用来固定包的版本号的

2.node_modules：是一个文件夹，用来存放npm下载的工具包代码

5.5 全局安装

npm i 模块名 -g(global) 全局安装

npm install less -g   # 运行：lessc less的文件名 要生成的css文件名
npm install nodemon -g 

npm remove  less  -g # 包的移除

全局安装一般用于安装全局工具，是可提供直接执行的命令，我们通过对一些工具类的包采用这种方式安装

如cnpm、yarn、webpack、gulp、nodemon等

全局命令的安装位置：C:\Program Files\nodejs\node_global\node_modules

全局安装命令在任何的命令行下，都可以执行（ 不受安装位置的影响）

npm root -g 查看全局安装的包的位置

5.6 全局包和项目包的区别

一个经验法则：

• 要用到该包的命令执行任务的就需要全局安装。
• 要通过require引入使用的就需要本地安装-项目包。

5.7 安装依赖

根据 package.json 中的依赖声明， 安装工具包

适合于已有的package.json在某一个目录中进行安装里面的依赖包

主要是团队开发时的使用：

1. 从仓库中拉取仓库代码
2. 运行 npm install 安装相关依赖
3. 运行项目，继续开发

npm i 
npm install
npm install 包名@版本

案例：将本地项目推送到git远程仓库

5.8 移除包

npm remove 模块名 用来移除某一个包

例如：npm remove jquery

5.9 运行package.json文件中的script属性名

npm run 属性名(可以自定义)

用来运行package.json文件中的scripts的属性名，用来执行属性值，方便运行js文件

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "node server.js"  # 设置自定义的运行js文件的属性名
  },
  "author": "",
  "license": "ISC"
}

环境变量

1. 此电脑 -> 右键属性
2. 高级系统设置
3. 点击环境变量
4. 双击 Path 变量值
5. 新建 -> 添加文件夹路径
6. 一路确定

常见错误

邮箱没有被激活

npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/hello_test_npm - You do not have permission to publish "xxx". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

CNPM

一、介绍

cnpm 是淘宝对国外 npm 服务器的一个完整镜像版本，也就是淘宝 npm 镜像，网站地址http://npm.taobao.org/

二、安装

安装配置方式有两种

• npm install -g cnpm --registry=https://registry.npm.taobao.org
• alias cnpm=“npm --registry=https://registry.npm.taobao.org
  –cache=$HOME/.npm/.cache/cnpm--disturl=https://npm.taobao.org/dist--userconfig=$HOME/.cnpmrc” (只能在Linux下使用)

三、使用

配置完成后，就可以使用 cnpm 命令来管理包，使用方法跟 npm 一样

cnpm install lodash  # 安装包
cnpm remove  lodash  # 移除包

注意：

默认情况下使用cnpm安装的包信息不会记录在package.json中的Dependencies中,

所以，咱们需要安装的时候添加-S选项

3.1 npm 配置淘宝镜像地址

在任何的位置中运行均可，只需要执行一次

相当于npm下载的地址使用的是淘宝的镜像地址，下载包的速度被提升了

//淘宝镜像
npm config set registry https://registry.npm.taobao.org
//官方镜像   
npm config set registry https://registry.npmjs.org/

在发布工具的时候, 一定要将仓库地址, 修改为官方的地址

四、Yarn

4.1 介绍

yarn 是 Facebook 开源的新的包管理器，可以用来代替 npm。

4.2 特点

yarn 相比于 npm 有几个特点

• 本地缓存。安装过的包下次不会进行远程安装
• 并行下载。一次下载多个包，而 npm 是串行下载
• 精准的版本控制。保证每次安装跟上次都是一样的

4.3 安装

4.3.1 yarn 安装

只需要一行命令即可安装 yarn

npm install yarn -g

使用yarn全局安装命令是会失效的，假设是lessc这种方式是默认不会将Path的环境变量设置上，所以无法在其他位

置上使用less，如果想要使用则需要手动配置lessc所在的目录，这也是使用这种方式的缺点，当然优点就是方便。

4.3.2 msi 安装包安装 【推荐】

https://classic.yarnpkg.com/en/docs/install#windows-stable

注意：安装之后重启命令行工具!!!

4.4 相关命令

1. yarn --version

2. yarn init //生成package.json

3. yarn global add package (全局安装)

4. yarn global dir 查看全局安装的位置

​ 全局安装路径 C:\Users\你的用户名\AppData\Local\Yarn\bin

4. yarn global remove less (全局删除)

5. yarn add package (局部安装)

6. yarn add package --dev (相当于npm中的–save-dev)

7. yarn remove package 移除

8. yarn list //列出已经安装的包名 用的很少

9. yarn // 安装package.json中的所有依赖

npm 5 引入离线缓存，提高了安装速度，也引入了 package-lock.json 文件增强了版本控制

yarn 修改仓库地址

yarn config set registry https://registry.npm.taobao.org

五、CYarn

跟 npm 与 cnpm 的关系一样，可以为 yarn 设置国内的淘宝镜像，提升安装的速度

经典的面试题：你所知道的所有的包管理工具：npm、cnpm、yarn、cyarn

npm install cyarn -g --registry "https://registry.npm.taobao.org"

配置后，只需将yarn改为cyarn使用即可

六、附录

安装指定版本的工具包

yarn add jquery@1.11.2

npm 清除缓存

npm cache clean