【包管理】NPM与Yarn

NPM与Yarn

  1. nvm
  2. npm
  3. yarn

1. NVM

NVM(Node Version Manager):Node版本管理

Windows上安装
地址
image.png

下载压缩包直接安装即可

常用命令

  • 查看

    //查看可安装的node版本
    nvm ls available
    //查看已经安装的node版本
    nvm ls
  • 安装与卸载

    //安装一个node
    nvm install [version]
    //卸载一个node
    nvm uninstall [version]
  • 切换

    //切换node版本
    nvm use [version]

2 NPM

NPM(Node Package Manager):Node包管理

  1. 包管理
  2. 上传包
  3. 脚本
  4. NRM
  5. NPX

2.1 包管理

全局安装

//全局安装与卸载 不指定version默认为当前最新版本
npm install(i) package[@verison] --global(-g)
npm uninstall package[@verison] -global(-g)

查看

//查看包可安装的版本
npm view package[@verison] versions
//查看安装的所有包
npm list(ls)
//查看已安装的一个包
npm list(ls) | grep package

本地安装

//初始化package.json
npm init -y
//安装至生产环境
npm i package[@verison] [--save]
//安装至开发环境
npm i package[@verison] --dev(-D)
//卸载不用添加额外的修饰符

更新版本
版本锁定

  • *:不锁定版本 - 更新三位
  • ^X.X.X:锁定第一位 - 更新后两位
  • ~X.X.X:锁定前两位 - 更新最后一位
  • X.X.X :锁定三位 - 指定版本

更新

//根据锁定查看可更新信息
npm outdated
//更新至锁定的最新版本
npm update
//安装指定版本
npm i package@version

清除缓存

npm cache clean --force
包第一次安装失败后再次安装也可能失败,需要清除缓存

2.2 上传包

创建一个包

//初始化
npm init
//index.js commonJS导出
function sayHello() {
    return 'Hello World'
}
module.exports.sayHello = sayHello
//其他文件夹下引入
let a = require('../test/index')
console.log(a.sayHello());
在package.json中配置name - 包名
version包版本

npm源

//查看源
npm config get registry
//切换源
npm config set registry url
npm淘宝镜像源:https://registry.npm.taobao.org/
npm源:https://registry.npmjs.org/

登录与上传

//登录 - 先在npm官网注册
npm aduser
//上传 - 可以在npm官网查看该包
npm publish
//卸载 - 从npm官网中删除
npm unpublish --force
//在其他文件在安装
npm i crofy-hello -D
//引入
let a = require('crofy-hello')
console.log(a.sayHello());

2.3 脚本

在package.json中的scripts选项中自定义脚本
编写脚本

//自定义指令
"scripts": {
    "hello1": "node script1.js"
    "hello2": "node script2.js"
}
//并行执行 - 先后不确定
npm run hello1 & npm run hello2
//串行执行 - 先后顺序确定
npm run hello1 && npm run hello2
使用starttestbuild等指令不用加run,npm直接加这些指令就可执行脚本

变量

  • $npm_package_ 可以获取package.json中的字段
  • env 可以列出所有环境变量

默认值

  • start:node server.js
  • install:node-gyp rebuild

cross-env
运行跨平台设置和使用环境变量的脚本

//安装
npm install --save-dev cross-env
//使用
 "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
NODE_ENV环境变量将由 cross-env 设置 打印 process.env.NODE_ENV === 'production'

2.4 NRM

NRM(NPM Registry Manager):npm源管理

//安装
npm i nrm -g
//查看可用源
nrm ls
//切换源
nrm use taobao
//测试速度
nrm test

2.5 NPX

NPX(NPM Package Extention):npm包扩展

可以直接使用,没有就全局安装
调用项目内部安装的模块

直接调用命令

//本地安装gulp用于测试功能 - 其他的也可以
npm i gulp -D
//查看gulp版本 - 由于gulp非全局安装没有gulp这个命令
npx gulp -v
不用脚本与读取具体可执行文件

