百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

一文搞定nodeJS相关的nvm、npm、nrm、yarn、npx等

wxin55 2024-11-08 14:38 10 浏览 0 评论

node、npm等相关概念

node 和 npm 相关的名词很多,比较容易混淆。

下面对这些名词做个统一梳理

  • node:一个基于 Chrome V8 引擎的 JavaScript 运行时;提供了 JavaScript 的运行环境。可以直接到 node 官网下载安装
  • nvm:node.js 版本管理工具;不同项目可能需要不同版本的 node;可以使用 nvm 来管理 node.js 版本
  • npm:node.js 包管理工具;用来管理 node.js 中的第三方插件;新版本的 node 在安装的时候,会自动安装对应版本的 npm
  • nrm:npm 源的管理工具,可以用来方便的切换 npm 源
  • cnpm:使用的是淘宝的源。用法跟 npm 完全一致。cnpm 经常会有问题,所以在很多地方不推荐使用
  • yarn:经过重新设计的崭新的 npm 客户端;运行速度显著提升,整个安装时间比 npm 少。一般推荐使用 yarn 代替 npm
  • npx:一个 npm 包执行器。我们可以使用 npx 来执行各种命令。

使用 nvm 管理 node.js 版本

参考:使用 nvm 管理 node.js 版本

npm

参考:npm常用命令操作

使用nrm管理npm源

当使用官方 npm 源安装各种包比较慢的时候,建议修改 npm 源地址

npm 相关参考:npm常用命令操作

推荐使用 nrm 管理 npm 源

nrm 是专门用来管理和快速切换私人配置的 registry

推荐全局安装

npm install nrm -g

常用命令

  • nrm ls :查看默认配置,带 * 号即为当前使用的配置
  • nrm current :查看当前使用的是哪个源
  • nrm use [源的别名] :切换到某个源
  • nrm add [源的别名] [源的地址] :添加私有源。eg: nrm add qihoo http://registry.npm.360.org
  • nrm test [源的别名] :测试某个源
  • nrm del [源的别名] :删除某个源

cnpm

npm 安装插件是从国外服务器下载,受网络影响大,可能出现异常。

淘宝团队复制了一个完成的 npmjs.org 镜像,用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。即: cnpm

cnpm 跟 npm 用法完全一致,只是在执行命令时将 npm 改为 cnpm

推荐全局安装cnpm

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

安装完成后,可以使用命令 cnpm -v 检查是否安装成功。

如果能正常显示版本号,表示已安装成功。如果显示 不是内部或者外部命令 ,则需要手动将安装目录添加到系统变量中

yarn

yarn 是经过重新设计的崭新的 npm 客户端;运行速度显著提升,整个安装时间比 npm 少

像 npm 一样, yarn 使用本地缓存。与 npm 不同的是, yarn 无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式。这个功能在2012年的 npm 项目中就被提出来过,但一直没有实现。

一般推荐使用 yarn 代替 npm

运行以下命令即可安装 yarn

npm install yarn -g

yarn 和 npm 命令对比如下

npm

yarn

描述

npm init

yarn init

初始化项目

npm install

yarn

yarn install

安装依赖

npm install xxx

npm install xxx --save

npm install xxx -S

yarn add xxx

安装某依赖,

写入dependencies

npm install xxx --save-dev

npm install xxx -D

yarn add xxx --dev

yarn add xxx -D

安装某依赖,

写入devDependencies

npm install xxx -g

yarn global add xxx

全局安装某依赖

npm update xxx

yarn upgrade xxx

更新某依赖

npm uninstall xxx

yarn remove xxx

删除某依赖

npm cache clean

yarn cache clean

清除全局缓存依赖包

npm run dev

yarn dev

yarn run dev

执行 dev 命令

npx

npx 是 npm v5.2.0 引入的一条命令( npx ),是一个 npm 包执行器。我们可以使用 npx 来执行各种命令。

主要有以下特点:

  • 临时安装可执行依赖包,不用全局安装,不用担心长期的污染。
  • 可以执行依赖包中的命令,安装完成自动运行。
  • 自动加载 node_modules 中依赖包,不用指定 $PATH
  • 可以指定 node 版本、命令的版本,解决了不同项目使用不同

npx 执行流程如下:

  • node_modules/.bin 路径检查对应的命令是否存在,找到之后执行;
  • 没有找到,就去环境变量 $PATH 里面,检查对应命令是否存在,找到之后执行;
  • 还是没有找到,自动下载一个临时的依赖包最新版本在一个临时目录,然后再运行命令,运行完之后删除,不污染全局环境。

安装过程很简单,直接运行以下命令即可

npm install npx -g

npx 使用场景

  • 执行本地命令

比如项目下安装了 mocha ,可以直接用 npx 执行

npx mocha --version
  • 一次性执行命令

比如以下命令,npx 将 create-react-app 下载到一个临时目录,使用以后再删除

不用全局安装 create-react-app ,运行后不会污染全局环境

npx create-react-app myApp
  • 切换 node 版本

要运行的命令不兼容当前的 node 版本时,可使用 npx 切换版

npx 的 -p 选项指定要安装的包,并将其添加到正在运行的 $PATH 中

npx node@12 -v
  • 开启静态服务器

使用 http-server 或者 serve 开启静态服务器。方便本地预览打包后的项目

npx http-server           # 默认返回根目录下index.html

npx http-server -p 3000   # 也可以直接指定端口

相关推荐

ES6中 Promise的使用场景?(es6promise用法例子)

一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值,它有三种状态:pending待定,这是Promise的初始状态,它可能成功,也可能失败,前途未卜fulfilled已完成,这是一种成功的状态,此时可以获取...

Promise的九大方法(promise的实例方法)

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析(360前端开发面试题)

1.组件库按需加载怎么做的,具体打包配了什么-按需加载实现:借助打包工具(如Webpack的require.context或ES模块动态导入),在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具,它无论Promise是成功(fulfilled)还是失败(rejected)都会执行,且不改变Promise的最终结果。它的实现原...

最简单手写Promise,30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的,大部分对于新手还是比较难理解的,其中几个比较难的点:状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态,这个叫Re...

前端分享-Promise可以中途取消啦(promise可以取消吗)

传统Promise就像一台需要手动组装的设备,每次使用都要重新接线。而Promise.withResolvers的出现,相当于给开发者发了一个智能遥控器,可以随时随地控制异步操作。它解决了三大...

手写 Promise(手写输入法 中文)

前言都2020年了,Promise大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥,直接上图:Promise就是处理异步函数的API,它可以包裹一个异步函数,在异步函数完成时抛出完成状态,让代码结束远古时无限回掉的窘境。配合async/await语法糖,可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里,Promise一直是处理异步操作的神器。而现在,随着ES2025的发布,Promise又迎来了一个超实用的新成员——Promise.try()!这个新方法简...

一次搞懂 Promise 异步处理(promise 异步顺序执行)

PromisePromise就像这个词的表面意识一样,表示一种承诺、许诺,会在后面给出一个结果,成功或者失败。现在已经成为了主流的异步编程的操作方式,写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解(promise机制的实现原理)

一、Promise的核心状态机Promise本质上是一个状态机,其行为由内部状态严格管控。每个Promise实例在创建时处于Pending(等待)状态,此时异步操作尚未完成。当异步操作成功...

javascript——Promise(js实现promise)

1.PromiseES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎...

取消回复欢迎 发表评论: