学习笔记 - 2018年10月第一周 - 包管理工具

Posted on | In

NPM和YARN区别

NPM和YARN是目前js中比较流行的包管理工具，经常在项目中使用来负责管理依赖。但是光会用却不知道原理，那今天就了解一下NPM和YARN的区别和优缺点。

速度

YARN的速度较NPM更快一点，因为它采用并行安装的方式，NPM按顺序一个一个安装，YARN则一锅端并行安装，不过在中国大陆因为某些你懂得原因，还是用NPM淘宝镜像快一点

离线模式

YARN相较NPM多了一个离线模式，安装过的软件包不用重新下载

输出简洁

YARN在命令行里的输出信息相对比较简洁，并且结合了emoji看起来更直观一点

安装中断

安装过程中如果一个包失败，NPM会导致整个安装失败，而YARN则会自动尝试重新安装

文件大小

YARN的文件包相比NPM更小了点

命令行

相较于NPM INSTALL/UNINSTALL, YARN使用yarn add/remove, 看起来感觉更接地气了一点

总得来说YARN似乎优点多多，毕竟是几个大厂Facebook + Google等一起开发的

npm run build背后发生了什么

  1. 执行npm run build命令的时候，会执行package.json文件里的script下对应的脚本，可以看到它是”build”: “node build/build.js”

  2. 运行build.js内的脚本，设置环境为’production’, 然后引入终端显示用的旋转插件，引入用于删除文件夹用的插件以及终端文字颜色插件

  3. Webpack构建打包，同时在终端显示信息（开始，build完成之类），如果出错则显示报错

js css压缩原理

本质上是把多个js和css整合成一个，并且删去了空格，注释，换行，tab之类的东西，这也就是为什么我在浏览器console里查看js的时候，经常看到的是一堆拥挤的代码。

我们在写js的时候，会把变量名取得更加有意义，比如‘是否为默认’ = ‘isDefault’, 但是对于机器来说，变量是isDefault或者a都一样，所以webpac之类的打包工具在压缩js的时候会把变量名都替换成更小体积的字符。

1
var isDefault = true

压缩成

1
var a=true

js继承 & 原型链

这个topic看了一圈觉得并不是很懂，个人感觉还是需要从js的基础往上看，因为平时工作中只是用到js的各种api，这里建议至少先弄懂es6和es5的区别, 这部分知识需补足。
阮一峰的js教程不错：https://wangdoc.com/javascript/index.html