小白上学之webpack5 - 第一章 nvm、nrm、node的配置是前提条件

前言

问：都什么年代了！怎么还有人用webpack啊？
答：都什么年代了怎么还有人不会webpack啊！
其他：vite傲视群雄，你们都是弟弟
再其他：rspack、trubopack、farm等，你当我是空气啊！
AI：我 chat-GPT来袭谁敢挡我！！！
小声嘀咕：教练，我想学习webpack5...
那好！听到有人说想学webpack5，我来了，嘿嘿！

以上观点都对，但是我这里要说一下，vite虽好，但可能不适合某些情景，在现在的项目中越来越多的需要用到项目融合：既：微前端（无界、micro-app、qiankun...国内外都有）,vite的开发环境和生产环境不一致，有些老插件遇到就会出点问题，且微前端对vite的支持一直是个比较头疼的问题，webpack虽然比较老。但至今webpack3.x依然有人在用。
rspack、trubopack、farm等都支持vue不是很好，还在开发中，不过react开发者有福了，推荐rspack，所以，老铁们求你们学一下webpack吧。webpack5+SWC+ESBuilder+模块联邦也不是很差事。

• 小伙伴们进入公司不乏也得维护老项目，不了解它的人大有人在。此教程随为时已晚，但亡羊补牢也不是没有作用。给那些前端干了很多年或者入行不是很久的小伙伴们一次学习的机会，所以，教程来了！开搞！（为小声嘀咕者发声！）

1. nvm安装

   • nvm（nodejs version manager）：nodejs 版本管理工具，也就是说：一个 nvm 可以管理很多 node 版本和 npm 版本。
     1.1 如果你电脑已经安装了node，建议先卸载掉，再安装nvm，否则有可能nvm无法切换node版本（也是为了省事）
     1.2 nvm下载 ；windows平台下载nvm-setup.zip这个安装包，傻瓜式一键安装即可。（linux和mac平台自行去各个搜索引擎找安装方法）
     1.3 打开命令行窗口输入nvm -v如果出现版本号就说明安装成功了

2. 使用nvm安装node

   2.1 命令行窗口输入 nvm install 16.15.1 就能安装版本为16.15.1的node...
   2.2 命令行窗口输入 nvm use 16.15.1 就能使用当前安装的版本
   2.3 命令行窗口输入 nvm list 就能查看现在安装的版本，前面带符号的就是当前正在使用的版本

3. nrm管理npm源

   • nrm（npm registry manager）是npm的镜像管理工具，有时候国外的资源太慢，使用这个就可以快速地在npm源间切换。
     3.1 命令行窗口输入npm install -g nrm即可安装nrm
     3.2 命令行窗口输入nrm -V 大写的v, 可以看到版本号即可安装成功
     3.3 命令行窗口输入nrm ls 查看可选源，或者使用nrm current查看当前正在使用的npm源
     3.4 命令行窗口输入nrm use taobao 就是切换到淘宝源
     3.5 当你公司或个人有自己的npm源则可以通过命令nrm add <key> <url> key: 键，起个名字, url: 值，私有npm地址
     3.6 能增加就能删除nrm del <key> key：想要删除的源名称
     3.7 测试一下你源链接速度 nrm test <key> 即可看到key源的响应时间

4. npm其他配置咋办？

   4.1 项目配置文件：你可以在项目的根目录下创建一个.npmrc文件，只用于管理这个项目的npm安装。输入: registry=https://registry.npm.taobao.org 则在这个项目内执行npm命令操作时候就会读取这个配置作用与当前项目
   4.2 用户配置文件：在你使用一个账号登陆的电脑的时候，可以为当前用户创建一个.npmrc文件，之后用该用户登录电脑，就可以使用该配置文件。可以通过 npm config get userconfig 来获取该文件的位置。
   4.3 全局配置文件： 一台电脑可能有多个用户，在这些用户之上，你可以设置一个公共的npmrc文件，供所有用户使用。该文件的路径为：$PREFIX/etc/npmrc，使用 npm config get prefix 获取

5. 我的电脑必须配置代理才能上网，npm咋配置代理？

   5.1 找到.npmrc或npmrc文件给文件加入proxy=<url:port>url代理网络地址,port为代理网络端

以上操作都搞定后就开始步入正题，下一章：webpack