前言

閱覽很多的開源專案會見到很多的包，增長不少見識。這些見識沉澱下來，才會成為實力。

類目

1. VSCode語法提示

1.1 types

例如：
@types/node 就提供了 node 的常用的語法提示。

npm install @types/node --save-dev

然後，在 VSCode 中，引用 node 的元件，就可以獲得智慧提示：

var http = require( 'http' );
http.  // 按下這個“.”的時候， VSCode 就會給你語法提示

依次類推，如果需要 cheerio 這個 npm 包的智慧提示，可以：

npm install @types/cheerio
 

可以在 淘寶的 NPM 映象 中搜索包名，看看是否有以 @types 開頭的包，如果有，就放心的用吧！

2. 構建工具

構建工具的作用，是對程式碼進行自動化的語法檢查、編譯、壓縮、測試、打包。常見的有 Gulp , Grunt 。

2.1. grunt

這是一個歷史悠久的構建工具，比 Gulp 要早。官方對它的定義是“ The JavaScript Task Runner ”，即“一個 JavaScript 任務執行器”。因為我們常用它來做打包，和自動化構建的工作，所以我們也說它是一個自動化的構建工具。

cnpm install grunt --save-dev
 

2.1.1 grunt-cli

這個是grunt的命令列介面，使用 grunt 命令前，需要安裝本包。

cnpm install grunt-cli --save-dev

2.1.2 grunt-babel

應用於 grunt 的 babel ，和babel同源。

cnpm install grunt-babel --save-dev

2.1.3 grunt-compare-size

對比兩個檔案，最後一個是會被壓縮的檔案

執行效果如下，會在 console 打印出資訊：

   raw     gz Sizes                                                            
267860
 
  79363 dist/jquery.js                                                   
 86824  30057 dist/jquery.min.js                                               
   raw     gz Compared to last run                                             
   +32    +21 dist/jquery.js                                                   
   +18     +7 dist/jquery.min.js                                               

2.1.4 grunt-contrib-uglify

本包的功能是將 JavaScript 程式碼壓縮，刪掉註釋，替換掉變數名，最終剩下非常緊湊精小的 js 檔案。

cnpm install grunt-contrib-uglify --save-dev

2.1.5 grunt-contrib-watch

Run predefined tasks whenever watched file patterns are added, changed or deleted
當符合要求的檔案被建立、修改或刪除後，執行預定的任務

cnpm install grunt-contrib-watch --save-dev

2.1.6 grunt-eslint

Validate files with ESLint
使用 ESLint 對檔案程式碼風格進行檢查

cnpm install grunt-eslint --save-dev

Generate a list of authors from the git history.
從 Git 歷史資料生成貢獻者列表

cnpm install grunt-git-authors --save-dev

2.1.8 grunt-jsonlint

Validate JSON files from grunt.
執行 grunt 校驗 JSON 檔案。

cnpm install grunt-jsonlint --save-dev

2.1.9 grunt-newer

Run Grunt tasks with only those source files modified since the last successful run.
只有在檔案相比上次變化的情況下，才會執行相應的 grunt 任務

cnpm install grunt-newer --save-dev

2.1.10 load-grunt-tasks

Load multiple grunt tasks using globbing patterns
一行命令載入多個 grunt 任務

cnpm install load-grunt-tasks --save-dev

3. 編譯工具（TypeScript，ES6，ES5）

編譯工具將一種程式碼編譯成另一種程式碼，根據目的的不同有同類別降級編譯和跨類別編譯。

其中，TypeScript編譯成ES6、ES5就屬於跨類別編譯，是從TypeScript語言編譯成了JavaScript語言（的不同版本）

而ES6 到 ES5 就是降級編譯，將新標準的程式碼，編譯成舊標準的程式碼。

3.1 babel

一個將 ES6 編譯成 ES5 的工具
Turn ES6 code into readable vanilla ES5 with source maps

cnpm install babel --save-dev

3.1.1 babel-preset-es2015

支援將 ES6 的 JavaScript 轉換為 ES5 的 JavaScript 的外掛

cnpm install babel-preset-es2015 --save-dev

4. 測試工具

測試工具一般用來檢測程式碼中是否有問題，並給出提示。問題包括語法問題，程式碼風格問題等

4.1 eslint

（待續）

4.1.1 eslint-config-*

這個命名規範的包，表示各種 eslint 程式碼風格規則。比如 eslint-config-jquery 表示這個外掛包是 jquery 團隊的程式碼風格規範。

4.2 qunitjs

An easy-to-use JavaScript Unit Testing framework.
一個易用的JavaScript單元測試框架

cnpm install qunitjs --save-dev

4.2.1 qunit-assert-step

A QUnit plugin for asserting the proper sequence in which the code should execute.
用來檢查程式程式碼的執行順序是否正確。

cnpm install qunit-assert-step --save-dev

5. 其它

有一些其它的包，不好分類，先放著這裡等待以後整理

5.1 cross-spawn

它解決了 nodejs 在跨平臺執行命令方面存在的問題，例如在 Windows 下面不能執行 dir ， del 命令等問題

cnpm install cross-spawn --save-dev

5.2 jsdom

A JavaScript implementation of the DOM and HTML standards
使用JavaScript對DOM和HTML的標準進行了實現

這個和 phantomjs 的區別在於， phantomjs 使用了 webkit 核心去載入頁面，而 jsdom 是自己解析 html 。

比較可以！

cnpm install jsdom --save-dev

5.3 phantomjs

Headless WebKit with JS API
提供了JS開發介面的無UIWebKit瀏覽器

這個除了可以用來進行爬蟲抓取，網頁截圖外，還可以做自動化網頁測試。比jsdom還要強大，但是更慢一些。

cnpm install phantomjs --save-dev

5.4 phantomjs-prebuilt

An NPM installer for PhantomJS, headless webkit with JS API.

和前面的一樣，是前面的新版本。

5.5 gzip-js

GZIP in pure JavaScript (works in the browser)
GZIP 是純瀏覽器端進行 GZIP 壓縮，建議不要用於服務端。

cnpm install gzip-js --save-dev

5.6 native-promise-only

Native Promise Only: A polyfill for native ES6 Promises only, nothing else.
在瀏覽器上支援 Promise 特性

cnpm install native-promise-only --save-dev

5.7 q

A library for promises (CommonJS/Promises/A,B,D)
支援Promise

cnpm install q --save-dev

5.8 requirejs

Node adapter for RequireJS, for loading AMD modules. Includes RequireJS optimizer
requirejs介面卡節點，載入AMD的模組。包括requirejs優化

cnpm install requirejs --save-dev

5.9 sizzle

A pure-JavaScript, bottom-up CSS selector engine designed to be easily dropped in to a host library.
一個純JavaScript的完善的CSS選擇器引擎。它是從jQuery中分出來的獨立專案。曾經是jQuery內建的部分，現在被獨立了出來。

可以基於這個構建自己的簡單的庫。

cnpm install sizzle --save-dev

5.10 strip-json-comments

Strip comments from JSON. Lets you use comments in your JSON files!
自動去除JSON檔案中的註釋資訊，讓我們可以在JSON中使用註釋。

cnpm install strip-json-comments --save-dev