• 第n+2次安装前端环境-nvm管理包工具-配置react环境


    搭建前端环境-nvm搭建-配置react环境-前提准备

    我之前电脑实在是没办法用nvm搭建前端环境!恼火,只能推倒重来了。

    首先就先去将自己的电脑里面的原来的nvm软件删除了。除此之外还要看看有没有之前单独安装过nodejs的,如果之前单独安装过那也要删除掉。

    今天我就是看到自己的电脑友nvm,以为能用,于是通过nvm切换不同nodejs时,发现都是同一个npm版本,于是没办法把自己想要的环境搭建起来。这里我只有2种判断:

    1、可能是除了nvm之外又单独安装了nodejs

    2、之前配置的nvm时将全部nodejs环境的npm版本固定到其中某一个nodejs的npm版本

    无论是哪一种都好,只要把电脑里面的有关nodejs的都删除了就好了,我说的是全部删除!(自己去搜索吧,找多几篇文章看看,看看怎么讲原来前端的配置都删除了,搞定之后再重启。)

    所以说你要去搜索下:

    1、win10(/其他系统)如何删除nodejs以及系统环境变量数据

    2、win10(/其他系统)如何删除nvm环境以及系统环境变量数据

    搞定完了有关没问题了。

    接下来就是安装了:

    我比较喜欢使用nvm来管理包,因为可以随时切换:

    后面再发一篇文章来写这么安装吧。

    接上篇文章

    一、安装nvm

    1、在这里拿nvm包(记得翻墙,快些):

    Releases · coreybutler/nvm-windows · GitHub

    这里是直接跟着window下安装并使用nvm(含卸载node、卸载nvm、全局安装npm)_windows nvm_hst❀的博客-CSDN博客的前步来的。

    ---------------------------------------为什么我只跟了这个文章的前5步过程------------------------------------

    为什么不跟完在里面步骤呢?因为里面说了如果有一个npm可以让各个版本的node共用,就不会这么麻烦了

    如果这个意思是:所有nvm包管理工具所管理的node环境里的npm都是同一个或者说都是同一个npm版本。

    我心想,不会真的有人讲所有node的版本共用有关npm吧?这不是沙雕吗?如果说你到了公司以后你们会做多个项目,然后每个项目的node以及npm的版本都不一样,所以还能讲所有的node版本设置为同一个npm版本吗?这不是妥妥沙雕?这样子根本没办法讲所有不同的前端项目跑起来吧?而且一个node对应得npm版本所install得前端包也就几百M不到,如果说你说讲所有版本node的npm设置为同一个是为了省内存我可不信!因为这些东西在安装nvm时不是可以设置到d盘或其他盘符吗?再说了,如果说就是想省磁盘或内存,那就项目结题后就简单使用nvm uninstall node版本号不就删除一个node环境了吗?为什么非要讲多个node的npm工具配置为同一个来共用呢?除非还是学生吧,在学校里的项目一般也没什么那就设置为同一个npm也没什么咯,反正要是不行或者说切换其他node版本时npm版本冲突了也有一大堆时间可以去修改,毕竟在校生时间多嘛。或者说这个文章实际上的共用不是我现在理解的意思。先这样吧。

    因为这个文章有些我觉得不需要去继续跟着,所以只配置了这篇文章的前5步,但是还是不行的。如果仅仅是下载完上面的nvm工具以及简单配置远远不够!
    
    • 1

    bug的出现

    比如说我想安装nvm里的nodejs:

    D:\companyFiles\xxxxxxx2023\september\myReact>nvm install 20.5.0
    
    • 1
    D:\companyFiles\xxxxxxx2023\september\myReact>nvm use 20.5.0
    Now using node v20.5.0 (64-bit)
    
    D:\companyFiles\xxxxxxx2023\september\myReact>node -v
    v20.5.0
    
    D:\companyFiles\xxxxxxx2023\september\myReact>npm -v
    9.8.0
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    没什么问题,于是我即将搭建react环境。

    但是下面就是操蛋:

    D:\companyFiles\xxxxxxx2023\september\myReact>npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    changed 421 packages in 2m
    
    28 packages are looking for funding
      run `npm fund` for details
    
    D:\companyFiles\xxxxxxx2023\september\myReact>cnpm -v
    'cnpm' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。
    
    D:\companyFiles\xxxxxxx2023\september\myReact>where cnpm
    信息: 用提供的模式无法找到文件。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    感觉没什么问题,但是无法识别cnpm,于是就到配置nvm的内容了

    二、配置nvm

    接下来就按照这个文章:

    安装nvm下载node,npm以及配置的全过程。解析npm下载包使用 -v指令 发现下载的包不存在的原因。_QAQshift的博客-CSDN博客

    我也是根据这个文章来的:

    C:\WINDOWS\system32>npm config set prefix "D:\Web\myNodejs\node_modules\node_global"
    
    C:\WINDOWS\system32>npm config set cache "D:\nvm\myNodejs\node_modules\node_cache"
    
    C:\WINDOWS\system32>npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    added 404 packages in 3m
    
    C:\WINDOWS\system32>cnpm -v
    cnpm@9.2.0 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\lib\parse_argv.js)
    npm@9.8.1 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\node_modules\npm\index.js)
    node@20.5.0 (D:\Web\myNodejs\node.exe)
    npminstall@7.10.0 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
    prefix=D:\Web\myNodejs\node_modules\node_global
    win32 x64 10.0.19044
    registry=https://registry.npmmirror.com
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    于是就可以安装react环境吧:

    三、安装react:

    React前端开发环境搭建 - 季安安 - 博客园 (cnblogs.com)

  • 相关阅读:
    leetcode:188. 买卖股票的最佳时机IV
    c 摄像头生成yuv未压缩图片
    机器视觉公司还是招人?
    openharmony开发TS语言基础
    Kotlin委托
    《深度学习与目标检测 YOLOv5》
    C++ 不知图系列之基于邻接矩阵实现广度、深度搜索
    以一道面试题来探讨测试用例设计的六大思路
    洛谷 P2922 / bzoj1590【Trie】
    学习笔记——IP地址网络协议——网络层(IP)协议
  • 原文地址:https://blog.csdn.net/ws_please/article/details/132747315