03-包管理工具

包管理工具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