前端开发工具集(一):包管理工具(yarn,npm)

1,071 阅读3分钟

这是一个新系列的文章,包含了前端开发过程中需要的工具集,会包含之前介绍过的文章,还有计划中的,具体包括

  1. 包管理工具(package manager):yarn,npm(本文)
  2. 编译工具(compiler):babel
  3. 版本管理系统(version control system):git
  4. 代码规范工具(code formatter):eslint,prettier,git hooks
  5. 模块打包器(module bundler ):webpack.rollup,parcel,browserify
  6. 任务构建工具(task-runner):grunt,gulp,npm script
  7. 前端框架(framework):vue,react
  8. 持续集成工具
  9. mock和单元测试
  10. 日志系统

本文会先介绍

  • 包管理的相关概念
  • 包管理工具yarn和npm的异同
  • 两者的其他功能

其中2.4章和第3章待进一步补充。

1 包管理

一个包(package)是一个用package.json描述的文件。

一个模块(module)是在node_modules目录下任意可以被node.js用require()函数加载的文件或目录。

1.1 semver

semver,即semantic versioner,是npm包的版本验证工具,Semantic Versioning using npm中解释的好一些。

一个版本号包含三个数字x.y.z,比如0.2.3,其中

  • 第一个表示major version,版本升级用于不兼容的api修改
  • 第二个表示minor version,版本升级用于向后兼容的功能增加
  • 第三个表示patch version,版本升级用于bug fix。

版本号前可以包含以下符号

  • ^ 更新时最左侧非0的版本位固定,其他版本位增加
  • ~ 如果minor指定允许patch修改,否则允许minor修改
  • >
  • >=
  • <=
  • <
  • =
  • - 表示范围,比如2.1.0 - 2.6.2
  • || 表示并集。比如< 2.1 || > 2.6,可用空格表示交集

1.2 package.json

package.json是一个package的manifest文件,包含一个特定package需要描述的所有内容,在yarn和npm中共用。 其中包括以下选项(并不是全部)

  • name 包名
  • version 版本号,应遵守semver的规范
  • description 描述字符串,用于搜索
  • keywords 字符串数组,用于搜索
  • homepage 项目主页
  • bugs 提bug地址
  • license 协议
  • author, contributors 作者和贡献者信息
  • main 使用require引入时指定程序的入口文件
  • module 使用import引入时指定的入口文件,如果没有则按main字段,非规范,但在某些library中使用
  • browser 当用于浏览器时用来替代main字段
  • repository 源码仓库地址
  • scripts 包含script命令
  • dependencies 生产环境依赖,可以为以下格式
    • semver
    • semver的版本位用x表示
    • http://...
    • *
    • git... git url
    • user/repo github url
    • tag
    • path/path/path
  • devDependencies 开发依赖
  • peerDependencies 用来表示当需要本包时还需要在使用环境中安装另外的包(虽然本包并没有require它)
  • bundledDependencies/bundleDependencies 包名组成的数组,当使用npm pack 打包时,属性中的包会一起被打包
  • optionalDependencies 可选依赖,会覆盖dependencies指定的包
  • engines 指定运行的node.js版本
  • private 当指定为true则不会被发布

1.3 lockfiles

为了保证跨机器依赖下载的一致性,yarn提供了yarn.lock,npm提供了package-lock.json,都为自动生成,格式稍有不同。

1.4 registry

yarn和npm都有自己的默认镜像,但是由于某些原因可以将其修改为国内的镜像,比如https://registry.npm.taobao.org

npm config set registry http://registry.npm.taobao.org
      
yarn config set registry https://registry.npm.taobao.org

2 npm vs yarn

本章参考了NPM vs. Yarn: Which Package Manager Should You Choose?部分内容。

npm,即Node Package Manager,首次发布于2010年,是node.js默认的包管理工具。
yarn 由facebook于2016年发布,在当时比npm性能和安全性更好。

现在对两者做一下比较

2.1 流行度

根据npm trends,npm下载量较多。但是活跃程度(star和issues)yarn明显高于npm.

2.2 性能

yarn的出现就是为了解决npm的性能问题的,后来npm改版提高了一些速度,但是两者之间还有一定差距

2.3 常用命令对比

2.4 下载的具体实现

npm下载过程
yarn 下载过程

3 npm和yarn其他功能


完结撒花