一、代码共享方案
我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构：
在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具；
这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用；
那如果我们分享给世界上所有的程序员使用，有哪些方式呢？
二、包管理工具npm
包管理工具npm：
- Node Package Manage，也就是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上面的；
- 当我们安装一个包时其实是从register上面下载的包；
npm下载的包存放在哪里？
- 通过npm install xxx下载包，会自动生成一个node_modules文件夹，该目录下面会有一个dayjs文件。
- node_modules里面的dayjs目录下，有个package.json，里面有个配置 "main": "dayjs.min.js",此时如果我们想要导入dayjs的话，也就是导出 "dayjs.min.js"。
三、npm的配置文件
那么对于一个项目来说，我们如何使用npm来管理这么多包呢？
- 事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）；
- 这个配置文件会记录着你项目的名称、版本号、项目描述等；
- 也会记录着你项目所依赖的其他库的信息和依赖库的版本号；
这个配置文件就是package.json
那么这个配置文件如何得到呢？
- 方式一：手动从零创建项目，npm init -y
- 方式二：通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置。
四、常见的配置文件
五、常见的属性
必须填写的属性：name、 version
- name是项目的名称；
- version是当前项目的版本号；
- description是描述信息，很多时候是作为项目的基本描述；
- author是作者相关信息（发布时用到）；
- license是开源协议（发布时用到）；
private属性：
- private属性记录当前的项目是否是私有的；
- 当值为true时，npm是不可能发布它的，这是防止私有项目或模块发布出去的方式；
main属性：
设置程序的入口。
- 比如我们使用axios模块 const axios = require("axios")；
- 如果有main属性，实际上是找到对应的main属性查找文件的；
scripts属性 ：
- scripts属性用于配置一些脚本命令，以键值对的形式存在；
- 配置后我们可以通过npm run命令的key来执行这个命令；
- npm start和npm run start的区别是什么？它们是等价的；对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；自定义的key不能省略run哈。
dependencies属性
-
dependencies属性是指定无论开发环境还是生成环境都需要依赖的包；
-
通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等；
-
与之对应的是devDependencies；
-
用法：平常我们在把自己的代码发给其他的同事的时候，不会把node_module这个文件打包发给同事，因为这个文件包太大了，那同事拿到这个项目之后没有这些依赖咋办。在package.json里面有个dependencies，里面有我们安装的依赖包，然后在命令行直接npm install 就行，后面什么都不跟，就会默认下载dependencies里面标明的包。是不是很方便。
-
devDependencies属性
-
一些包在生产环境是不需要的，比如webpack、babel等；
-
这个时候我们会通过 npm install webpack --save-dev，将它安装到devDependencies属性中；
peerDependencies属性
- 还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；
- 比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom；
注意：
-
如果开发环境和生产环境都会依赖某个包的话比如说是axios，那我们该去怎么安装呢？
npm install axios --save ， --save可以省略
-
那如果我们只是在开发环境需要用到的库，该去怎么安装呢？举个例子我们假如需要安装babel（什么是babel，babel是对我们代码进行转换的，所以生产环境不需要用到babel），
npm install babel --save-dev 或者这么写 npm install babel -D
六、依赖的版本管理
◼ 我们会发现安装的依赖版本出现：^2.0.3或~2.0.3，这是什么意思呢？
◼ npm的包通常需要遵从semver版本规范：
semver：语义化版本 2.0.0 | Semantic Versioning
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永远安装最新的版本；
◼ engines属性
engines属性用于指定Node和NPM的版本号；
在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；
◼ browserslist属性
用于配置打包后的JavaScript浏览器的兼容情况，参考；
否则我们需要手动的添加polyfills来让支持某些语法；
也就是说它是为webpack等打包工具服务的一个属性（这里不是详细讲解webpack等工具的工作原理，所以不再给出详情）；
七、npm install 命令
安装npm包分两种情况：
全局安装（global install）： npm install webpack -g;
项目（局部）安装（local install）： npm install webpack
◼ 全局安装
全局安装是直接将某个包安装到全局：
比如全局安装yarn：
◼ 但是很多人对全局安装有一些误会：
通常使用npm全局安装的包都是一些工具包：yarn、webpack等；
并不是类似于 axios、express、koa等库文件；
所以全局安装了之后并不能让我们在所有的项目中使用 axios等库；
（1）项目安装
项目安装会在当前目录下生成一个 node_modules 文件夹，我们之前讲解require查找顺序时有讲解过这个包在什么情况下被 查找；
◼ 局部安装分为开发时依赖和生产时依赖：
# 默认安装开发和生产依赖
npm install axios
npm i axios
# 开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack –D
# 根据package.json中的依赖包
npm install
（2）npm install 原理
（3）package-lock.json
（4）npm其他命令
八、yarn工具
npm install yarn -g 下载yarn
yarn --version 查看yarn版本号
yarn init 或者 yarn init -y 生成package.json文件
安装包怎么安装？yarn add axios dayjs
yarn怎么配脚本？其实跟npm差不多
九、cnpm工具
如果我们不设置npm的镜像，怕以后淘宝镜像有问题了不能下载了，后面还得重新设置npm的镜像，那这个时候我们就可以使用cnpm，用之前先安装一下。
npm install cnpm -g 全局安装
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装的时候去改变镜像地址
cnpm config set registry=https://registry.npm.taobao.org 安装好了以后去改变镜像地址
这个时候npm所对应的仓库就是官方仓库，cnpm所对应的仓库就是你配的淘宝镜像服务器。
