包管理工具npm、yarn以及nvm简介及简单使用

在使用npm、yarn等包管理工具之前,我们首先了解一些基本的概念

模块(module)

通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块主模块

库(library,简称lib)

以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案

包(package)

包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等

在这里插入图片描述

版本号:主版本号.次版本号.补丁版本号

规范

  • 主版本号:仅当程序发生了重大变化时才会增长,如新增了重要功能、新增了大量的API、技术架构发生了重大变化
  • 次版本号:仅当程序发生了一些小变化时才会增长,如新增了一些小功能、新增了一些辅助型的API
  • 补丁版本号:仅当解决了一些 bug 或 进行了一些局部优化时更新,如修复了某个函数的 bug、提升了某个函数的运行效率

常见语义版本符号书写含义(了解即可):

符号描述示例示例描述
>大于某个版本>1.2.1大于1.2.1版本
>=大于等于某个版本>=1.2.1大于等于1.2.1版本
<小于某个版本<1.2.1小于1.2.1版本
<=小于等于某个版本<=1.2.1小于等于1.2.1版本
-介于两个版本之间1.2.1 - 1.4.5介于1.2.1和1.4.5之间
x不固定的版本号1.3.x只要保证主版本号是1,次版本号是3即可
~补丁版本号可增~1.3.4保证主版本号是1,次版本号是3,补丁版本号大于等于4
^此版本和补丁版本可增^1.3.4保证主版本号是1,次版本号可以大于等于3,补丁版本号可以大于等于4
*最新版本*始终安装最新版本

下面才是正题!

npm

npm 全称为 node package manager,即 node 包管理器,它运行在 node 环境中,让开发者可以用简单的方式完成包的查找、安装、更新、卸载、上传等操作。几乎可以这样认为,前端所有的包管理器都是基于 npm 的,目前,npm 即是一个包管理器,也是其他包管理的基石。

官网:https://www.npmjs.com/

这个网址非常常用,因为以后的常用插件都是在官网中查找,查看使用方法

下载安装npm

因为node中自带npm,所以我们直接下载安装nodejs即可

npm的安装设置

npm下载完成后需要将registry改为国内地址,因为 npm 的官方 registry 服务器位于国外,可能受网速影响导致下载缓慢或失败。目前,淘宝提供了国内的 registry 地址,先设置到该地址。

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

设置完成后下面命令查看

npm config get registry 

npm 安装一个包,分为两种安装方式

1、本地安装

npm install 包名
//会将包安装到生产环境,下面解释

注意:

  • 本地安装的包出现在当前目录下的node_modules目录中
  • node_modules目录会变得异常庞大,目录下的内容不适合直接传输到生产环境,因此通常使用.gitignore文件忽略该目录中的内容。
  • 如果本地安装的包带有 CLInpm 会将它的 CLI 脚本文件放置到node_modules/.bin下,使用命令npx 命令名即可调用

2、全局安装

npm install --global 包名

注意:

  • 全局安装的包放置在一个特殊的全局目录,该目录可以通过命令下面命令查看
npm config get prefix
  • 全局安装的包并非所有工程可用,它仅提供全局的 CLI 工具。绝大情况下不需要全局安装包

package.json:配置文件

npm 将每个使用 npm 的工程本身都看作是一个包,包的信息是通过package.json配置文件来描述的。

可以手动创建该文件,而更多的时候,是通过命令创建的

npm init
//npm init 命令生成的配置文件
{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

配置文件中可以描述大量的信息,包括:

name: 包的名称,该名称必须是**英文单词字符**,支持连接符
version: 版本号
description: 包的描述
homepage: 官网地址
author: 包的作者,必须是有效的 npm 账户名,书写规范是account <mail>,不正确的账号和邮箱可能导致发布包时失败。例如 zhangsan<zhangsan@gmail.com>,
repository: {//包的仓储地址,通常指 git 或 svn 的地址,它是一个对象
    type: 仓储类型,git 或 svn
   	url: 地址
}
main: 包的入口文件,使用包的人默认从该入口文件导入包的内容 
keywords:  搜索关键字,发布包后,可以通过该数组中的关键字搜索到包

通常情况下,都是一路回车,或者可以使用命令自动默认填充

npm init --yes
npm init -y

package-lock.json:锁定具体版本

npm 在安装包的时候,会自动生成一个 package-lock.json 文件,该文件记录了安装包时的确切依赖关系。当移植工程时,如果移植了 package-lock.json 文件,恢复安装时,会按照 package-lock.json 文件中的确切依赖进行安装,最大限度的避免了差异。

生产和开发依赖关系

package.json文件最重要的作用,是记录当前工程的依赖

  • dependencies:生产环境的依赖包
  • devDependencies:仅开发环境的依赖包

配置好依赖后,使用下面的命令即可安装依赖

  • 本地安装所有依赖 安装所有依赖 dependencies + devDependencies
npm install
npm i
  • 仅安装生产环境的依赖 dependencies
npm install --production

为了更加方便的添加依赖,npm支持在使用install命令时,加入一些额外的参数,用于将安装的依赖包保存到package.json文件中。涉及的命令如下

  • 安装依赖到生产环境
npm i 包名
npm i --save 包名
npm i -S 包名
  • 安装依赖到开发环境
npm i --save-dev 包名
npm i -D 包名

补充:如果同一个工程下的两个包A、B同时依赖不同版本的包C,如图所示:

在这里插入图片描述

面对这种情况,在 node_modules 目录中,不会使用扁平的目录结构,而会形成嵌套的目录,如下图:

├── node_modules
│   ├── a 
│   │   ├── node_modules
│   │   │   ├── c
│   │   │   |   |—— c包的文件
│   │   │── a包的文件     
│   ├── b 
│   │   ├── node_modules
│   │   │   ├── c
│   │   │   |   |—— c包的文件
│   │   │── b包的文件           

package.json中的npm脚本(npm scripts)

npm 非常贴心的支持了脚本,只需要在 package.json 中配置 scripts 字段,即可配置各种脚本名称。之后,我们就可以运行简单的指令来完成各种操作了。运行方式是:

npm run 脚本名称
npm run build //运行webpack 进行打包
//------package.json文件内容-------
{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx webpack" //脚本 npx可以省略
  },
  "author": "",
  "license": "ISC"
}

