包管理工具npm、npx、yarn、cnpm、pnpm

包管理工具：npm、npx、yarn、cnpm、pnpm

npm

概述

• 包管理工具npm： Node Package Manager，也就是Node包管理器；
• 如何下载和安装npm工具呢？
• npm属于node的一个管理工具，所以需要先安装Node；
• node管理工具：https://nodejs.org/en/，安装Node的过程会自动安装npm工具；
• npm管理的包可以在哪里查看、搜索呢？
  • https://www.npmjs.org/ 这是安装相关的npm包的官网；

npm install 命令

全局安装和局部安装

全局安装

依赖包想要实现全局安装 通过指令 npm install 插件包名字 -g

这样就可以在任意层级目录下面执行插件包里面的指控了

比如说全局安装webpack 和 webpack-cli: npm install webpack webpack-cli -g

接下来就可以在不同的层级目录里面使用webpack -v查看webpack的版本号了

• 用途：在命令行工具中，在任意目录层次下 输入特定指令 运行程序

  • 比如说node就是全局安装的 就可以在任意层级目录输入node指令
  • 例如输入node -v 就可以产看node安装的版本号

• 实现:一个软件 如果想实现全局安装分为三步

  1. 下载完成安装过程
  2. 找到安装目录添加到环境变量中
     • 系统环境变量位置：此电脑→属性→高级设置→环境变量→系统环境变量→双击path→新建→将软件的暗转目录粘贴进去→陆续确定
  3. 这样就可以在命令行工具中输入特定指令 运行程序了

局部安装

安装在特定项目的文件夹里面

他只会将插件包放置到当前文件夹下面的node_modules里面

只有当前这个项目才能使用这个插件包，其他项目是使用不了的

局部安装又分为开发依赖和生产依赖

安装指定版本

npm i yarn@0.28.4 安装0.28.4版本的yarn

npm 下载包和删除包流程示例

注意：根文件夹名不能含有中文

1. npm init -y 初始化 ：生成是package.json文件

   1. 在需要的文件夹内初始化，vscode打开终端，需要注意，路径名应与文件夹层级保持一致

      • 例如：我直接在E盘创建文件夹 abc，那么终端对应的路径就需要是 E:\abc>
        

   2. -y 所有信息使用默认的
      

   3. 不写 -y 的话，需要在创建时依次填写信息

2. npm i vue 下载vue包 到开发和生产依赖（dependencise）
   

   1. i 是 install 的缩写
   2. npm i vue == npm install vue

3. npm i jquery 下载jquery包 到开发和生产依赖（dependencise）

4. npm i dayjs 下载dayjs包 到开发和生产依赖（dependencise）

   1. dayjs时间展示

5. npm i bootstrap 下载bootstrap 包 到开发和生产依赖（dependencise）
   

6. npm i webpack -D 下载bootstrap 包 到开发依赖（devDependencise）

   1. -D 是 --save-dev 的简写
   2. npm i webpack -D == npm i webpack --save-dev
   3. -D 和 --save-dev 是将包安装到开发依赖（devDependencise）
   4. webpack 打包工具

7. npm i babel --save-dev 下载babel包 到开发依赖（devDependencise）

   1. babel ES6语法转换为ES5语法

8. npm uninstall bable 删除bable包

注意：

1. 安装在开发环境中的包是项目上线时所不需要的，注意甄别
2. node_modules可以删除，里面的包占用空间较大，再次使用的时候可以通过 npm install 下载，后面不需要跟包名，它会根据package.json文件内的信息自动下载所需包，package.json为重要依据文件，最好不要删除

版本号管理 semver版本规范是X.Y.Z

版本号就是包名后面的一串数字

• x.y.z

  • x ：主版本号（major）：做了不兼容的API修改（可能不兼容之前的版本）；
  • y ：次版本号（minor）：做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
  • z ：修订号（patch）：做了向下兼容的问题修正（没有新功能，修复之前版本的bug）；

• ^和~的区别

  在package.json文件中，每个包后面都有相应的版本号

  • x.y.z：表示一个明确的版本号；
  • ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本；
  • ~x.y.z：表示x和y保持不变，z永远安装最新的版本；

npx

概述

• npx是npm5.2之后自带的一个命令

npx运用

