当前位置：
  1. 首页
  2. npm
  3. 正文
本文介绍: node包管理工具的整套使用与讲解，包含了(nvm、npm、yarn、cnpm、pnpm、nrm)等工具的下载使用与常用命令

前言

nvm

1、安装nvm

  • 在这里插入图片描述

2、nvm常用命令

2.1、list

查看所有下载的node版本

nvm list # 查看安装过的node版本

# 或
nvm ls # 查看安装过的node版本

nvm ls

在这里插入图片描述

在这里插入图片描述

2.2、install/uninstall

下载或卸载执行的node版本

我这里下载16.16.0版本和删除它来进行测试

使用nvm安装的node不需要再添加环境变量等配置了，nvm下载的时候会自动配置好它的环境变量

在这里插入图片描述

下载
nvm install 16.16.0

nvm ls # 查看是否下载成功

在这里插入图片描述

卸载
nvm uninstall 16.16.0

nvm ls # 查看是否卸载成功

在这里插入图片描述

2.3、use

使用其他版本的node，软件上的控制台可能执行完毕会报错，原因是没有权限，以管理员身份打开命令提示符，然后再次执行命令即可

在这里插入图片描述

nvm use 14.19.1

在这里插入图片描述

2.4、current

上面使用过了，这里就不再演示了。查看当前使用的node的版本号，和node -v结果一致

npm(详细)

通常，我们在项目根目录下，会创建一个名为package.json文件，然后npm会根据里面的配置依赖，来下载对应的依赖。

1、package.json

1.1、创建文件

