# module

# 未完待续...

# webpack-aliyun-oss

git 地址
webpack plugin 实现将资源上传到阿里云

TIP

webpack 版本 >4

const WebpackAliyunOss = require("webpack-aliyun-oss");
new WebpackAliyunOss({
  from: ["./build/**", "!./build/**/*.html"],
  dist: "path/in/alioss",
  buildRoot: "build", // 构建目录，如果已传setOssPath，可忽略
  region: "your region",
  accessKeyId: "your key",
  accessKeySecret: "your secret",
  bucket: "your bucket",
  setOssPath(filePath) {
    // filePath为当前文件路径，函数应该返回路径+文件名，如/new/path/to/file.js，则最终上传路径为 path/in/alioss/new/path/to/file.js
    return "/new/path/to/file.js";
  },
  setHeaders(filePath) {
    // some operations to filePath
    return {
      "Cache-Control": "max-age=31536000",
    };
  },
}).apply();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# memory-fs

git 地址
在内存中操作文件

var mfs = require("memory-fs");
var fs = new mfs();
fs.mkdirpSync("/a/test/dir"); // 同步创建一个目录
fs.writeFileSync("/a/test/dir/file.txt", "Hello World"); //同步创建一个文件并写入内容
fs.readFileSync("/a/test/dir/file.txt", "utf-8"); // 同步读取文件

fs.unlink("/a/test/dir/file.txt", function(err) {});
fs.readdirSync("/a/test");
fs.statSync("/a/test/dir").isDirectory();
fs.rmdirSync("/a/test/dir");
fs.mkdirpSync("C:\\use\\windows\\style\\paths");

1
2
3
4
5
6
7
8
9
10
11

# html2canvas

git 地址
html2canvas 更适合于 C 端的用户行为截图跟踪
html2canvas 是通过分析页面中已加载好的 DOM 元素，然后 canvas 将生成的 DOM 节点绘制在画布上，最后转换为图片。它不是真正的截屏，只是根据页面元素信息还原出图片，所以并不是 100% 和页面相同的

局限性

页面中的图片不能跨域
不是所有的 css 特性都支持，如不支持 box-shadow、filter 等
不支持截取插件内容,如 Flash
不支持 iframe 内容

# serve-favicon

git 地址
node 中间件，可以用于请求网页的 logo

  npm install serve-favicon

# superagent

git 地址
客户端请求代理模块

var request = require("superagent");
request
  .post("/api/pet")
  .send({ name: "Manny", species: "cat" })
  .set("X-API-Key", "foobar")
  .set("Accept", "application/json")
  .then((res) => {
    alert("yay got " + JSON.stringify(res.body));
  });

1
2
3
4
5
6
7
8
9

# webpack-spritesmith

雪碧图生成工具

 new SpritesmithPlugin({                  //生成的雪碧图本身就压缩了图片大小
    src: {
        cwd: path.resolve(__dirname, 'src/image/icon'),  //准备合并成sprit的图片存放文件夹
        glob: '*.png'  //哪类图片
    },
    target: {
        image: path.resolve(__dirname, 'dist/sprites/sprites.png'),  // sprite图片保存路径
        css: path.resolve(__dirname, 'dist/sprites/_sprites.css')  // 生成的css保存在哪里
    },
    apiOptions: {
        cssImageRef: "../sprites/sprites.png" //css根据该指引找到sprite图
    }
}),

1
2
3
4
5
6
7
8
9
10
11
12
13

# glob

