包管理工具学习
包管理工具 npm
- Node Package Manager，也就是 node 包管理器
- 但是目前已经不仅仅是 Node 包管理器了，在前端项目中我们也在使用它的管理依赖的包
- 比如 express、koa、react、react-dom、axios 等等
- npm 管理的包可以再官网查看搜索：
- npm 管理的包是存放在哪里：
- 我们发布自己的包其实是发布到 registry 上面的额
- 当我们安装一个包时其实是 registry 上面下载的包
项目配置文件 package.json
- 实际上，我们每一个项目都会有一个对应的配置文件，无论是前端项目还是后端项目
- 这个配置文件会记录这你项目的名称、版本号、项目描述
- 也会记录着你项目所依赖的其他库的信息和依赖库的版本号
- 这个配置文件在 Node 中就是 package. json
常见的属性
- 必须填写的属性：name、version
- name 是项目的名称
- version 是当前项目的版本号
- description 是描述信息，很多时候是作为项目的基本描述
- author 是作者相关的信息（发布时用到）
- license 是开源协议（发布时用到）
- private 属性：
- private 属性记录当前的项目是否是私有的
- 当值为 true 时，npm 是不能发布发的，这是防止私有项目或模块发布出去的方式
- main 属性
- 设置程序的入口
- 很多人会有疑惑，webpack 不是会自动找到程序的入口？
- 这个入口和 webpack 打包的入口并不冲突
- 他是在你发布一个模块的时候会用到的
- 比如我们使用 axios 模块 const axios=require ('axios')
- 实际上是找到对应的 main 属性查找文件的
- scripts 属性
- scripts 属性用于配置一些脚本命令，以键值对的形式存在
- 配置后我们可以通过 npm run 命令的 key 来执行这个命令
- npm start 和 npm run start 的区别是什么呢？
- 他们是等价的
- 对于常用的 start/test/stop/restart 等可以省略掉 run 直接通过 npm start 等方式运行
- dependencies 属性
- dependenies 属性是指定无论开发环境还是生成环境都需要依赖的包
- 通常是我们项目实际开发用到的一些库模块
- 与之对应的是 devDependencies
- devDependencies 属性
- 一些包在生产环境是不需要的，比如 webpack、babel
- 这个时候我们会通过 npm install webpacl --save-dev，将他安装到 devDependencies 属性中
- 那么在生产环境如何保证不安装这些包呢？
- 生成环境不需要安装时，我们需要通过 npm nstall --production 来安装文件的依赖
- engines 属性
- engines 属性用于制定 Node 和 NPM 的版本号
- 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错
- 事实上也可以制定所在的操作系统 os:[darwin, linux], 只是很少用到
- browserslist 属性
- 用于配置打包后的 JavaScript 浏览器的兼容情况
- 否则我们需要手动的添加 polyfills 来支持某些语法
- 也就是说它是为 webpack 等打包工具服务的一个属性
npm install 命令
项目安装
- 安装 npm 包分两种情况
- 全局安装 (global install)：npm install yarn -g
- 项目 (局部) 安装 (local install)：npm install
- 全局安装
- 全局安装是直接将某个包安装到全局
- 比如 yarn 的全局安装 npm install yarn -g
- 但是很多人对全局安装有一些误会
- 通常使用 npm 全局安装的包都是一些工具包：yarn、webpack 等
- 并不是类似于 axios、express、koa 等库文件
- 所以全局安装了之后并不能让我们在所有的项目中使用 axios 等库
- 项目安装会在当前目录下生产一个 node_modules 文件夹
- 局部安装分为开发时依赖和生产依赖
npm install 原理
- 执行 npm install 它背后帮助我们完成了一系列的操作
- 我们还会发现生成了一个 pacage-lock. json 的文件
- 从 npm 5 开始，npm 支持缓存策略（来自 yarn 的压力）
- npm install 会检测是否有 package-lock. json 文件：
- 没有 lock 文件：
- 分析依赖关系，这是因为我们可能会依赖其他的包，并且多个包之间会产生相同依赖的情况
- 从 registry 仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）
- 获取到压缩包后会对压缩包进行缓存（从 npm 5 开始）
- 将压缩包解压到项目的 node_modules 文件夹中（前面我们讲过，require 的查找顺序会在该包下面查找）
- 有 lock 文件
- 检测 lock 中包的版本是否和 package. json 中一致（会按照 semver 版本规范检测）
- 不一致，那额会重新构建依赖关系，直接会走顶层的流程
- 一致的情况下，会去优先查找缓存
- 没有找到，会从 registry 仓库下载，直接走顶层流程
- 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到 node_modules 文件夹中
- 检测 lock 中包的版本是否和 package. json 中一致（会按照 semver 版本规范检测）
- 没有 lock 文件：
npm 其他命令
- 卸载某个依赖包：
- npm uninstall package
- npm uninstall package --save-dev
- npm uninstall package -D
- 强制重新 build
- npm rebuild
- 清除缓存
- npm cache clean
- npm 的其他命令：
包管理工具 yarn
- yarn 是由 Fackbook、Google、Exponent 和 Tilde 联合退出了一个新的 JS 包管理工具
- yarn 是为了弥补 npm 的一些缺陷而出现的
- 早起的 npm 存在很多的缺陷，比如安装依赖速度很慢，版本依赖混乱等等一系列的问题
- 虽然从 npm 5 版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用 yarn
cnpm 工具
- 由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org 下载下来一些需要的包
- 查看 npm 镜像
- npm config get registry # npm config get registry
- 设置 npm 的镜像
- npm config set registry https://registry.npm.taobao.org
- 但是对于大多数来说。并不希望将 npm 镜像修改了
- 第一：不太希望随意修改 npm 原本从官方下来包的渠道
- 第二：担心某天淘宝的镜像挂了或者不维护了，又要改来改去
- 这个时候，我们可以使用 cnpm，并且将 cnpm 设置为淘宝的镜像
- npm instal -g cnpm --registry= https://registry.npm.taobao.org
- cnpm config get registry # https://r.npm.taobao.org
npx 工具
- npx 是 npm 5.2 之后自带的一个命令
- npx 的作用非常多，但是比较常见的是使用它来调用项目中某个模块的指令
- 我们以 webpack 为例
- 全局安装的是 webpack 5.1.3
- 项目安装的是 webpack 3.6.0
- 如果我在终端执行 webpack --verson 使用的是哪一个命令呢？
- 显示结果会是 webpack 5.1.3，事实上使用的是全局的，为什么呢？
- 原因非常简单，在当前目录下找不到 webpack 时，就会去全局找，并且执行命令
- 那么如何使用项目的 webpack，常见的是两种方式：
- 方式一：明确查找到 node_modules 下面的 ebpack
- 方式二：在 scripts 定义脚本，来执行 webpack
- 方式一：在终端中使用如下命令（在项目根目录下）
- ./node_modules/. bin/webpack --version
- 方式二：修改 package. json 中的 scripts
- webpack: webpack --version
- 方式三：使用 npx
- npx webpack --version
- npx 的原理非常简单，他会到当前目录的 node_modules/. bin 目录下查找对应的命令