# qs
qs：处理 URL 查询字符串,支持内嵌对象和数组。简而言之，就是将对象和 URL 地址的参数互相转换（官网实例）
// 安装
npm install qs
// 引入
import { parse, stringify } from "qs"
// 将 浏览器上 URL地址参数转换为对象（字符串转对象）
parse(window.location.href.split("?")[1])
// 将对象参数 传递给到后端接口--GET 请求 （对象转字符串）
const params = { name: "wang", age: "18", sex: "女" };
`/api/user?${stringify(params)} =》/api/user?name=wang&age=18&sex=%E5%A5%B3
# numeral
numeral：是一个专门用来格式化数字的库，同时 ·numeral· 还能解析各种格式的数字（官网实例）。
// 安装
npm install numeral
// 引入
import numeral from "numeral"
// 解析数字
numeral("10,000.12"); // 10000.12
numeral("$10,000.00"); // 10000
numeral("3.467TB"); // 3467000000000
numeral("-76%"); // -0.76
// 格式化
numeral(10000.23).format("0,0"); // '10,000'
numeral(1000.234).format("$0,0.00"); // '$1,000.23'
# cross-env
cross-env：是一个运行跨平台设置和使用环境变量的脚本（官网实例）。
// 安装
npm install cross-env --dev
// package.json 文件里使用
"scripts": {
"start": "cross-env REACT_APP_ENV=development webpack",
"build": "cross-env REACT_APP_ENV=production webpack",
}
# path-to-regexp
path-to-regexp：用来处理 url 中地址与参数，能够很方便得到我们想要的数据（官网实例）。
js 中有 RegExp 方法做正则表达式校验，而 path-to-regexp 可以看成是 url 字符串的正则表达式。
// 安装 path-to-regexp
npm install path-to-regexp
// 引入
import pathToRegexp from "path-to-regexp"
// 使用
const re = pathToRegexp("/foo/:bar");
console.log(re); // /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i
// compile用于填充 url 字符串的参数值
var url = "/user/:id/:name";
var data = { id: 10001, name: "bob" };
console.log(pathToRegexp.compile(url)(data)); // /user/10001/bob
# Day.js
Day.js：是一款快速且轻量化的 Moment.js(自 2020 年 9 月起进入纯维护模式,不再开发新版本) 替代方案。二者拥有类似的API，只要你接触过 Moment.js，就能够快速上手 Day.js（官网实例）。
// 安装
npm install dayjs
// 引入
import dayjs from "dayjs"
// 获得时间
const data = dayjs().format("YYYY-MM-DD HH:mm:ss");
console.log(data ); // 2020-11-25 12:25:56
// 格式化
const data1 = dayjs("2020-11-25 12:25:56").format("YYYY/MM/DD HH/mm/ss");
console.log(data1); // 2020/11/25 12/25/56
// 多久之前
var relativeTime = require("dayjs/plugin/relativeTime");
dayjs.extend(relativeTime);
const data1 = dayjs("2020-11-25 11:40:41").fromNow();
# Prettier
Prettier：是一款风格鲜明的代码格式化程序。它通过解析代码并使用自己的规则（限定最大行长）对代码进行重新输出，借此实现统一的样式（官网实例）。
// 安装
npm install --dev --exact prettier
// 创建 .prettierrc.js 加入自定义格式化规则
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true
};
// 创建 .prettierignore 加入需要忽略的文件或目录
# Ignore artifacts:
build
coverage
// 执行格式化命令 =》格式化src目录下的所有js文件
prettier --write "src/**/*.js"
# stylelint
stylelint：一个强大的样式规则，可以让你强制执行样式规范，避免书写错误的样式代码（官网实例）。
// 安装
npm install stylelint stylelint-config-standard --dev
// 创建.stylelintrc.js并加入配置
module.exports = {
extends: "stylelint-config-standard",
};
// 检查 src目录下所有css文件是否符合规范
npx stylelint "src/**/*.css"
# Husky
Husky：可以帮助我们简单直接地实现 git hooks。你们团队正在协作开发，并希望在整个团队中推行一套编码标准？没问题！有了 Husky，你就可以要求所有人在提交或推送到存储库之前自动完成 lint 并测试其代码（官网实例）。
// 安装
npm install husky --dev
// 在 package.json 文件中实现 husky hooks 的示例
{
"husky": {
"hooks": {
"pre-commit": "npm lint",
"pre-push": "npm test"
}
}
}
这里
pre-commit的hooks会在你提交到存储库之前运行。在将代码推送到存储库之前，将运行pre-push hook。
# Uuid
Uuid：是一个便捷的微型软件包，能够快速生成更为复杂的通用唯一标识符（官网实例）。
// 安装
npm install install uuid
// 引入
import { v4 as uuidv4 } from "uuid"
// 使用
console.log( uuidv4() ); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
# faker.js
faker.js：非常实用的工具包，用于在浏览器及 Node.js 中生成大量假数据（官网实例）。
// 安装
npm install faker
// 引入
import faker from "faker"
// 使用
const firstName = faker.name.firstName()
const lastName = faker.name.firstName()
const phoneNumber = faker.phone.phoneNumberFormat()
const zipCode = faker.address.zipCode()
const date = faker.date.recent()
# Concurrently
Concurrently：可同时运行多条命令的实用工具（官网实例）。
// 安装
npm install concurrently global
// package.json 写入
"scripts": {
"start": "concurrently \"webpack-dev-server\" \"nodemon server.js\"",
}
# Socket.io
Socket.IO：支持实时、双向、基于事件的通信功能。它能够运行在各类平台、浏览器及设备之上，且拥有良好的可靠性与速度表现（官网实例）。
网友评论