前端必备的工具

叫你多喝热水
221 阅读4分钟

对于新手而言  使用window系统的同学请注意了！！！！  window10开始 会有一个安全限制，全局安装的新的指令是无法直接使用的 yarn nrm nvm 这些，可能会出现以下的报错

yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1 字符: 1

这是因为我们的window终端（cmd不会有这个问题）需要开启一个安全安全的解除
使用管理员运行终端
输入

set-ExecutionPolicy RemoteSigned  
在提示之后 选择   Y  按回车！！！

  • 以上方式 还是修改不成功的同学尝试使用一下方式来处理
    管理员进入终端
  • 运行 set-ExecutionPolicy -Scope CurrentUser；
  • 出现ExecutionPolicy: ，填入RemoteSigned；
  • 输入Y

  • 关闭PowerShel ，然后执行get-ExecutionPolicy，发现变成了RemoteSigned，就成功了。

nvm

nvm 是对node进行版本管理的工具
官网：github.com/nvm-sh/nvm
下载链接：github.com/coreybutler…

  • 下载  nvm-setup.zip
    tips: 安装nvm 一定要先去卸载掉原来的node ，不然一定会失败的。

tips: 安装nvm 一定要先去卸载掉原来的node ，不然一定会失败的。

tips: 安装nvm 一定要先去卸载掉原来的node ，不然一定会失败的。

  • 安装:解压缩后直接 采用默认安装 一直下一步就好

  • 如果出现无法访问版本库的网络问题 (大概率会遇到这个问题)

尝试去切换 nvm的下载源
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

  • 使用方式

在window10/11  一定要采用管理员方式运行才能切换版本

nvm  ls  陈列当前已经安装可用的node的版本
nvm use 对应的版本号   --->切换到对应的node版本
nvm ls available -> 陈列出可安装的node的版本
这里并不是全部的版本 只是最近的一些主要版本

https://nodejs.org/en/download/releases 这个链接当中可以查看所有的node的版本

nvm install 版本号 就会下载并安装对应的node的版本

第一次刚安装好的时候建议按照一下流程使用

nvm list available

nvm install 对应的版本号(建议 12.22.12 / 14.19.3 )

安装好之后 使用 nvm use 版本号 来切换

pnpm yarn npm  cnpm  tyarn

npm 作为node 自带的包管理工具，但是它有它的局限性
1 网络问题（对于国内的开发者而言）
2 依赖会重复下载 （node_modules过大）

  • 推荐使用 pnpm！！！！无论是速度还是安全性上都是npm/yarn的几倍

安装 pnpm  官网（pnpm.io)
pnpm 的机制比npm 更加的合理，它会对整个计算机当中所有的依赖进行串联管理，避免了已经下载过的包会重复下载。 

npm i pnpm -g

pnpm  i  包名  （安装包）
pnpm add 包名  ( 安装包)
使用方式基本跟npm 一致

  • 一般来说 yarn 对于前端来说也是必须安装的一个包管理
    因为 react  rn 和yarn 都是Meta(前facebook)提供的 所以做react的技术当中yarn有下载的速度优势

yarn的安装及使用

1. 安装
npm i yarn -g
2. 使用方式
yarn install  (安装全部依赖)
yarn add 包名 (安装包名 等同于=> npm i 包名)
  • cnpm 不推荐使用（可能会引起依赖的丢失 ）
    如果你用cnpm只是为了解决网络慢的问题。 请直接使用nrm来切换源就可以了

  • tyarn 同cnpm一样  直接使用yarn就可以了

npm的主要使用方式

npm i 包名   ( 例： npm  i jqeury)
npm i 包名  --save  (安装并记录依赖  实际上在npm6版本以上已经自动记录依赖了)

npm i 包名 -g (全局安装  让我们在所有目录下都能使用到这个工具)
npm update 包名   （更新包 其实我们更新包 是直接再次运行npm i 来更新）
npm uninstall 包名 （卸载包 其实我们更习惯在node_modules目录中直接删除）

// 如果安装当中报错当中含有 cache 信息的话 一般都是 缓存出错 需要通过清楚缓存来重新安装
npm cache clean -f ( 强制去更新缓存)
npm init  （初始化包）

nrm

npm的下载一般会有网络问题，使用nrm 可以快速的让我们切换不同的源。
源（镜像） 值的是 npm的这些包下载的链接地址

  • 安装 nrm

npm i nrm -g

  • 查看源

nrm ls


  npm ---------- https://registry.npmjs.org/  官方源
  yarn --------- https://registry.yarnpkg.com/ yarn源（如果切换这个源 你是不是应该考虑直接使用yarn）
  tencent ------ https://mirrors.cloud.tencent.com/npm/  腾讯源
  cnpm --------- https://r.cnpmjs.org/  cnpm源
  taobao ------- https://registry.npmmirror.com/  淘宝源
  npmMirror ---- https://skimdb.npmjs.com/registry/ 官方的第二镜像

  • 切换源

nrm use 源名称
例：
nrm use taobao  (切换淘宝源)

  • 查看当前源

nrm current

  • 添加源 （在很多公司内部 会使用自己的源而不仅仅是使用公共源）

nrm add 源名称  源地址

520github  加速github的访问  如果有条件的话还是尽可能是采用付费的vpn

  • 第三步 复制 host 到 switchhost当中（并启用）
    记得要使用 管理员身份运行 switchost

添加配置

  • 第四步 需要手动去更新dns
    在终端当中输入

ipconfig/flushdns
avatar
文章
阅读
粉丝