原來我們做交互式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多了兩個優點：
Yarn有一個叫做yarn.lock的文件，用來鎖定依賴包的版本，在更新項目的時候，會先加載這些鎖定版本的包，無需開發做多余的操作就可以保持前后項目的一致性；
安裝依賴包時速度快，因為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是一個開源的前端打包工具
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 文件。
作者：瞧瞧以瞧瞧
鏈接：http://www.lxweimin.com/p/5311fb5652d5
