npm、yarn安装实践

绯红的倩影
565 阅读3分钟

1. 安装node

1.1 方法一：通过node官网下载node安装包，

安装后，node安装包将自带npm、npx，安装完毕后，可以通过下面的指令查看当前版本号。

node -v
// v16.13.1

npm -v
// 8.1.2

npx -v
// 8.1.2

1.2 方法二：使用nvm

1.2.1 安装

  1. 法一，通过github nvm，选择 nvm-setup.exe 进行下载安装

  2. 法二，通过百度网盘 链接，提取码: 5b3r

1.2.2 使用
nvm list // 查看版本
nvm install 16.13.1
nvm uninstall 16.13.1
nvm use 16.13.1
  1. 如果使用 nvm use xxx 报错如下

image.png 解决方法：用管理员方式打开

image.png 2. 卸载的时候，请关闭node进程

1.2.3 nvm相关配置解释

image.png

  1. %NVM_HOME%： 相当于去取环境变量为：NVM_HOME 对应的内容
  2. NVM_HOME：nvm 应用程序的地址
  3. NVM_SYMLINK：当前node的地址
  4. 在默认情况下，nvm/settings.txt 中的 root、path设置与NVM_HOME、NVM_SYMLINK是对应的

当我们使用 nvm use xxx 的时候，会把对应版本的node放到 NVM_SYMLINK 对应的路径下面。

环境变量相关内容见：3. 修改环境变量

2. 设置npm全局安装路径

  1. 通过下面的命令查看npm全局包的默认安装路径
npm config get prefix
// C:\Users\username\AppData\Roaming\npm

我们可以看到默认情况下npm的全局安装路径位于c盘，所以我们通常会修改这个路径

  1. 修改默认路径 以D盘为例，首先创建对应目录，执行下面命令修改npm全局包的默认安装路径
npm config set prefix D:\nodejs\node_global
// 设置完毕后，再次执行查看命令，进行检查
npm config get prefix
// D:\nodejs\node_global
  1. 此时我们可以全局安装一个包，测试一下，以 vue-cli 为例
npm install -g @vue/cli
  1. 查看包的安装情况 包已经安装到 D:\nodejs\node_global 目录下 image.png
  2. 测试vue-cli运行指令
vue --version

执行结果 image.png

3. 修改环境变量

  1. 当我门输入类似 vue --version 命令时，首先会找当前目录，然后在去环境变量中的path对应的路径中依次查找

Path：代表的是可执行文件的搜索路径

  • 在cmd中运行指令的结果（cmd允许首选查找当前目录，powerShell不支持） image.png
  1. 配置环境变量
  • 用户变量只对当前用户有效，系统变量对所有用户有效；
  • 系统变量的优先级高于用户变量; 添加 npm 全局安装路径到系统变量的path中。 image.png

  1. 再次执行测试命令 image.png

  2. 思考：当我们运行npm run serve的时候会发生让什么？

"serve": "vue-cli-service serve --mode development",

npm 会默认在命令前面加上 ./node_modules/.bin，也就是说真实运行的命令是 ./node_modules/.bin/vue-cli-service serve --mode development

image.png

注意： 如果.bin里面没有，那么就会到环境变量的 path 对应的路径里面依次查找

4. 配置 NODE_PATH 路径

配置NODE_PATH，是为了nodejs文件require能访问到全局的node_modules包

  1. node 的查找路径策略

当直到根目录都没有找到的时候就查找NODE_PATH中对应的路径 资料来源

  1. 设置NODE_PATH

内容：D:\nodejs\node_global\node_modules

image.png 3. 测试

  • 首先全局安装 lodash
npm i -g lodash
  • 在项目中引入lodash进行测试
var _ = require('lodash');
var array = [1, 2, 3];
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']

5. 安装配置yarn

  1. 安装yarn
npm i -g yarn
  1. 设置yarn全局安装路径
yarn config set global-folder "D:\nodejs\yarn\node_global"
yarn config set cache-folder "D:\nodejs\yarn\node_cache"
  1. 设置环境变量
path: D:\nodejs\yarn\node_global\node_modules\.bin
NODE_PATH: D:\nodejs\yarn\node_global\node_modules

6. npx

执行本地已安装的依赖包命令

"gitHooks": {
    "pre-commit": "npx lint-staged",
    "commit-msg": "npx commitlint -e"
},

当我们执行npx lint-staged的时候，会从下面的维度去查找可执行文件

  • 去node_modules/.bin路径检查npx后的命令是否存在，找到之后执行；
  • 找不到，就去环境变量PATH对应的路径里面，依次检查npx后的命令是否存在，找到之后执行;
  • 还是找不到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。
avatar
文章
阅读
粉丝