什么是NPM, Yarn, Babel, Webpack？

原来我们做交互式web时，最常用的是jQuery; 但随着我们深入学习web开发，需要了解这四种技术：NPM, Yarn, Babel和Webpack。

NPM和Yarn

• NPM是Node Package Manager的缩写，它是Node环境下用来管理包的工具，能够跟踪所有的包以及所用的版本号，使得开发可以很容易的增加或者删除依赖包；
• 所有的依赖包都被保存在一个叫“package.json”的文件中；
• 每种语言都有自己包管理器，PHP有Composer,Python有PyPi,Java有Gradle;
• npm会随着Node.js自动安装;

Yarn 是为了弥补 npm 的一些缺陷而出现的，跟NPM是一样的东西，不过比NPM多了两个优点：

1. Yarn有一个叫做yarn.lock的文件，用来锁定依赖包的版本，在更新项目的时候，会先加载这些锁定版本的包，无需开发做多余的操作就可以保持前后项目的一致性；
2. 安装依赖包时速度快，因为Yarn是并行的，NPM是顺序的；
   Yarn和npm命令对比

npm install === yarn 
npm install taco --save === yarn add taco
npm uninstall taco --save === yarn remove taco
npm install taco --save-dev === yarn add taco --dev
npm update --save === yarn upgrade

总之一句话，NPM和Yarn都是包管理器；

Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。
也可以用ES6或者ES7写代码，然后Babel将其转换为JS

    转码前
    input.map(item => item + 1);

    转码后
    input.map(function (item) {
      return item + 1;
    });

Webpack

Webpack是一个开源的前端打包工具；
Webpack的一些特性：

• Hot Reloading - 开发过程中，让改动快速显示在web上，不需要开发重新部署代码和刷新网页
• Tree Shaking - 自动清除项目中无用的代码；
  最后插曲，在用webpack做开发时，我们会遇到SASS, SCSS，那什么是SASS, SCSS？
  据我们所知，CSS不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。
  很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
  SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。