加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ?

发布时间:2019-06-07 05:23:18 所属栏目:优化 来源:佚名
导读:副标题#e# 一位用不好包管理器的前端,是一个入门级前端,一个用不好 webpack 的前端,是一个初级前端 三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题! 在 JavaScript 编写中,我们尽量不要定义全局变量,封装函数尽量不要有副作用,因为全部变
副标题[/!--empirenews.page--]

一位用不好包管理器的前端,是一个入门级前端,一个用不好 webpack 的前端,是一个初级前端

前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ?

三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题!

在 JavaScript 编写中,我们尽量不要定义全局变量,封装函数尽量不要有副作用,因为全部变量的查询时间会比局部变量的查询慢,更是考虑在Node的环境中无法被垃圾回收的问题

老规矩 先看原理

npm

  • npm 是Node.js 能够如此成功的主要原因之一。npm 团队做了很多的工作,以确保 npm 保持向后兼容,并在不同的环境中保持一致。
  • npm是围绕着 语义版本控制(semver)的思想而设计。
  • 给定一个版本号:主版本号.次版本号.补丁版本号, 以下这三种情况需要增加相应的版本号:
  • 主版本号: 当API发生改变,并与之前的版本不兼容的时候
  • 次版本号: 当增加了功能,但是向后兼容的时候
  • 补丁版本号:当做了向后兼容的缺陷修复的时候
  • npm 2 会安装每一个包所依赖的所有依赖项。如果我们有这么一个项目,它依赖项目A,项目A依赖项目B,项目B依赖项目C,那么依赖树将如下所示:

前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ?

  • 这个结构可能会很长。这对于基于Unix的操作系统来说只不过是一个小烦恼,但对于Windows来说却是个破坏性的东西,因为有很多程序无法处理超过260个字符的文件路径名。
  • npm 3采用了扁平依赖关系树来解决这个问题,所以我们的3个项目结构现在看起来如下所示:

存了已经下载的每个版本的压缩包。本地缓存的内容可以通过npm cache ls命令进行查看。本地缓存的设计有助于减少安装时间。

前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ?

  • 这样,一个原来很长的文件路径名就从./node_modules/package-A/node_modules/package-B/node-modules/some-file-name-in-package-c.js变成了/node_modules/some-file-name-in-package-c.js。
  • 这种方法的缺点是,npm必须首先遍历所有的项目依赖关系,然后再决定如何生成扁平的node_modules目录结构。npm必须为所有使用到的模块构建一个完整的依赖关系树,这是一个耗时的操作,是npm安装速度慢的一个很重要的原因。
  • 想当然的以为每次运行npm install命令时,NPM都得从互联网上下载所有内容。
  • 但是,npm是有本地缓存的,它保存了已经下载的每个版本的压缩包。本地缓存的内容可以通过npm cache ls命令进行查看。本地缓存的设计有助于减少安装时间。

cnpm

  • cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。
  • npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,于是淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
  • 官方地址:http://npm.taobao.org
  • 安装:npm install -g cnpm --registry=https://registry.npm.taobao.org

Yarn

  • Yarn一开始的主要目标是解决上一节中描述的由于语义版本控制而导致的npm安装的不确定性问题。虽然可以使用npm shrinkwrap来实现可预测的依赖关系树,但它并不是默认选项,而是取决于所有的开发人员知道并且启用这个选项。
  • Yarn采取了不同的做法。每个yarn安装都会生成一个类似于npm-shrinkwrap.json的yarn.lock文件,而且它是默认创建的。除了常规信息之外,yarn.lock文件还包含要安装的内容的校验和,以确保使用的库的版本相同。
  • yarn是经过重新设计的崭新的npm客户端,它能让开发人员并行处理所有必须的操作,并添加了一些其他改进。
  • 运行速度得到了显著的提升,整个安装时间也变得更少
  • 像npm一样,yarn使用本地缓存。`与npm不同的是,yarn无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式`。
  • 允许合并项目中使用到的所有的包的许可证
  • 通常情况下不建议通过npm进行安装。npm安装是非确定性的,程序包没有签名,并且npm除了做了基本的SHA1哈希之外不执行任何完整性检查,这给安装系统程序带来了安全风险。(作者曾经在一个上百个依赖包的项目中使用npm丢包过,代价非常大,泪水不自觉掉下来)

首先看一次非常失败的包下载 竟然是从全局读取的资源(不配置webpack别名是因为就这一个路径这么长)

前端核心工具:yrn、npm、cnpm三者如何优雅的在一起使用 ?

首先我们从原理入手 ,我们使用npm init,yarn init,cnpm init 的时候 发生了什么 ?

  • 生成package.json文件
  • json文件内部声明初始的版本信息、作者信息等,如果你是需要上传到npm上作为命令行工具,应该配置bin等声明入口字段

那么当我们使用npm i, yarn add,cnpm i操作时候会发生什么 ?

  • 首先会根据你的命令行后缀是否加了 -g或者global判断,下载的包是放在全局的环境,还是当前package.json文件对应的node_module文件夹目录下(这点尤其重要,有人出BUG,就是因为在用npm, cnpm时候没有注明添加的是全局依赖还是本地依赖,导致json文件上没有对应的包名,项目永远起不来)
  • 然后根据你的指令--save或者-D、--save -dev判断是开发依赖还是线上依赖,其实这点在yarn上没有问题,因为yarn有自己的一套检查包完整性的机制,不会丢包,还会自动判断添加依赖,出bug一般是cnpm和npm,没有明确-g或者--save,npm只有检查程序员签名的机制,没有检查包完整性的机制,也不会自动添加依赖到json文件,那么就会出现丢包的假象,所以建议主要使用 yarn

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读