创建文件有两种方式：

  1. 手动创建文件，然后一个一个填写内容
  2. 在控制台输入命令：npm init -y
    1. -y：代表全部为yes。表示我们全部使用默认配置，如果不写的话，我们会在控制台进行一个一个的输入配置，或使用默认的话需要按很多回车，可以自行尝试。
    2. 一般都会配置为默认的，然后如果需要修改的话，等生成出来，我们直接在文件中改即可
{
  "name": "npm-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1.2、常见属性配置

(1)、必须填写的属性：name、version
(2)、private属性
(3)、main属性

在这里插入图片描述

(4)、scripts属性(重要)
修改前

index.js文件

function test1(){
  console.log("我是test1");
}

function test2(name){
  console.log("我是" + name);
}

test1()
test2("张三")

终端

在这里插入图片描述

修改后

package.json中的scripts

"scripts": {
    "start": "node ./src/index.js"
},

终端

在这里插入图片描述

(5)、dependencies属性(重要)

在这里插入图片描述

(6)devDependencies属性(重要)

在这里插入图片描述

(7)、peerDependencies属性

在这里插入图片描述

(8)、engines属性
(9)、browserslist属性

1.3、依赖的版本管理

我们的dependencies和devDependencies属性负责记录依赖的版本。

可以发现我们安装的依赖版本会有^2.0.3 或 ~2.0.3，这是什么意思呢，有什么区别

2、npm install命令

3、package-lock.json

具体用处，会在下一小节详细讲解

3.1、文件解析

在这里插入图片描述

4、npm install原理

看完上面的使用讲解，我们应该深入考虑几个问题

npm install 原理图

在这里插入图片描述

5、npm其他命令

以下几个为比较常用的命令

yarn

另一个node包管理工具 yarn

cnpm

由于npm或yarn默认仓库的地址为国外的，可能会导致：下载会比较慢，或者下载途中某些文件丢失等问题，我们一般会将仓库地址改为淘宝的镜像仓库地址。

将npm仓库改为淘宝的问题：

为了解决以上问题，我们会再下载一个cnpm。

1、下载方式

两种方式

npx

npx 用于在项目目录中，直接执行依赖包中的命令，比如less的命令、webpack的命令等等

1、讲解

  • 下载的所有的依赖中包含的命令，全部在node_module->.bin目录下。
  • 当你在项目目录中执行webpack -v的时候，会从你当前项目目录中找命令，并不会智能的去子目录中找
  • 当在子目录中找不到的时候，就会去全局查找(我们使用npm安装的时候，后面 -g 的命令)
  • 当全局和局部都安装了相同的包时，在当前项目下执行命令yarn -v，就会执行全局版本的命令。但是当进入.bin目录后，再次执行命令，还是执行全局版本的命令。
  • 只有执行npx yarn -v的时候，才会执行局部版本的命令
  • 所以当你想执行依赖包中的命令的时候有以下办法
  • 下载webpack的时候，也需要同时安装webpack-cli才能执行命令，否则会报错提示安装
  • yarn add webpack webpack-cli -D

2、执行依赖包中的命令的方式

执行命令共有三种方法，第三种也是最简单的一种

  1. 每次执行命令进入到node_modules->.bin目录中执行.webpack -v命令 (最麻烦不推荐)
  2. 可以在script脚本中写"webpackV"："webpack -v"，在这里可以省略npx，但是如果执行的命令多的话，就需要定义很多脚本，也很麻烦 (不推荐使用)
  3. 最简单的办法就是直接在项目目录下，执行npx webpack -v命令，这样就会自己去node_modules->.bin目录中寻找 (非常推荐)

2.1、错误示例

在这里插入图片描述

2.2、方法一

cd .node_modules.bin

.webpack -v

在这里插入图片描述

2.3、方法二

package.json中的scripts
"scripts": {
    "start": "node ./src/index.js",
    "webpackV": "webpack -v"
},
命令
npm run webpackV

在这里插入图片描述

2.4、方法三

npx webpack -v

在这里插入图片描述

上传自己的包

发布包步骤

  1. 上传自己的包，首先我们要注册一个npm的账号，官网：https://www.npmjs.com/
  2. 然后在index.js中随便写几个方法，用于上传包后测试
  3. 然后查看package.json文件中是否有private属性，改为false，还有其他的配置
  4. 然后在命令行中登录npm login
  5. 执行命令npm publish，然后等待完成即可将包上传成功
  6. 这时候打开npm包查看官网：https://www.npmjs.com/，然后搜索自己在package.json中定义的name名，即项目名即可搜索到
  7. 然后再创建一个新的目录，初始化，然后下载安装咱们刚刚提交好的包，js中引入，查看是否能使用即可
  8. 注意：我们一般会把项目使用打包工具，比如webpack，打包后再进行发布，这样可以让使用的人下载的时候，更快一些，减小包的体积

更新包步骤

  1. 修改代码
  2. 修改package.json中的版本号
  3. 重新发布

1、发布包

注意：index.js最外层的文件，要放到根目录下，而不是src里面

1.1、index.js中测试方法

export function test1(val){
  return "我是test1方法，您的传参为：" + val;
}

export function sum(val1,val2){
  return val1 + val2;
}

1.2、修改属性

keywords：可以通过关键字搜索到

type：让我们项目使用ES6的导包规范，而不是commonJS

{
  "name": "npm-demo-01-tcc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": false,
   "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": ["tccc","ycccc"],
  "author": "宇辰",
  "license": "ISC"
}

1.3、命令行中登录

npm login

在这里插入图片描述

1.4、上传包

npm publish

在这里插入图片描述

1.5、测试

这时候，我们就上传成功啦

仓库搜索

在这里插入图片描述

在这里插入图片描述

代码测试
  1. 新创建一个项目，然后初始化，执行命令npm i npm-demo-01-tcc下载依赖
  2. 然后js文件引入依赖，调用依赖中的方法，进行测试

package.json

{
  "name": "npm-demo-02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "npm-demo-01-tcc": "^1.0.0"
  }
}

index.js

import {test1, sum} from "npm-demo-01-tcc";

console.log(test1(123456));
console.log(sum(100,200))

打印

在这里插入图片描述

2、更新包

2.1、修改代码

export function test1(val){
  return "我是test1方法，您的传参为：" + val;
}

export function sum(val1,val2){
  return val1 + val2;
}

export function sub(val1,val2){
  return val1 - val2;
}

2.2、修改版本号

{
  "name": "npm-demo-01-tcc",
  "version": "1.1.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "private": false,
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": ["tccc","ycccc"],
  "author": "宇辰",
  "license": "ISC"
}

