03_前端包管理工具详解.pdfVIP

包管理工具详解

npm、yarn、cnpm、npx、pnpm

王红元coderwhy

目录

1npm包管理工具

content

2package配置文件

3npminstall原理

4yarn、cnpm、npx

5发布自己的开发包

6pnpm使用和原理

coderwhy代码共享方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

coderwhy包管理工具npm

◼包管理工具npm：

NodePackageManager，也就是Node包管理器；

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

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

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

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

node管理工具：/en/，安装Node的过程会自动安装npm工具；

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

/

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

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

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

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

coderwhynpm的配置文件

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

事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）；

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

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

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

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

方式一：手动从零创建项目，npminit–y

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

coderwhy常见的配置文件

VueCLI4创建的Vue3项目create-react-app创建的react17项目

npminit#创建时填写信息

npminit-y#所有信息使用默认的

coderwhy常见的属性

◼必须填写的属性：name、vers