00. 代码共享方案
模块化的编程思想，支持将代码划分成一个个小的、独立的结构。
我们可以通过模块化的方式来封装自己的代码，将之封装成一个工具；
这个工具我们可以让同事通过导入的方式来使用，甚至也可以分享给世界各地的程序员来使用；
假如，我们要将某个工具分享给世界上所有的程序员使用，有哪些方式呢？
-
方式一：上传到GitHub上、其他程序员通过GitHub下载我们的代码，手动引用；
-
缺点：大家必须知道你的代码GitHub的地址，并且从GitHub上手动下载；
-
需要在自己的项目中手动引用，并且管理相关的依赖；
-
不需要使用该工具的时候，需要手动删除相关的依赖；
-
当遇到版本升级或者切换时，需要重复上面的操作；
-
方式二：设计一个专业的工具，来管理我们的代码，实现代码的上传、下载、更新等。
显然，方式一是有效的，但是这种传统的方式非常麻烦，并且容易出错；第二种方式我们可以更好的管理自己的工具包，其他人也可以更好的使用我们的工具包。
因此，包管理工具应运而生，通过工具将代码发布到特定的位置，其他程序员直接通过该工具来安装、升级、删除我们的工具代码；
几乎所有的编程语言都有自己的包管理工具。
01. npm工具
包管理工具npm：Node Package Manager，也就是Node包管理器；
npm管理的包存放在哪里呢？
我们发布自己的包其实是发布到registry上面的；
当我们安装一个包，也是从registry上面下载该包；
npm目前已经不仅仅是Node包管理器了，在前端项目中，我们也在使用它来管理包的依赖关系；
比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；
如何下载和安装npm工具呢？
npm属于node的一个管理工具，安装Node时会自动安装；
Node官网：https://nodejs.org/en/
npm官网：https://www.npmjs.org/
1.1 package.json
事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）；
这个配置文件会记录着你项目的名称、版本号、项目描述等；
也会记录着你项目所依赖的其他库的信息和依赖库的版本号；
对于Node来说，这个配置文件就是package.json。
在python中，是requirements.txt。
那么这个配置文件如何得到呢？
-
方式一：手动创建。（不推荐，需要手动书写配置）
-
方式二：npm初始化，
npm init –y -
方式三：通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置。
1.1.1 普通属性
-
name：项目的名称；
-
version：当前项目的版本号；
-
description：描述信息，很多时候是作为项目的基本描述；
-
author：作者相关信息（发布时用到）；
-
license：开源协议（发布时用到）；
-
private：当前项目是否为私有；当值为true时，npm是不能发布它的。
1.1.2 main属性
main属性是程序的入口。
导入某个包时，程序会先找寻目录下的package.json文件，读取该文件中的main值。
再根据该值的去寻找对应的入口文件。
1.1.3 scripts属性
scripts属性用于配置一些脚本命令，以键值对的形式存在；
配置后我们可以通过 npm run 命令的key来执行这个命令；
npm start和npm run start的区别是什么？它们其实是等价的；对于常用的 start、 test、stop、restart，
都可以省略掉run直接通过 npm start等方式运行；
1.1.4 dependencies属性
dependencies属性是指：无论开发环境还是生成环境都需要依赖的包；
当我们需要传递项目的源代码时，
比如，协同开发，同事需要下载我的代码，在我代码的基础上继续开发。
此时，如果此项目安装的第三包很多的话，整个项目的体积可能会很大。
为了提供传输的效率，对于noe_modules文件夹，我们是不会进行压缩和传输的，
同事拿到源代码，只需要根据dependencies属性记录的包的信息，自己去安装即可。
而安装也非常简单，只需要执行
npm install，Node即会自动安装相应的包。常见的模块vue、vuex、vue-router、react、react-dom、axios等等。
1.1.5 devDependencies属性
一些包只是在开发环境中使用，而在生产环境是不需要的，比如webpack、babel等；
这一些包的信息就会记录在devDependencies中。
这个时候我们会通过 npm install webpack --save-dev，将它安装到devDependencies属性中；
1.1.6 peerDependencies属性
还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；
比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom；
peerDependencies属性便是用于记录这种依赖关系。
1.1.7 engines属性
engines属性用于指定Node和npm的版本号；
-
在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；
-
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；
1.1.8 browserslist属性
用于配置打包后的JavaScript浏览器的兼容情况，不常用；
1.1.9 关于版本号
我们会发现，安装的依赖版本有时候会出现类似^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永远安装最新的版本；
1.2 npm install命令
安装npm包分两种情况：局部安装与全局安装。
局部安装，也叫项目安装。
在某个路径下执行 npm install 包名称，就会在该路径下生成node_modules文件夹，并将该包下载到里面。
而对于某些包工具，我们可能每个项目都会用到，比如yarn。此时我们便可以使用全局安装。
npm install webpack -g
# 或者
npm install webpack --location=global
对于全局安装的包，会自动添加到环境变量。
通常使用npm全局安装的包都是一些工具包：yarn、webpack等；
局部安装又分为开发时依赖和生产时依赖：
# 默认安装开发和生产依赖
npm install axios
npm i axios
# 开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack –D
# 根据package.json，安装所有依赖包
npm install
1.3 npm install原理
从npm5开始，npm支持缓存策略。
我们使用npm install命令去安装某个包的时候，并不是直接去registry仓库下载的，而是会先检测一下当前目录是否有package-lock.json文件。
没有lock文件
-
分析依赖关系，因为欲下载的包可能会依赖其他的包，并且多个包之间可能会产生相同依赖的情况；
-
从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）；
-
获取到压缩包后会对压缩包进行缓存（从npm5开始有的）；
-
将压缩包解压到项目的node_modules文件夹中。
有lock文件
-
检测lock中包的版本是否和package.json中一致（会按照semver版本规范检测）；
-
不一致，那么会重新构建依赖关系，直接会走顶层的流程；
-
一致，会去优先查找缓存
-
没有找到，会从registry仓库下载，直接走顶层流程；
-
查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中；
1.4 package-lock.json
-
name：项目的名称；
-
version：项目的版本；
-
lockfileVersion：lock文件的版本；
-
requires：使用requires来跟踪模块的依赖关系；
-
dependencies：项目的依赖
-
当前项目依赖axios，但是axios依赖follow-redireacts；
-
axios中的属性如下：
-
version表示实际安装的axios的版本；
-
resolved用来记录下载的地址，registry仓库中的位置；
-
requires/dependencies记录当前模块的依赖；
-
integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；
早期的版本中，如果一个包依赖另一个包，是使用requires来记录的，后面才改成使用dependencies来记录。
所以在lock文件中，会有requires。
1.5 npm其他命令
卸载某个依赖包：
npm uninstall package
npm uninstall package --save-dev npm uninstall package -D
强制重新build
npm rebuild
清理缓存
npm cache clean
官方文档
02. yarn工具
yarn是另一个node包管理工具，由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具；
yarn 是为了弥补 早期npm 的一些缺陷而出现的；
早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；
虽然从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn。
yarn本质上是一个包，可以通过npm安装。
npm install yarn -g # 全局安装
03. cnpm工具
npm的配置中，默认设置是从官网下载包的。
# 查看npm镜像：
npm config get registry
但由于一些特殊的原因，
某些情况下我们从 https://registry.npmjs.org下载包时网速会很慢，甚至崩溃。
这时，我们就可以设置npm的国内源。
# 设置npm使用淘宝源：
npm config set registry https://registry.npm.taobao.org
但是对于大多数人来说，他们可能并不希望修改npm镜像，
毕竟，官方是第一渠道，其次，如果国内镜像挂了或者不维护了，又需要修改。
这个时候，我们可以使用cnpm，并且将cnpm设置为淘宝的镜像。
cnpm的“c”可能是China的意思。
同样的，cnpm本质上也是一个包。
可以通过npm来安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm config get registry # https://r.npm.taobao.org/