# 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
:支持实时、双向、基于事件的通信功能。它能够运行在各类平台、浏览器及设备之上,且拥有良好的可靠性与速度表现(官网实例)。