2.3、重新上传

重新上传需要进入到包的项目目录里，执行命令

npm publish

在这里插入图片描述

2.4、测试

  • 新项目中需要删除node_module目录，并且删除package.json中的这个依赖，然后重新install。

  • 或者直接修改package.json中的那个依赖的版本号，然后install(命令地址需要在新项目中)。

  • 我们可以在node-modules中看到自己的源码

在这里插入图片描述

import {test1, sum, sub} from "npm-demo-01-tcc";

console.log(test1(123456));
console.log(sum(100,200))
console.log(sub(200,100))

在这里插入图片描述

3、卸载包

共有两个命令

在这里插入图片描述

在这里插入图片描述

pnpm(新东西)

  • 在这里插入图片描述
  • 出现原因
    1. 如果工作的话，你的笔记本上，不可能只有一个前台项目，那么每个项目都需要安装node_modules依赖，如果你有100个项目，就会装一百个，并且里面很多依赖都相同，非常占用空间资源
    2. 每个新项目下载资源也会非常的耗费时间
    3. npm5和yarn为了解决依赖的依赖和其他依赖的依赖重复问题，使用了扁平化安装依赖。比如：我们安装axios的时候，可以看到node_modules中多了很多依赖包，这些依赖包都是axios依赖中所拥有的依赖，它们在npm5版本之前，是会存到各自文件的node_modules中，但是这样又无法解决一个依赖的依赖和另一个依赖的依赖是一个版本，但是却被下载了两份的问题。所以后面改成和yarn一样，对node_modules进行了扁平化管理。
    4. 上面这样的坏处是，由于依赖的依赖被拉出来了，导致我的项目中也能使用这个依赖。但是我的package.json并没有记录这个依赖。假如有一天axios被删除了，那么它的依赖也会跟着删除。如果我项目中使用了这个依赖，就会报错。这样的以来问题称之为：幽灵依赖
  • pnpm优点

在下载使用之前，先来讲一讲操作系统中的软连接和硬链接(pnpm实现的核心原理)

1、软连接和硬链接

1.1、拷贝和硬链接的区别

1.1.1、拷贝

在这里插入图片描述

1.1.2、硬链接

在这里插入图片描述

2、文件拷贝和硬链接和符号连接命令

文件的拷贝，可以使用ctrl+c ctrl+v，也可以使用命令，进行文件的拷贝

#windows
copy index.js index2.js
#macos
cp index.js index2.js

当修改index.js文件的时候，并不影响index2.js

在这里插入图片描述

文件的硬链接，使用命令吧

#windows
mklink /H index2.js index.js
#macos
ln index2.js index.js

在这里插入图片描述

在这里插入图片描述

文件的软连接

  • 然后进入当前测试文件的目录中

    在这里插入图片描述

#windows
mklink index2.js index.js
#macos
ln -s index2.js index.js

在这里插入图片描述

然后进到目录中，可以看到两个文件类型不一致，但是点击index2.js后，打开的文件和index.js内容一致

在这里插入图片描述

我们右击index2.js，有个打开文件位置的选项，点击，即可发现会默认选中到index.js文件

在这里插入图片描述

在这里插入图片描述

2、下载pnpm

下载的方式有很多种，可以查看官网：https://pnpm.io/zh/installation

我们这里使用 npm 来进行安装

  • 如果yarn下载成功后，执行pnpm -v命令依旧报错。是因为yarn没有配置环境变量，需要执行yarn global bin，找到yarn所在目录，然后把这个目录配置到系统的path环境变量中即可
  • 建议直接使用npm，简单省事
# npm命令
npm install -g pnpm

# yarn命令
yarn global add pnpm

在这里插入图片描述

3、使用pnpm命令

我们新创建一个项目来测试使用，里面新建一个index.js文件，作为主文件

3.1、init

当我们执行命令的时候，pmpn会直接给我们创建一个package.json文件，里面内容和npm的生成的一致，不过我们可以省略-y不写

pnpm init

在这里插入图片描述

3.2、add/remove

add：添加指定依赖

remove：删除指定依赖

add
pnpm add axios # 开发和生产依赖

