ES6之npm包管理器、cnpm包管理器yarn包管理器包管理器对比

目录

包管理器

提高npm安装速度

方案一：修改npm仓库地址为淘宝仓库地址

方案二：我们可以使用淘宝的npm镜像cnpm，cnpm的使用与npm使用非常类似。不过在使用之前要先安装cnpm。

方案三：我们可以使用淘宝yarn工具，yarn的使用与npm使用类似。不过在使用之前要先安装yarn。

npm包管理器

npm install -g的区别

npm install -S -D 的区别

cnpm包管理器

yarn包管理器

包管理器对比

---

包管理器

NPM 是 Node.js 标准的软件包管理器。在 2017 年 1 月时，npm 仓库中就已有超过 350000 个软件包，这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。它起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具。

NPM是Javascript开发者能够更方便的分享和复用以及更新代码的工具，被复用的代码被称为包或者模块，一个模块中包含了一到多个js文件。在模块中一般还会包含一个package.json的文件，该文件中包含了该模块的配置信息。该文件是个json文件，其配置信息如下：

name 模块名称

version 模块版本

description 描述信息

main 指定模块入口文件

type 当type值为module的时候，支持es模块化

scripts 脚本，使用' npm run 脚本名'可以调用

dependencies 依赖关系

devDependencies 环境依赖或测试依赖

npm工具在安装了nodejs软件后就安装好了。所以如果没有安装nodejs软件，需要先安装nodejs软件。nodejs软件下载地址：下载 | Node.js 中文网

Tip：cnpm 是 npm 的一个替代选择，yarn 也是 npm 的一个替代选择。

dependencies 是需要发布到生产环境的. devDependencies 里面的插件只用于开发环境，不用于生产环境.

dependencies 的理解： 我们在项目中用到了element-ui或者axios，在生产环境中运行项目，当然也需要element-ui或者axios，所以我们把element-ui或者axios安装到dependencies中。

devDependencies 的理解： 我们在开发一个前端项目的时候，需要使用到webpack或者gulp来构建我们的开发和本地运行环境，这时我们就要安装到devDependencies 里。webpack或者gulp是用来打包压缩代码的工具，在项目实际运行的时候用不到，所以把webpack或者gulp放到devDependencies 中就行了。

提高npm安装速度

使用过程中，我们会发现，npm安装依赖的速度比较慢，以下两种方式可以提升安装速度。

 

方案一：修改npm仓库地址为淘宝仓库地址

# 修改npm下载的仓库地址
npm config set registry http://registry.npm.taobao.org/

# 改回原来的地址
npm config set registry https://registry.npmjs.org/

# 查看是否修改成功
npm config get registry

 

方案二：我们可以使用淘宝的npm镜像cnpm，cnpm的使用与npm使用非常类似。不过在使用之前要先安装cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

方案三：我们可以使用淘宝yarn工具，yarn的使用与npm使用类似。不过在使用之前要先安装yarn。

npm install -g yarn --registry=https://registry.npm.taobao.org
MAC下下载可能会提示错误，一般是提升权限问题，命令前加个su

修改npm权限 执行npm的时候有时会遇到权限不足的情况，可以通过以下方式进行修正。

npm config get prefix
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

npm包管理器

通过npm可以为当前项目安装依赖模块，更新依赖模块，删除依赖模块。

创建一个app目录，终端进入到该app目录，使用如下命令初始化项目，会在项目根目录下会创建packge.json文件

# 以下命令会一步一步创建项目
npm init

# 以下命令会快速创建项目
npm init -y

 

这边一路回车到底

 

 

之后项目就创建完毕了。

 默认已有npm，重新安装npm命令，使用以下命令来更新npm

npm install npm@latest -g

• node_modules 在VScode中隐藏，不让vscode检索node_modules内部的文件：在vscode设置中找到exclude，添加模式**/node_modules

• 安装单个模块依赖

• # 不带-g的为本地安装
  $ npm install <module_name>
  # 如下命令带-g是全局下载依赖
  $ npm install -g <module_name>
  $ npm install --global <module_name>
  # 如下命令会在项目内下载依赖，并将安装记录保存在package.json的dependencies内，安装生产阶段的依赖
  $ npm install -S <module_name>
  $ npm install --save <module_name>
  # 如下命令会在项目内下载依赖，并将安装记录保存在package.json的devDependencies内，安装产品阶段的依赖
  $ npm install -D <module_name>
  $ npm install --save-dev <module_name>

