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

代码共享方案

 ◼ 我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构:

     在以后的开发中我们就可以通过模块化的方式来封装自己的代码,并且封装成一个工具;

     这个工具我们可以让同事通过导入的方式来使用,甚至你可以分享给世界各地的程序员来使用;

◼ 如果我们分享给世界上所有的程序员使用,有哪些方式呢?

◼ 方式一:上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用;

     缺点是大家必须知道你的代码GitHub的地址,并且从GitHub上手动下载;

     需要在自己的项目中手动的引用,并且管理相关的依赖;

     不需要使用的时候,需要手动来删除相关的依赖;

     当遇到版本升级或者切换时,需要重复上面的操作;

◼ 显然,上面的方式是有效的,但是这种传统的方式非常麻烦,并且容易出错;

◼ 方式二:使用一个专业的工具来管理我们的代码

     我们通过工具将代码发布到特定的位置;

     其他程序员直接通过工具来安装、升级、删除我们的工具代码;

◼ 显然,通过第二种方式我们可以更好的管理自己的工具包,其他人也可以更好的使用我们的工具包。

包管理工具npm

◼ 包管理工具npm:

   Node Package Manager,也就是Node包管理器;

   但是目前已经不仅仅是Node包管理器了,在前端项目中我们也在使用它来管理依赖的包;

   比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等;

◼ 如何下载和安装npm工具呢?

 npm属于node的一个管理工具,所以我们需要先安装Node;

 node管理工具:https://nodejs.org/en/,安装Node的过程会自动安装npm工具;

◼ npm管理的包可以在哪里查看、搜索呢?

 https://www.npmjs.org/

 这是我们安装相关的npm包的官网;

◼ npm管理的包存放在哪里呢?

 我们发布自己的包其实是发布到registry上面的;

 当我们安装一个包时其实是从registry上面下载的包;

npm的配置文件

◼ 那么对于一个项目来说,我们如何使用npm来管理这么多包呢?

     事实上,我们每一个项目都会有一个对应的配置文件,无论是前端项目(Vue、React)还是后端项目(Node);

 这个配置文件会记录着你项目的名称、版本号、项目描述等;

 也会记录着你项目所依赖的其他库的信息和依赖库的版本号;

◼ 这个配置文件就是package.json

◼ 那么这个配置文件如何得到呢?

 方式一:手动从零创建项目,npm init –y

 方式二:通过脚手架创建项目,脚手架会帮助我们生成package.json,并且里面有相关的配置

常见的配置文件

常见的属性



可以使用npm install 自动根据package.json 的dependencies属性安装依赖

依赖的版本管理

  ◼ 我们会发现安装的依赖版本出现:^2.0.3或~2.0.3,这是什么意思呢?

  ◼ npm的包通常需要遵从semver版本规范:

   semver:https://semver.org/lang/zh-CN/

   npm semver:https://docs.npmjs.com/misc/semver

  ◼ semver版本规范是X.Y.Z:

   X主版本号(major):当你做了不兼容的 API 修改(可能不兼容之前的版本);

   Y次版本号(minor):当你做了向下兼容的功能性新增(新功能增加,但是兼容之前的版本);

   Z修订号(patch):当你做了向下兼容的问题修正(没有新功能,修复了之前版本的bug);

  ◼ 我们这里解释一下 ^和~的区别:

   x.y.z:表示一个明确的版本号;

   ^x.y.z:表示x是保持不变的,y和z永远安装最新的版本;

   ~x.y.z:表示x和y保持不变的,z永远安装最新的版本;

npminstall 命令

◼ 安装npm包分两种情况:
全局安装(global install): npm install webpack -g;
 项目(局部)安装(local install): npm install webpack
 ◼ 全局安装
全局安装是直接将某个包安装到全局:
比如全局安装yarn:
npm install yarn -g
 ◼ 但是很多人对全局安装有一些误会:
通常使用npm全局安装的包都是一些工具包:yarn、webpack等;
并不是类似于axios、express、koa等库文件;
所以全局安装了之后并不能让我们在所有的项目中使用axios等库;

项目安装

npminstall 原理

npminstall 原理图解析

package-lock.json解析

npm其他命令


◼ npm的命令其实是非常多的:

https://docs.npmjs.com/cli-documentation/cli
更多的命令,可以根据需要查阅官方文档

yarn工具

cnpm工具

npx工具

局部命令的执行

npm发布自己的包

pnpm

什么是pnpm呢?

硬链接和软连接的概念

硬链接和软连接的演练

pnpm到底做了什么呢?

pnpm创建非扁平的node_modules目录

pnpm的安装和使用

pnpm的存储store

posted @ 2024-10-26 09:49  韩德才  阅读(11)  评论(0编辑  收藏  举报