乐趣区

关于webpack:小白上学之webpack5-第一章-nvmnrmnode的配置是前提条件

jiezi

前言

问：都什么年代了！怎么还有人用 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

退出移动版