临时安装
默认:当没有包但是用npx执行了其命令,npx会将其下载到一个临时空间,执行结束再删除

//强制使用本地模块,不进行下载操作
npx --no-install package
//忽略本地的同名模块,强制安装使用远程模块
npx --ignore-existong package

3 yarn

YARN(Yet Another Resource Negotiator):另一种资源协调者
安装

npm i yarn -g

yarn与npm对比

功能npmyarn
初始化npm init相同
安装npm i package --saveyarn add package
卸载npm uninstall package --saveyarn remove package
开发环境npm i package --save-devyarn add package --dev
全局安装npm i package -gyarn global add package
安装依赖npm iyarn
查看源npm config get registry相同
更新npm update [package] --saveyarn upgrade [package]
查看包npm list(ls) [-g]yarn [global] list
登录npm adduseryarn login
npm与yarn都可以安装指定版本,版本锁定的符号也是通用的,更新的原则一致
yarn包的安装的并行的,性能提升
npm安装包出行错误时会继续下载安装,可能会导致包的错误遗漏,项目出现问题难以排查
  • yarn整体的性能要优于npm
  • 可以主要使用yarn,部分操作使用npm

依赖分类

  • dependencies:应用依赖
  • devDependencies:开发依赖
  • peerDependencies:同等依赖

    用于指定当前包兼容的宿主版本,例如要写一个包的插件,指定兼容的版本
    后缀:--peer
  • optionalDependencies:可选依赖

    当一些依赖包安装失败时作为备选让项目能运行,会覆盖应用依赖中同名的依赖
    后缀:--optional
  • bundle[d]Dependencies:打包依赖

    一个包含依赖包名的数组对象
73 声望
6 粉丝
0 条评论
推荐阅读
【Vue2源码分析与实现】(一)变化侦测
(一)变化侦测该系列主要对Vue源码流程分析与简单实现,会省略源码中的一些细节初始化Object变化侦测Array变化侦测observe流程图1、初始化定义Vue构造函数向Vue原型混入操作方法,方便后期扩展在初始化函数中进...

怼怼1阅读 312

都2022 年了,你总不能还只会 npm i 吧? 🔥🔥🔥
在键帽与字符上横跳,于代码和程序中穿梭。一起面向快乐编程!大家好,我是荣顶,马上金三银四啦 ~ 这次给大家带来一篇 npm 命令相关的文章。目的在于查缺补漏,提升效率。npm 作为 node 包管理器,内置了非常多...

荣顶9阅读 2.5k

封面图
我从未整理过工具类,直到我要去面试(有npm包)
最近居家,回顾问题解解闷。今天汇总一下过去一年用的工具类(github开源仓库,请勇猛star),顺便发个npm包:haUtil数据处理关于浅拷贝和深拷贝更详细的分析请查看:清晰易懂!讲解JS赋值、浅拷贝和深拷贝浅拷贝...

一个互联网学徒8阅读 568

封面图
package.json中的字段详解(来自于官方文档)
main module browserexports //定义多个入口点(推荐使用),优先级比上面高。为esm和cjs提供,在引入exports之外的路径,会报错。 详情参考 [链接]

寒水寺一禅4阅读 708

不使用第三方库怎么实现【前端引导页】功能?
随着应用功能越来越多,繁多而详细的功能使用和说明文档,已经不能满足时代追求 快速 的需求,而 引导页(或分步引导) 本质就是 化繁为简,将核心功能以更简单、简短、明了的文字指引用户去使用对应的功能,特别...

熊的猫7阅读 694

封面图
使用 github actions 实现 npm 包自动化发布
鉴于我发布/即将发布的 npm 包越来越多,我决定用 github 的 actions 功能来实现 npm 包自动发布,过程也比较顺利,遂决定写一篇流水账记录下自动发布的实现,方便以后用到的时候翻阅。

MrBigShot1阅读 2.3k

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 770

73 声望
6 粉丝
宣传栏