glob git 地址
命令行中获取匹配对应规则的文件
options 设置{nonull:true}设置为 true 以后,如果没有找到匹配的文件,不返回空字符串,而是返回原始 glob 语句
glob.sync(pattern, [options])同步方式获取匹配文件
var mg = new Glob(pattern, options, cb) 实例化一个 glob.Glob 类,可以获得一个 glob 对象

   #    *匹配单个路径部分中的0个或多个字符
   #    ?匹配1个字符
   #    [...]匹配一系列字符，类似于RegExp范围。如果范围的第一个字符是!或者^它匹配不在范围内的任何字符
   #    @(pattern|pat*|pat?erN) 完全匹配所提供的模式之一

   # demo
   由于a/*/c  不会匹配 * 为点的文件
   在options中设置dot:true ，可以匹配以点开头的文件

1
2
3
4
5
6
7
8

# fs-flag 含义

| 符号 | 含义                                                   |
| ---- | ------------------------------------------------------ |
| r    | 读取文件，如果文件不存在则抛出异常                     |
| r+   | 读取并写入文件，如果文件不存在则抛出异常               |
| rs   | 读取并写入文件，指示操作系统绕开本地文件系统缓存       |
| w    | 写入文件，文件不存在会被创建，存在则清空后写入         |
| wx   | 写入文件，排它方式打开。                               |
| w+   | 读取并写入文件，文件不存在则创建文件，存在则清空后写入 |
| wx+  | 和 w+ 类似，排他方式打开                               |
| a    | 追加写入，文件不存在则创建文件                         |
| ax   | 与 a 类似，排他方式打开                                |
| a+   | 读取并追加写入，不存在则创建                           |
| ax+  | 与 a+ 类似，排他方式打开                               |

1
2
3
4
5
6
7
8
9
10
11
12
13

# husky

git 地址
git hook 提交之前拦截配合 eslint 超级好用

  //引入方式一：package.json 添加如下语法
      {
          "husky": {
          "hooks": {
            "pre-commit": "npm test",
            "pre-push": "npm test"
          }
        }
      }
  //引入方式二：创建 .huskyrc .huskyrc.json .huskyrc.js
      {
        "hooks": {
          "pre-commit": "npm test"
        }
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# request-promise

git 地址
promise 化的 http 请求客户端

# require-dir

# puppet

# puppeteer

# regexparam

网址
正则转换 query 信息

# crontab

消息通知

# ali-oss

# bignumber.js

# compare-versions

# deep-freeze-strict

# ding-robot

# http-assert

# ioredis

# jpush-sdk

# jsonwebtoken

# jwt-decode

# koa-better-http-proxy

# kcors

# koa-bodyparser

# koa-jwt

# koa-logger

# koa-pagination

# lodash

# mongoose

# mongoose-timestamp

# node-schedule

# pg

# pug

# qiniu

# request

# sequelize

# talkfunsdk

# wormhole

# xss

# socket.io

网址

# quicklink

quicklink
通过在空闲时间预取视口内链接来加快后续页面加载速度

# redom

redom
引入了类似于 React 的解决方案，但没有虚拟 DOM 或 JSX 。

# squoosh

squoosh
在浏览器中使用一流的编解码器将图像缩小
Squoosh 是一个图像压缩 Web 应用程序，可让您深入研究各种图像压缩器提供的高级选项

# crypto

crypto
加密

# to-regex-range

to-regex-range
匹配数字范围

# hard-source-webpack-plugin

git 地址

# lerna

是一个工具，优化了使用 git 和 npm 管理多包存储库的工作流

# npm-run-all

npm-run-all

# gitcomment

git 地址
基于 git 的评论系统

# node-schedule

定时任务
地址
定时导出某些数据、定时发送消息或邮件给用户、定时备份什么类型的文件

# rrweb

# p-retry

git 地址
通常，我会使用 p-retry 将所有的 HTTP 请求和外部服务包裹起来，来进一步增强代码的健壮性。p-retry 可以配置 retry 的次数。配合 p-map，你可以并发执行大量的请求而且不用担心偶尔遇到网络错误、服务器超时和 Socket 中断等等

# p-timeout

p-timeout 也是一个必不可少的模块
git 地址

# p-cache

git 地址
通过 LRU 缓存来记住 async 函数的结果。
工具函数库让我想起了关于构建健壮微服务的文章，每一个外部依赖都可以包含一个统一的接口包括 retry, timeout, caching，circuit breakers, 回滚等等。

# p-memoize

git 地址

# cheerio

git 地址
如果你想处理原生的 HTML，Cheerio 是一个很棒的工具。它提供了像 jQuery 一样的语法来访问和处理 HTML 文档。Cheerio 配合 request-promise-native 来获取网页最佳

# dotenv-safe

git 地址
dotenv-safe 是 dotenv 模块的扩展，从.env 加载本地环境变量，并确保它们都存在。通过配置.env.example 文件来制定哪些变量必须要配置

# request

git 地址
执行 HTTP 请求是一个很常见的操作，我选择 request-promise-native 模块。该模块将 request 模块拓展成 Promise。95%的情况下，我使用 await 来处理 HTTP 请求，只有 5%的时间我需要直接用 request 来处理返回数据。为了健壮性，我会配合 p-retry，p-timeout 和 p-cache 来使用。

# request-promise-native

git 地址

# consolidate

git 地址
Consolidate 用来处理后端模板化很有用(邮件、推特、原生 HTML 等等)。我通常使用 handlebars 来作为模板引擎，不过我会配合使用 consolidate。因为它有更加简洁和 UI 之的界面，不管你在底层使用何种引擎都可以配合使用

# execa

git 地址
当你需要执行 shell 脚本或则子进程的时候很有用

# got

# d3

d3js
是一个流行的前端数据可视化库，它同时也包含了很多常见的数学操作的库。我经常用到那些库，接下来推荐给你们

# d3-random

git 地址
生成随机数
当你觉得 Math.ramdom 不够用的时候，不妨试试 d3-random。它支持用不同的分布来随机，比如均匀分布、正太分布和指数分布

# d3-ease

git 地址
Easing 是一种通过扭曲时间来控制动画中的表现形式的方法。通常被用来 slow-in, slow-out。通过对时间的缓动，animated transitions 会更平滑且运动过程也更合理

# d3-interpolate

git 地址
这个库提供了多种做插值的方法来对数字、颜色、字符串、数组、对象等进行插值

# ava

git 地址
Ava 是一个很棒的 JS 测试器，请不要惊讶我又使用了 Sindre Sorhus 创造的另一个工具。它包含了 mocha, tape, chai 以及其他工具的优点

# nock

git 地址
Nock 是前端常用来模拟 http 请求响应的工具，它基于 nodejs 的原生 http 模块

# sinon

git 地址
Sinon.js 是一个非常有用的测试辅助工具，在为 Node 程序写测试时可能可以派上用场。我建议每一个 Node 开发者都应该将它加入到自己的工具库中

# fs-extra

git 地址
我几乎不使用 fs 模块了，fs-extra 为 fs 模块附加了不少方法并且支持 Promise

# prettier

官网
Prettier 通过分析你的代码然后重新排版来保证代码格式的一致性。我喜欢 eslint 并一直使用 JavaScript 的标准格式风格，但是 prettier 和 gofmt 这种自动化格式美化带来的吸引力无法拒绝

# now

官网
超级简单的部署工具
从简洁性、稳定性和拥有的特性上来说，Now 绝对是现在最好的免费的部署系统。不管是静态还是动态部署、甚至要扩展到多个服务器，都可以很好的为你服务。而且，最重要的一点，就算你扩展到多服务器，还是免费的！

# np

git 地址
发布 npm 模块的工具
如果你是一个 npm 包的作者,它使得版本控制、添加 git release tag，和发布到 npm 一气呵成

# asciinema

官网
免费录制 Terminal 的工具
你可以使用 asciinema 来录制 Terminal 操作

# fastclick

fastclick git 地址
消除移动端 300ms 延迟的库

# inquirer-checkbox-plus-prompt

inquirer-checkbox-plus-prompt
[带有查询功能的复选框]
npm install -g inquirer-checkbox-plus-prompt

# prettier

git 地址

# fuzzy

git 地址
模糊查询搜索列表

# minimatch

minimatch
js 匹配文件库

# uglifyjs2

uglifyJS2 git 地址
用命令行解析、压缩、美化 javascript 代码的工具

    npm install uglify-js -g  全局安装
    npm install uglify-js     局部安装

1
2

# clipboard

git 地址

# tty-table

终端生成类似表格的样式

# request

简化的 http 请求客户端

# node-cmd

操作 shell 脚本

# copy-dir

将文件或者目录复制到另一个路径,如果不存在，自动创建

# ncp

# download-git-repo

下载远程仓库至本地，支持 github，gitlab，bitbucket

# mkdirp

# co

用同步的方式编写异步编程

# co-prompt

终端用户输入

# read-metadata

-用于读取 json 或者 yaml 元数据文件并返回一个对象

# multimatch

可以支持多个条件的匹配

# yargs

处理命令行参数

# tildify

将绝对路径转换成带波浪符的路径

# chalk

设置终端颜色

# colors

设置终端颜色

# cli-color

git 地址
设置终端颜色

# consolidate

模板引擎整合库,支持各种模板引擎的渲染

# semver

语义版本规范，主版本号.次版本号.修订号

# minimatch

glob 匹配器

# async

非常强大的异步处理工具

# handlebars

模板引擎，将用户提交的信息动态填充到文件中

# user-home

# download

下载并解压文件 => github.com/kevva/download/

# metalsmith

对下载的文件进行处理,插件化的静态网站生成器

# poi

零配置 js 打包器

# w7

dev server html 服务器

# fs-extra

# browser-sync

# cross-spawn

# progress

# shelljs

git 地址

# ora

# log-symbols

# bluebird

# logger

# fs

操作文件

fs.stat 检测是文件还是目录(目录文件是否存在)
fs.mkdir 创建目录（创建之前先判断是否存在）
fs.writeFile 写入文件(文件不存在就创建,但不能创建目录)
fs.appendFile 写入追加文件
fs.readFile 读取文件
fs.readdir 读取目录
fs.rename 重命名
fs.rmdir 删除目录
fs.unlink 删除文件

# path

# process

# child_process

# util

# ora

# commander

commander git 地址
命令行处理工具,获取用户输入信息并操作

# inquirer

inquirer git 地址
一个用户与命令行交互的工具

# uglifyJS2

UglifyJS2 git 地址
压缩 js

# clean-css

clean-css git 地址
css 压缩

# html-minifier

html-minifier git 地址
html 压缩工具

# raf

raf git 地址
requestAnimationFrame 兼容处理库
可以用于 node 和 browser

var raf = require("raf");
raf(function tick() {
  raf(tick);
});

1
2
3
4

# nprogress

git 地址
进度条 loading

# async

git 地址

# fullPage

git 地址
全屏滚动

git 地址

# sentry

# chokidar

git 地址

# import-local-file

git 地址

# lite-server

git 地址

# http-server

git 地址

# minimist

git 地址
命令行转换 process.argv 参数

# node-notifier

git 地址
nodejs 模块用于发送桌面消息的通知工具

const notifier = require("node-notifier");
notifier.notify({
  title: "My notification",
  message: "Hello, there!",
});

1
2
3
4
5

# flexText

git 地址

# auto-textarea

# jsonp

git 地址

# vconsole

vconsole git 地址
移动端 log 调试工具

# better-scroll

# download-git-repo

git 地址

/*
npm install -D download-git-repo
    download(repository, destination, options, callback)
      1. repository
          * `GitHub` - github:owner/name#branch or simply owner/name#branch
          * `GitLab` - gitlab:owner/name#branch
          * `Bitbucket` - bitbucket:owner/name#branch
          * `direct:url`- 直接下载
      2. destination 下载路径
      3. options:**{clone:true}**:git clone 下载代替 http download下载
      4. callback回调函数
*/
download(
  "bitbucket:flipxfx/download-git-repo-fixture#my-branch",
  "test/tmp",
  { clone: true },
  function(err) {
    console.log(err ? "Error" : "Success");
  }
);
download(
  "direct:https://gitlab.com/flipxfx/download-git-repo-fixture.git",
  "test/tmp",
  { clone: true },
  function(err) {
    console.log(err ? "Error" : "Success");
  }
);
download("flipxfx/download-git-repo-fixture", "test/tmp", function(err) {
  console.log(err ? "Error" : "Success");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# rimraf

git 地址
命令行操作文件类似rm -rf工具

//npm install rimraf -D 安装
import rimraf from "rimraf";
rimraf.sync(path.resolve(__diranme, "dll")); //删除dll文件

1
2
3

# p-map

git 地址
p-map 用来设置并发地执行 promises。考虑到计算资源和带宽，你肯定不想没有限制地完全并发所有的 promise，p-map 可以设置并发数量。我想你完全可以用 p-map 来替代 Promise.all

# pify

pify
把回调函数风格的代码改成 promise 回调形式,promice 化工具

//npm install --save-dev pify

const fs = require("fs");
const pify = require("pify");
// promise化单一的方法
pify(fs.readFile)("package.json", "utf8").then((data) => {
  console.log(JSON.parse(data).name);
});
// promise化一个模块里面的所有方法
pify(fs)
  .readFile("package.json", "utf8")
  .then((data) => {
    console.log(JSON.parse(data).name);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# less

//npm i -D less

# copy-dir

git 地址
复制文件或者文件夹到另一个路径

var path = require("path");
var copydir = require("copy-dir");
copydir.sync(
  "/my/from/path",
  "/my/target/path",
  function(stat, filepath, filename) {
    // 过滤一些不需要拷贝的文件
    if (stat === "file" && path.extname(filepath) === ".html") {
      return false;
    }
    if (stat === "directory" && filename === ".svn") {
      return false;
    }
    return true;
  },
  function(err) {
    console.log("ok");
  }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# git-clone

git 地址
使用 shell 脚本 clone 项目

//npm i -D git-clone
let clone = require("git-clone");
lone("仓库地址", "克隆的目标路径", [配置项], 结果cb);

1
2
3

# json-server

快速生成一个服务器

    /*
        (mock rest api)
        步骤一：cnpm i -g json-server
        步骤二：构建一个json文件,data.json
        步骤三：json-server data.json
    */
    const json={
            "user:[
                {
                    "id":1
                }
            ],
            "list":[{
                "id":1
            }]
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# body-parser

HTTP 请求体解析的中间件,使用这个模块可以解析 JSON、Raw、文本、URL-encoded 格式的请求体

const http = require("http");
http
  .createServer(function(req, res) {
    if (req.method.toLowerCase() === "post") {
      let body = "";
      //此步骤为接收数据
      req.on("data", function(chunk) {
        body += chunk;
      });
      //开始解析
      req.on("end", function() {
        if (req.headers["content-type"].indexOf("application/json") !== -1) {
          JSON.parse(body);
        } else if (
          req.headers["content-type"].indexOf("application/octet-stream") !== -1
        ) {
          //Rwa格式请求体解析
        } else if (req.headers["content-type"].indexOf("text/plain") !== -1) {
          //text文本格式请求体解析
        } else if (
          req.headers["content-type"].indexOf(
            "application/x-www-form-urlencoded"
          ) !== -1
        ) {
          //url-encoded格式请求体解析
        } else {
          //其他格式解析
        }
      });
    } else {
      res.end("其他方式提交");
    }
  })
  .listen(3000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# express-session

git 地址

# query-string

git 地址
Parse and stringify URL 参数

  const queryString=require("query-string");
  const now = queryString("x=1&y=2");
  {
      x:1,
      y:2
  }
  //parseUrl
  //extract
  //stringify

1
2
3
4
5
6
7
8
9