• 安装项目全部依赖模块

  npm install

• 更新依赖模块

  npm update <module_name>

• 删除依赖模块

  npm uninstall <module_name>

 

 

npm install -g的区别

全局安装，安装到全局，在任何目录下都可以使用你安装的这个插件 项目安装，安装到当前项目的文件夹内，只能在项目目录内使用

项目开发思想：

        工具全局安装

        项目依赖局部安装

比如项目中要用jQuery，安装第三方包jquery，

cd 项目目录 cnpm install jquery
cnpm install echarts

在项目目录下安装了jquery包，局部安装，node_modules目录下

cnpm install -g jquery

无论在哪个目录下执行安装的代码，都是全局安装

A)npm install本地安装:

（1）将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。

（2）可以通过 require() 来引入本地安装的包。

B)npm install -g全局安装:

(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。

(2)可以直接在命令行里使用。

• npm install -S -D 的区别

npm install module_name -S 、 --save写入dependencies

npm install module_name -D 、 --save-dev写入devDependencies

A）npm install --save (

1)会把msbuild包安装到node_modules目录中

(2)会在package.json的dependencies属性下添加msbuild

(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中

(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中

B）npm install --save-dev

(1)会把msbuild包安装到node_modules目录中

(2)会在package.json的devDependencies属性下添加msbuild

(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中

(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中 

cnpm包管理器

使用方式和npm包管理器一致。

• 全局安装cnpm

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 测试是否安装成功

  cnpm -v

  

•  初始化项目，在项目根目录下会创建packge.json文件

  # 以下命令会一步一步创建项目，会让用户输入一些项目信息，参考之前package.json里的信息
  $ cnpm init
  # 以下命令会快速创建项目
  $ cnpm init -y

• 安装单个模块依赖

  $ cnpm install <module_name>
  # 如下命令全局下载依赖
  $ cnpm install -g <module_name>
  $ cnpm install --global <module_name>
  # 如下命令会在项目内下载依赖，并将安装记录保存在package.json的dependencies内，安装生产阶段的依赖
  $ cnpm install -S <module_name>
  $ cnpm install --save <module_name>
  # 如下命令会在项目内下载依赖，并将安装记录保存在package.json的devDependencies内，安装产品阶段的依赖
  $ cnpm install -D <module_name>
  $ cnpm install --save-dev <module_name>

• 安装项目全部依赖模块

  x $ cnpm install

• 更新依赖模块

  $$ cnpm update <module_name>

• 删除依赖模块

  $ cnpm uninstall <module_name>

yarn包管理器

yarn包管理器与npm类似，作用相同，命令有所不同。

yarn中文文档 Yarn 中文文档

全局安装yarn

$ npm install -g yarn --registry=https://registry.npm.taobao.org

测试是否安装成功

$ yarn -v

 初始化项目，在项目根目录下会创建packge.json文件

# 以下命令会一步一步创建项目
$ yarn init
# 以下命令会快速创建项目
$ yarn init -y

安装单个模块依赖

# 如下命令会在项目内下载依赖，并将安装记录保存在package.json的dependencies内，安装生产阶段的依赖
$ yarn add <module_name>
# 如下命令会在项目内下载依赖，并将安装记录保存在package.json的devDependencies内，安装产品阶段的依赖
$ yarn add <module_name> --dev

安装项目全部依赖模块

$ yarn

更新依赖模块

$ yarn upgrade <module_name>

删除依赖模块

$ yarn remove <module_name>

包管理器对比

用途	npm	cnpm	yarn
初始化项目	npm init	cnpm init	yarn init
安装项目的所有依赖	npm install	cnpm install	yarn
安装xxx依赖到产品阶段	npm install xxx --save	cnpm install xxx --save	yarn add xxx
安装xxx依赖到开发阶段	npm install xxx --save-dev	cnpm install xxx --save-dev	yarn add xxx --dev
移除xxx依赖	npm uninstall xxx --save	cnpm uninstall xxx --save	yarn remove xxx
更新项目依赖包	npm update --save	cnpm update --save	yarn upgrade