【NPM】常用包记录

前言

阅览很多的开源项目会见到很多的包，增长不少见识。这些见识沉淀下来，才会成为实力。

类目

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 : https://npm.taobao.org/package/grunt

cnpm install grunt --save-dev

2.1.1 grunt-cli

这个是grunt的命令行接口，使用 grunt 命令前，需要安装本包。

CNPM : https://npm.taobao.org/package/grunt-cli

cnpm install grunt-cli --save-dev

2.1.2 grunt-babel

应用于 grunt 的 babel ，和babel同源。

CNPM : https://npm.taobao.org/package/grunt-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 : https://npm.taobao.org/package/grunt-contrib-uglify

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 : https://npm.taobao.org/package/grunt-contrib-watch

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

2.1.6 grunt-eslint

Validate files with ESLint
使用 ESLint 对文件代码风格进行检查

CNPM : https://npm.taobao.org/package/grunt-eslint

cnpm install grunt-eslint --save-dev

2.1.7 grunt-git-authors

Generate a list of authors from the git history.
从 Git 历史数据生成贡献者列表

CNPM : https://npm.taobao.org/package/grunt-git-authors

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

2.1.8 grunt-jsonlint

Validate JSON files from grunt.
执行 grunt 校验 JSON 文件。

CNPM : https://npm.taobao.org/package/grunt-jsonlint

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 : https://npm.taobao.org/package/grunt-newer

cnpm install grunt-newer --save-dev

2.1.10 load-grunt-tasks

Load multiple grunt tasks using globbing patterns
一行命令加载多个 grunt 任务

CNPM : https://npm.taobao.org/package/load-grunt-tasks

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

Github : https://github.com/babel/babel
CNPM : https://npm.taobao.org/package/babel

cnpm install babel --save-dev

3.1.1 babel-preset-es2015

支持将 ES6 的 JavaScript 转换为 ES5 的 JavaScript 的插件

CNPM : https://npm.taobao.org/package/babel-preset-es2015

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 : https://npm.taobao.org/package/qunitjs

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 : https://npm.taobao.org/package/qunit-assert-step

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

5. 其它

有一些其它的包，不好分类，先放着这里等待以后整理

5.1 cross-spawn

它解决了 nodejs 在跨平台执行命令方面存在的问题，例如在 Windows 下面不能执行 dir ， del 命令等问题

CNPM : https://npm.taobao.org/package/cross-spawn

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 : https://npm.taobao.org/package/jsdom

cnpm install jsdom --save-dev

现在用node写网页爬虫用phantomjs和jsdom各有什么利弊

5.3 phantomjs

Headless WebKit with JS API
提供了JS开发接口的无UIWebKit浏览器

这个除了可以用来进行爬虫抓取，网页截图外，还可以做自动化网页测试。比jsdom还要强大，但是更慢一些。

CNPM : https://npm.taobao.org/package/phantomjs
参考教材 : http://javascript.ruanyifeng.com/tool/phantomjs.html

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 : https://npm.taobao.org/package/gzip-js

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 : https://npm.taobao.org/package/native-promise-only

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

5.7 q

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

CNPM : https://npm.taobao.org/package/q

cnpm install q --save-dev

5.8 requirejs

Node adapter for RequireJS, for loading AMD modules. Includes RequireJS optimizer
requirejs适配器节点，加载AMD的模块。包括requirejs优化

CNPM : https://npm.taobao.org/package/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 : https://npm.taobao.org/package/sizzle

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 : https://npm.taobao.org/package/strip-json-comments

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