前端开发环境配置

小凉丶

已于 2024-04-11 20:47:53 修改

阅读量1k

点赞数 1

分类专栏： help 文章标签： npm node.js 前端

于 2022-09-19 17:29:46 首次发布

本文链接：https://blog.csdn.net/weixin_44484471/article/details/126938232

版权

help 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

node 配置

node 安装

nodejs 是现在前端开发必须的一个部分, 它可以帮助我们实现一些后端操作, 重要的是下载前端所需的资源.像一些 js 插件, ui 框架都需要下载使用

通常情况下, 我们用的最多的是下载资源也就是代码管理部分

下载 nodejs : http://nodejs.cn/download/
安装 nodejs, 安装过程除了 安装地址外, 可以一路 Next, 注意记住安装地址

另外要注意地址中 Program Files , 把中间的空格去掉 ProgramFiles, 这里有坑一定要去掉

安装完成后使用 win+R 输入 cmd , 打开 命令行窗口, 分别输入 node -v 和 npm -v, 查看对应结果, 如果返回是版本数字则代表安装成功

安装成功后, 为了不让 nodejs 的缓存文件和下载文件出现在 c盘, 占用 c盘 空间则需要修改其缓存地址和下载地址

node 配置

通过修改 node 配置, 将缓存文件和下载文件位置调整到我们想要的地方

找到 nodejs 安装的地方, 也就是一开始安装时地址
在根目录新建 1 个文件夹 node_cache

目录结构

| nodejs
  ├ node_cache
  ├ node_modules

使用 win+R 打开 cmd 窗口, 输入

npm config set cache "D:\ProgramFiles\nodejs\node_cache"

npm config set prefix "D:\ProgramFiles\nodejs"

设置好后打开 环境变量,

环境变量 在桌面 -> 我的电脑 -> 右键属性 -> 高级系统设置 -> 高级

在 系统变量 中选择 新建

变量名: NODE_PATH

变量值: D:\ProgramFiles\nodejs\node_modules (不要直接复制,根据你的地址修改,我这个是范例)

在 用户变量 中修改后缀为 npm 的地址, 通常在 c盘,

比如 : C:\Users\......\AppData\Roaming\npm

将它修改为的 D:\ProgramFiles\nodejs 地址

修改后保存退出 , 重新打开 cmd, 记住重新打开, 一样输入 node -v 和 npm -v,查看结果, 如果有版本号, 则修改成功, 没有则需要以上操作重新过一遍,查看问题

npm 配置

npm 是 nodejs 的包管理工具, 是我们下载资源的必备工具它是随着 nodejs 一起安装的, 通常来说 nodejs 安装成功就可以使用了但是因为 npm 默认的数据源, 也就下载的仓库, 网速过于缓慢, 所以需要修改为国内源国内源用的最多的就是淘宝

~~打开 cmd, 输入 npm config set registry https://registry.npm.taobao.org~~ (2024.1时，淘宝镜像证书过期了，用不了不要改)
可以使用 npm config list 来查看 npm 的相关配置

更新 npm 全局依赖

使用npm-check插件来更新依赖。因为npm outdated无法作用于全局依赖需要package.json 才能运行而全局依赖是没有package.json的，所以需要使用npm-check插件来更新全局依赖。

查看全局需要更新的依赖 npm-check -g
更新全局依赖 npm-check -gu
a键全选，space空格键单选, i键反选, enter回车键确认, ctrl+c键取消操作退出
提示你 Your modules look amazing. Keep up the great work., 就代表你的全局依赖都是最新的

额外内容：如果是在项目里面有package.json 则可以使用 npm outdated 来查看并手动输入npm update更新依赖, 具体细节就不记录了

nvm 配置

nvm 是 nodejs 的版本管理工具, 用来管理 nodejs 的版本, 一是为了更新 nodejs 的版本，二是方便切换 nodejs 的版本，方便开发

nvm 地址：https://github.com/coreybutler/nvm-windows/releases

下载 nvm-setup.zip, 安装过程，除开安装路径外，注意 nodejs 的安装路径，一般来说你配置了 nodejs 的环境变量，那么 nvm 会自动配置好 nodejs 的安装路径，没有的话要手动指定一下

注意: 安装 nvm 前, 请保证已安装的 nodejs 弄好了环境变量. 如果发现安装好且切换版本后, node -v 没有发生变化,不妨看看环境变量. 可以直接改,如果不会就卸载 nvm 后,重新写入 nodejs 的环境变量,再安装 nvm 进行覆盖

~~找到 nvm 的安装根目录，打开 settings.txt 文件，往下添加以下内容，保存退出，主要是设置 nodejs 和 npm 的镜像地址，这样就可以加快下载速度了~~

//node_mirror: https://npm.taobao.org/mirrors/node/
//npm_mirror: https://npm.taobao.org/mirrors/npm/

(2024.1时，淘宝镜像证书过期了，用不了不要改)

然后命令行操作

nvm list available 安装指定版本的 nodejs
第一栏是最新版，第二栏是稳定版，第三栏是老稳定版，第四栏是老不稳定版，建议下第二栏，选择第一个即可
nvm install 10.15.3 安装指定版本的 nodejs，10.15.3 是版本号，可以根据自己的需要安装
nvm ls 查看已安装的 nodejs 版本
nvm use 10.15.3 切换到已安装的指定版本的 nodejs

至此，nodejs 的环境配置就完成了，接下来就是项目的配置了

注意：如果你用了一段时间后去升级 nodejs，那么你的全局依赖 -g结尾的安装将会消失，因为它们存在于你升级前的 nodejs 版本中，需要重新安装, 因此不防升级前先备份一下全局依赖名称，升级后再重新安装

全局依赖在 nodejs 中的 node_modules 文件夹中, corepack,npm 是自带的,其他则是后面安装的依赖

pnpm 扩展

pnpm 是 nodejs 包管理工具, 安装速度快, 占用空间小, 相对于 npm yarn 有很大优势，下面提供一些安装流程

使用 win+R 打开 cmd 窗口, 输入 npm install -g pnpm, 新版本的nodejs自带常用管理工具,报错已存在时,不妨到 nodejs 目录下查看是否已经存在
输入 pnpm config set store-dir /.pnpm-store 设置缓存地址
pnpm config list 查看是否设置成功

因为 pnpm 硬链接的机制，每当你使用pnpm安装时都会生成一个 .pnpm-store 来缓存资源，它会默认生成在你的当前盘符，使用第2步可以设置默认生成的位置

注意的是 /.pnpm-store 不能跨盘符，如果你设置了具体地址，比如E:\.pnpm-store,那么你在其他盘符使用时，就不再是硬链接机制，而是直接从E:\.pnpm-store中复制资源到你的当前项目的node_modules下。而且安装更新是会警告你 EXDEV: cross-device link not permitted.