• npx可以说是一个比较特殊的命令，使用npx执行某个包时，它会到当前目录的node_modules/.bin目录下查找对应的命令，有的话就会调用本地的包，如果本地没有找到该包，那么它就会临时下载该包，在执行之后立即删除，好处是不占用本地存储，如果遇到一些不常用的包，就比较适合使用这个方法
• 以yarn为例，那么如何使用项目（局部）的命令，常见的是两种方式：
  • 方式一：修改package.json中的scripts
    “scripts”: {
    “yarnstart”: “yarn --version”
    }
• 方式三：使用npx
  • npx yarn --version

yarn

概述

使用之前需要先安装yarn：npm install yarn -g 全局安装yarn

npm下载比较慢时，又不想更改npm下载地址 ，就可以使用yarn来进行下载其他的依赖包

注意：使用的时候不再是npm install …… 而是yarn add …… 因为他是依托于node

下载包：yarn add 包名

移除包：yarn remove 包名

例如：

• yarn add vue （安装到开发和生产环境dependencies）
• yarn add webpack （安装到开发环境devDependencies）
• yarn remove vue（移除vue）
• yarn remove webpakc （移除webpack）

yarn基本使用示例

1. npm init -y 新建项目初始化，生成package.json文件

2. yarn add axios dayjs （包名可连写） 安装插件指令

   1. 默认安装到开发和生产依赖（dependencise）

3. 新建src文件夹，并在src里面新建main.js文件

   1. 在main.js文件里面声明常量，并打印

   2. const dayjs = require("dayjs");
      console.log(dayjs);
      

4. 在package.json文件里面配置指令，在"调试"的下面，有一个"scripts"，配置start，后面写 node 空格 路径 注意路径不要出错

   1. "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1",
              "start": "node ./main.js"
          },
      

   2. “start”: “node ./src/main.js”

5. 在控制台运行 yarn start

   1. 使用yarn start运行 等同于 node ./main.js运行，在文件夹较多，跳转路径太麻烦时，这个方法就很方便

      • “start”: “node ./main.js”
      • “start”: “node ./src./main.js”
      • “start”: “node ./aaa./main.js”

   2. yarn start == yarn run start （run可以省略）

      运行结果如下

      

6. yarn remove 包名 -------- 删除某个包

   1. yarn remove dayjs
   2. yarn remove axios
   3. 连写 yarn remove dayjs axios

cnpm

概述

安装cnpm ：npm i cnpm -g 全局安装

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包，这时可以使用镜像

• npm config get registry 查看当前下载地址
  • 默认都是国外的服务器：https://registry.npmjs.org/
• 切换为国内的中国镜像服务器：npm config set registry https://www.npmmirror.com/
  • 切换后课用 npm config get registry 查看是否切换成功
  • 淘宝镜像：https://registry.npm.taobao.org
    • 淘宝镜像似乎不再维护了，建议使用中国镜像
• 可能对于一些人来说，并不希望将npm修改为某一镜像
  • 第一，不太希望随意修改npm原本从官方下来包的渠道；
  • 第二，担心某镜像挂了或者不维护了，又要改来改去；
• 这个时候，我们可以使用cnpm，并且将cnpm设置为中国镜像： 不改变npm的下载地址
• 也就是说 如果我们使用npm i 包名 就是从国外官网下载安装 如果使用cnpm i 包名 就是从中国镜像服务器仓库下载插件

cnpm基本使用

1. cnpm add 包名 ----------下载某个包
2. cnpm remove 包名 ------------ 删除某个包
3. cnpm start ---------- 运行配置过的文件

使用方法与yarn区别不大，参考yarn的使用，把yarn写成cnpm就行了

pnpm

概述

什么是pnpm？

硬链接和软连接的概念

硬链接和软连接的演练

pnpm到底做了什么？

pnpm创建非扁平的 node_modules 目录

pnpm的存储store

pnpm的安装和使用

• 官网提供了很多种方式来安装pnpm：https://www.pnpm.cn/installation

• 如果已经安装了Node，Node中有npm，所以我们通过npm安装即可；

  • npm install pnpm -g（全局安装pnpm）

• pnpm类似于前面的 yarn 和 cnpm

  npm命令	npnm 等价命令
  npm install	pnpm install
  npm install 包名	pnpm add 包名
  npm uninstall 包名	pnpm remove 包名
  npm run < cmd >	pnpm < cmd >

• 更多命令和用法可以参考pnpm的官网：https://pnpm.io/zh/

这篇好文章是转载于：学新通技术网