概述
整理好用的第三方node包
实用工具
1. axios
官方文档：www.axios-js.com/
安装方法：npm install axios
2. lodash
lodash是一套现代 JavaScript 实用程序库，提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。
官方文档：www.lodashjs.com/
安装方法：npm i --save lodash
常用方法：深度比较两个对象的值是否全相等，深拷贝，数组去重，数组排序，防抖，节流 ...
注意：不要滥用，尽量使用 ES 自带方法
3. qs
处理 URL 查询字符串,支持内嵌对象和数组。简而言之，就是将对象和 URL 地址的参数互相转换
安装方法：npm install qs
import { parse, stringify } from "qs";
// 用途一
// 将 浏览器上 URL地址参数转换为对象（字符串转对象）
const urlParams = parse(window.location.href.split("?")[1]);
// 用途二
// 将对象参数 传递给到后端接口--GET 请求 （对象转字符串）
const params = {
name: "wang",
age: "18",
sex: "女",
};
// => /api/user?name=wang&age=18&sex=%E5%A5%B3
const apiUrl = /api/user?${stringify(params)};
4. json-server
在前端开发中，数据一般通过后端接口获得。而我们在自己写一些项目练手的时候，需要一些数据，而又没有后端支持，可以通过json-server以零代码的方式获得一个完整的REST(get,post,put,delete增删改查） API。来启动一个本地json服务。
安装方法：npm install json-server
示例：项目根目录下创建 server/data.json 文件，文件内容如下
{
"takeaway": [
{
"tag": "318569657",
"name": "一人套餐",
"foods": [
{
"id": 8078956697,
"name": "烤羊肉串(10串)",
"like_ratio_desc": "好评度100%",
"month_saled": 40,
"unit": "10串",
"food_tag_list": [
"点评网友推荐"
],
"price": 90,
"picture": "https://zqran.gitee.io/images/waimai/8078956697.jpg",
"description": "",
"tag": "318569657",
"count": 1
},
]
},
]
}
package.json 内容参考如下
"scripts": {
// 新增serve命令，npm运行该命令，指向3004端口
"serve": "json-server server/data.json --port 3004"
},
项目终端执行：npm run serve
终端会输出Resources为http://localhost:3004/takeaway，该链接即为json数据的请求接口，可用axios直接调用，并返回json数据
调用方法示例：const res = await axios.get('http://localhost:3004/takeaway')
5. numeral
numeral是一个专门用来格式化数字的 NPM 库，同时 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'
6. Day.js
Day.js是一款快速且轻量化的 Moment.js(自 2020 年 9 月起进入纯维护模式,不再开发新版本) 替代方案。二者拥有类似的 API，只要你接触过 Moment.js，就能够快速上手 Day.js
官方文档：dayjs.uihtm.com/
安装方法：npm install dayjs
使用示例
import dayjs from "dayjs";
const myformat = "YYYY-MM-DD HH:mm:ss";
// -------------------------以字符串形式返回 当前时间
const data = dayjs().format(myformat);
// => 2020-11-25 12:25:56
// -------------------------日期格式化
const data1 = dayjs("2020-11-25 12:25:56").format("YYYY/MM/DD HH/mm/ss");
// => 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();
7. uuid
uuid是一个便捷的微型软件包，能够快速生成更为复杂的通用唯一标识符（UUID）
安装方法：npm install uuid
import { v4 as uuidv4 } from "uuid";
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
8. ESLint
ESLint是一个很好用的工具，可用来避免代码错误并强制开发团队使用编码标准。ESLint 是用于识别和报告 ECMAScript/JavaScript 代码中模式的工具。ESLint 具备全面的可插入特性，每项规则对应一款插件，供你在运行时添加更多内容。
安装方法：npm install eslint --dev
9. Prettier
Prettier 是一款风格鲜明的代码格式化程序。它通过解析代码并使用自己的规则（限定最大行长）对代码进行重新输出，借此实现统一的样式；
官网：Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具
安装方法：npm install --save-dev --save-exact prettier
创建 .prettierrc.js 加入自定义格式化规则
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
创建 .prettierignore 加入需要忽略的文件或目录
# Ignore artifacts:
build
coverage
推荐使用ESLint + Prettier，统一代码规范
10. Mock.js
Mock.js是一个模拟数据生成器，可帮助前端开发和原型与后端进度分开，并减少某些单调性，尤其是在编写自动化测试时。
官方文档：mockjs.com/
安装方法：npm install mockjs
示例
import Mock from "mockjs";
const Random = Mock.Random
function generateCustomers () {
const customers = []
for (let id = 0; id < 50; id++) {
const firstName = Random.first()
const lastName = Random.last()
const province = Random.province()
const date = Random.date()
customers.push({
id,
firstName,
lastName ,
province,
date
})
}
return { customers }
11. classnames
注意：只适用react项目
classnames 库对CSS样式类操作进行了封装，方便我们快速使用：
const classNames = require('classnames');
return <div className={classNames('btn-primary',{ active })}>Save</div>;
更多调用方式：
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