pnpm add -D axios # 开发依赖

pnpm add -g yarn # 全局依赖

pnpm add axios@x.y.z #安装指定版本依赖

在这里插入图片描述

remove
pnpm remove [-D|-g] axios

在这里插入图片描述

3.3、install

需要先在package.json文件中添加几个依赖，才能根据添加的依赖进行下载

package.json
{
  "name": "pnpm-demo-03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.3.4"
  },
  "devDependencies": {
    "webpack": "^5.76.3 ",
    "webpack-cli": "^5.0.1"
  }
}

pnpm install

pnpm i # 简写

在这里插入图片描述

3.4、run

  • 但是pnpm和yarn一样，run可以省略，不管是不是指定名称的命令，都可以省略run

    在这里插入图片描述

4、node_modules讲解

  • 打开node_modules目录，你会发现它和使用其他npm、yarn下载后的目录不一致，一级目录里只能看到自己下载的依赖，并没有看到依赖的依赖在一级目录，这样就限制了你可以使用依赖的依赖来进行代码编写，解决了幽灵依赖的问题

  • 使用vscode软件，可以看到一级目录最右侧都是有个箭头，代表了这些目录都是软连接，它并不是真正的文件存放地址，而是一个指针，指向了真实存放文件的地址

    在这里插入图片描述

  • 其实所有的依赖也都被扁平化了(不太准确)，只不过她们都放在.pnpm的文件夹里(二级目录)。

  • 二级目录中可以找到所有依赖以及依赖的依赖(被扁平化都放在二级目录了)

  • 但是打开axios的依赖，可以发现，它自己的依赖是正常的文件夹，而它自身的其它依赖都是软连接，指向了被扁平化的依赖

  • 我这里删除一些文件夹，方便看得清楚，画幅图

    在这里插入图片描述

5、存储store

  • 另外一个非常重要的命令是pnpm store prune：从store中删除当前未被引用的包来释放store的空间

6、下载速度测试

你可以创建两个测试项目

  • demo1先下载webpack3.6.0的版本，你会发现时间虽然可能比其他npm、yarn下载的时间短了一点，但是也没有太明显。

    在这里插入图片描述

  • 上面写的是这么就，我感觉没有这么久，第二次我感觉用了10秒九下载好了

nrm

  • 最后一个东西为拓展，是一个镜像管理工具，言外之意就是用来管理所有镜像地址的的工具。

  • 之前说为了切换镜像仓库方便，又下载了一个cnpm，然后切换cnpm的镜像即可。如果有多个源来回切换的话，依旧很麻烦。

  • 所以我们使用nrm来管理自己的源，就可以不下载cnpm，下载一个nrm管理所有源即可

1、全局安装

上面讲了很多常用工具了，我这里只写了使用npm来全局安装，这样会简单一些==(不需要把其他对应的工具来添加到环境变量，才能正常访问使用别的工具全局安装的工具了)==。

npm i -g nrm@1.0.0 # 下载这个版本之上的可能会有 require() of ES Module 报错，这个版本是没有问题的

nrm --version # 查看版本

在这里插入图片描述

2、常用命令

2.1、add/del

nrm add taobao https://registry.npm.taobao.org/ # 添加淘宝镜像

nrm add cnpmjs https://registry.nlark.com/ # cnpmjs镜像

nrm add huawei https://mirrors.huaweicloud.com/repository/npm/ # 华为云镜像

nrm add tengxun https://mirrors.cloud.tencent.com/npm/ # 腾讯云镜像

在这里插入图片描述

2.2、ls

nrm ls

在这里插入图片描述

2.3、use

npm config get registry # 先查看npm的仓库地址

nrm use taobao # 然后通过nrm修改地址

npm config get registry # 再查看npm的仓库地址，查看是否改变

# 前面有错号小图标的不用管

在这里插入图片描述

2.4、test

nrm test

在这里插入图片描述

原文地址:https://blog.csdn.net/qq_57404736/article/details/129768276

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_43358.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 day4：Node.js 核心库
下一篇 在使用node.js时发现的问题，npm版本版本过低，升级报错

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。