一文搞定nodeJS相关的nvm、npm、nrm、yarn、npx等
ztj100 2024-11-17 18:13 16 浏览 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 版本
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 # 也可以直接指定端口
- 上一篇:npm下载很慢怎么办,切换国内镜像源
- 下一篇:npm配置阿里镜像库
相关推荐
- 使用 Pinia ORM 管理 Vue 中的状态
-
转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
-
Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
-
webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。...
- 超赞 vue2/3 可视化打印设计VuePluginPrint
-
今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...
- 搭建Trae+Vue3的AI开发环境(vue3 ts开发)
-
从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。...
- Vue中mixin怎么理解?(vue的mixins有什么用)
-
作者:qdmryt转发链接:https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...
- Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
-
1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示:创建my-first-vue...
- 新手如何搭建个人网站(小白如何搭建个人网站)
-
ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI框架来完成个人博客的主体开发,欢迎大家讨论...
- 零基础入门vue开发(vue快速入门与实战开发)
-
上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...
- .net core集成vue(.net core集成vue3)
-
react、angular、vue你更熟悉哪个?下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue(npm...
- 使用 Vue 脚手架,为什么要学 webpack?(一)
-
先问大家一个很简单的问题:vueinitwebpackprjectName与vuecreateprojectName有什么区别呢?它们是Vue-cli2和Vue-cli3创建...
- vue 构建和部署(vue项目部署服务器)
-
普通的搭建方式(安装指令)安装Node.js检查node是否已安装,终端输入node-v会使用命令行(安装)npminstallvue-cli-首先安装vue-clivueinitwe...
- Vue.js 环境配置(vue的环境搭建)
-
说明:node.js和vue.js的关系:Node.js是一个基于ChromeV8引擎的JavaScript运行时环境;类比:Java的jvm(虚拟机)...
- vue项目完整搭建步骤(vuecli项目搭建)
-
简介为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 使用 Pinia ORM 管理 Vue 中的状态
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
- 超赞 vue2/3 可视化打印设计VuePluginPrint
- 搭建Trae+Vue3的AI开发环境(vue3 ts开发)
- 如何在现有的Vue项目中嵌入 Blazor项目?
- Vue中mixin怎么理解?(vue的mixins有什么用)
- Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
- 新手如何搭建个人网站(小白如何搭建个人网站)
- 零基础入门vue开发(vue快速入门与实战开发)
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)