注意:npm简化了以下三个的脚本运行,不需要run指令(npm start|npm stop|npm test

  • start:一般是运行项目
  • stop:一般是停止项目
  • test:一般是测试项目

补充

  • 脚本中可以省略npx
  • start脚本有默认值:node server.js

运行环境配置

有的时候,我们可能需要在 node 代码中根据不同的环境(生产环境、开发环境、测试环境)做出不同的处理。

那么如何让node知道自己当前处于什么环境是非常重要的。

node中有一个全局变量 global (可以类比浏览器环境的window),该变量是一个对象,对象中的所有属性均可以直接使用。global有一个属性是process,该属性是一个对象,包含了当前运行node程序的计算机的很多信息,其中有一个信息是env,是一个对象,包含了计算机中所有的系统变量。我们通过系统变量 NODE_ENV 的值,来判定当前处于一个什么环境

直接在运行命令中添加

NODE_ENV=development|production|test

在package.json文件中配置

{
    "name": "npm-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "cross-env NODE_ENV=development node index.js",
        "build": "cross-env NODE_ENV=production node index.js",
        "test": "cross-env NODE_ENV=test node index.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "cross-env": "^6.0.3"
    }
}

为了避免不同系统的设置方式的差异,可以使用第三方库 cross-env 对环境变量进行设置

在node中读取package.json

有的时候,我们可能在 package.json 中配置一些自定义的字段,这些字段需要在node中读取

在node 中,可以直接导入一个json格式的文件,它会自动将其转换为js对象

/*----------------index.js文件内容------------*/
//读取package.json文件中的版本号
var config = require("./package.json")
console.log(config.version) //"1.0.0"
console.log(config.a) //123

/*-----------package.json文件内容--------------*/
{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "a":123
}

常用的npm命令

总结上面的命令,以及上面没有的命令,都是干货!

1、初始化

  • 初始化。很多人不知道[]是什么意思,它是表示可选选项
npm init [-y|-yes]

2、安装包

  • 全局安装包
npm install --global package-name
## global aliases: g
## install aliases: i
## global可以用别名g代替,install可以用别名i代替
  • 安装package.json中的所有依赖 dependencies + devDependencies
npm install
  • 安装package.json中的生产环境依赖 dependencies
npm install --production
  • 安装依赖到生产环境
npm install package-name
npm install --save package-name
## --save aliases: -S
## package-name:你要安装的包名
  • 安装依赖到开发环境
npm install --save-dev package-name
## --save-dev aliases: -D
  • 精确安装最新版本
npm install --save-exact package-name
## --save-exact aliases: -E
  • 安装指定版本
npm install 包名@版本号

3、查询

  • 查询包安装路径。[]的含义是可选信息
npm root [-g]
  • 查看包信息
npm view 包名 [子信息]
## view aliases:v info show
  • 查询安装包
npm list [-g] [--depth=依赖深度]
## list aliases: ls  la  ll

4、更新

  • 检查需要更新的包
npm outdated
  • 更新包
npm update [-g] [包名]
## update aliases(别名):up、upgrade
  • 更新最新版的npm
npm install -g npm
npm unpdate -g npm

5、卸载包

npm uninstall [-g] 包名
## uninstall aliases(别名): remove, rm, r, un, unlink

6、npm 配置

注意:npm有两个配置文件,一个是用户配置,一个是系统配置。当两个文件的配置项有冲突的时候,用户配置会覆盖系统配置

  • 查看全局安装包的路径
npm config get prefix
  • 查询目前生效的各种配置
npm config ls [-l] [--json]
  • 获取某个配置项
npm config get 配置项
  • 设置某个配置项
npm config set 配置项=
  • 移除某个配置项
npm config delete 配置项

补充知识:包的引用

nodejsnpm 支持非常良好。当使用 nodejs 导入模块时,如果模块路径不是以 ./../ 开头,则 nodejs 会认为导入的模块来自于 node_modules 目录,例如:

const _ = require("lodash");

它首先会从当前目录的以下位置寻找文件

node_modules/lodash.js
node_modules/lodash/入口文件

若当前目录没有这样的文件,则会回溯到上级目录按照同样的方式查找。如果到顶级目录都无法找到文件,则抛出错误。

当找到该文件后会按照以下方式寻找入口文件:

  1. 查看导入包的package.json文件,读取main字段作为入口文件
  2. 若不包含main字段,则使用index.js作为入口文件

yarn

yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,它仍然使用 npm 的registry,不过提供了全新 CLI 来对包进行管理

yarn 官网:https://www.yarnpkg.com/zh-Hans/

在过去npm具有很多缺点,比如依赖目录嵌套太深遍历问题,npm是串行下载的下载速度慢等等问题,于是就有了yarn,yarn具有以下优点:

- 使用扁平的目录结构
- 并行下载
- 使用本地缓存
- 控制台仅输出关键信息
- 使用yanr-lock文件记录确切依赖
- 增加了某些功能强大的命令
- 让既有的命令更加语义化
- 本地安装的CLI工具可以使用 yarn 直接启动
- 将全局安装的目录当作一个普通的工程,生成package.json文件,便于全局安装移植

npm6 之后,可以说npm已经和yarn非常接近,甚至没有差距了。很多新的项目,又重新从yarn转回到npm。

下载安装yarn:前提是你要先下载nodejs和npm

npm install -g yarn

查看yarn版本

yarn --version

yarn 的常用命令

yarn的使用和npm几乎一致。

1、初始化

  • 初始化package.json文件
yarn init [--yes/-y] 

2、安装

  • 安装package.json中的所有依赖(开发和生产依赖)
yarn install []
  • 安装package.json中的生产依赖
yarn install --production
#  production aliases: prod
  • 安装指定包到生产依赖(global是否全局安装)
yarn [global] add package-name
  • 安装指定包到开发依赖
yarn add package-name --dev

3、查询

  • 查看bin目录
yarn [global] bin
  • 查询包信息
yarn info 包名 [子字段]
  • 查看已安装的依赖
yarn [global] list [--depth=依赖深度]

注意:yarn的list命令和npm的list不同,yarn输出的信息更加丰富,包括顶级目录结构、每个包的依赖版本号

4、更新

  • 列举需要更新的包
yarn outdated
  • 更新包
yarn [global] upgrade [包名]

5、卸载

  • 卸载包
yarn remove 包名

6、脚本和本地CLI

  • 运行脚本:start、stop、test可以省略run
yarn run 脚本名
  • 运行本地安装的CLI
yarn run CLI名

yarn 中特别的指令

1、yarn check:可以验证package.json文件的依赖记录和lock文件是否一致。防止篡改
2、yarn audit:可以检查本地安装的包有哪些已知漏洞,以表格的形式列出,漏洞级别分为以下几种:
  • INFO:信息级别
  • LOW: 低级别
  • MODERATE:中级别
  • HIGH:高级别
  • CRITICAL:关键级别
3、yarn why 包名:可以在控制台打印出为什么安装了这个包,哪些包会用到它
4、yarn create xxx:使用脚手架搭建一个工程。例如:
yarn create react-app my-app
# 等同于下面的两条命令
yarn global add create-react-app
create-react-app my-app

cnpm

为解决国内用户连接npm registry缓慢的问题,淘宝搭建了自己的registry,即淘宝npm镜像源。

官网地址:https://npm.taobao.org/

但是现在并没有什么卵用了,因为npm已经支持修改registry了

nvm

nvm并非包管理器,它是用于管理多个node版本的工具。在实际的开发中,可能会出现多个项目分别使用的是不同的node版本,在这种场景下,管理不同的node版本就显得尤为重要。nvm就是用于切换版本的一个工具

下载和安装

最新版下载地址:https://github.com/coreybutler/nvm-windows/releases

下载nvm-setup.zip后,直接安装。以下命令判断是否安装成功

nvm -v

nvm常用命令

  • 查看node版本号
nvm list
# node版本号的星号是当前正在使用的node
  • 使用指定版本号的node
nvm use <version>
  • 下载指定版本的node
nvm install <version>
  • 卸载指定版本的node
nvm uninstall <version>
  • 为了加快下载速度,建议设置淘宝镜像

node淘宝镜像:https://npm.taobao.org/mirrors/node/
npm淘宝镜像:https://npm.taobao.org/mirrors/npm/

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七钥

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值