包管理工具npm

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

https://www.npmjs.com/

2.npm管理的包存放在哪里呢

  • 我们发布自己的包其实是发布到registry上面的；
  • 当我们安装一个包时其实是从registry上面下载的包

项目配置文件

这个配置文件在Node环境下面（无论是前端还是后端）就是package.json

常见的属性

  • 必须填写的属性：name、version
  • name是项目的名称
  • version是当前项目的版本号
  • description是描述信息，很多时候是作为项目的基本描述
  • author是作者相关信息（发布时用到）
  • license是开源协议（发布时用到）
  • private属性
  • private属性记录当前的项目是否是私有的
  • 当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式；
  • main属性
  • 设置程序的入口
  • 发布一个模块的时候会用到的
  • scripts属性
  • scripts属性用于配置一些脚本命令，以键值对的形式存在
  • 配置后我们可以通过 npm run 命令的key来执行这个命令
  • npm start和npm run start的区别是什么
  • 对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行
  • dependencies属性
  • dependencies属性是指定无论开发环境还是生成环境都需要依赖的包
  • 通常是我们项目实际开发用到的一些库模块
  • devDependencies属性
  • 一些包在生成环境是不需要的，比如webpack、babel等；
  • 这个时候我们会通过 npm install webpack --save-dev，将它安装到devDependencies属性中
  • engines属性
  • engines属性用于指定Node和NPM的版本号
  • 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错
  • 事实上也可以指定所在的操作系统 “os” : [ “darwin”, “linux” ]，只是很少用到；
  • browserslist属性
  • 用于配置打包后的JavaScript浏览器的兼容情况，参考
  • 否则我们需要手动的添加polyfills来让支持某些语法
  • 也就是说它是为webpack等打包工具服务的一个属性

版本管理的问题

npm的包通常需要遵从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永远安装最新的版本

npm install 原理

npm install会检测是有package-lock.json文件：

  • 没有lock文件
  • 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况
  • 从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）
  • 获取到压缩包后会对压缩包进行缓存（从npm5开始有的）；
  • 将压缩包解压到项目的node_modules文件夹中
  • 有lock文件
  • 检测lock中包的版本是否和package.json中一致
  • 不一致，那么会重新构建依赖关系，直接会走顶层的流程；
  • 一致的情况下，会去优先查找缓存
  • 没有找到，会从registry仓库下载，直接走顶层流程
  • 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中

package-lock.json

  • name：项目的名称
  • version：项目的版本
  • lockfileVersion：lock文件的版本
  • requires：使用requires来跟着模块的依赖关系；
  • dependencies：项目的依赖
  • 当前项目依赖axios，但是axios依赖follow-redireacts；
  • axios中的属性如下
  • version表示实际安装的axios的版本
  • resolved用来记录下载的地址，registry仓库中的位置；
  • requires记录当前模块的依赖；
  • ntegrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

npm其他命令

  • 卸载某个依赖包：npm uninstall package
  • 强制重新build：npm rebuild
  • 清除缓存：npm cache clean

yarn

  • yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具
  • yarn 是为了弥补 npm 的一些缺陷而出现的
  • 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题
  • 虽然从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn

cnpm

  • 查看npm镜像：npm config get registry
  • 我们可以直接设置npm的镜像：npm config set registry https://registry.npm.taobao.org
  • 但是对于大多数人来说（比如我），并不希望将npm镜像修改了：
  • 不太希望随意修改npm原本从官方下来包的渠道
  • 担心某天淘宝的镜像挂了或者不维护了，又要改来改去；
  • 这个时候，我们可以使用cnpm，并且将cnpm设置为淘宝的镜像
  • npm install -g cnpm --registry=https://registry.npm.taobao.org

npx工具

npx是npm5.2之后自带的一个命令。

npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令

npx webpack  --version