让我告诉你一些强无敌的 NPM 软件包
程序员成长指北
共 8910字,需浏览 18分钟
· 2021-04-23
作者:ask_the_sky
链接:https://juejin.cn/post/6950584088462163982
Lodash
安装及示例
yarn add lodash 复制代码
// -----------------------------深度比较两个对象的值是否全相等
import { isEqual, cloneDeep, uniqBy, sortBy } from "lodash";
const object = { a: 1 };
const other = { a: 1 };
isEqual(object, other);
// => true
object === other;
// => false
// -----------------------------深拷贝
const objects = [{ a: 1 }, { b: 2 }];
const deep = cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
// -----------------------------数组去重
uniqBy([{ x: 1 }, { x: 2 }, { x: 1 }], "x");
// => [{ 'x': 1 }, { 'x': 2 }]
// -----------------------------数组排序
const users = [
{ user: "fred", age: 48 },
{ user: "barney", age: 36 },
{ user: "fred", age: 40 },
{ user: "barney", age: 34 },
];
sortBy(users, "age");
/*
[
{ 'user': 'barney', 'age': 34 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 },
{ 'user': 'fred', 'age': 48 },
];
*/复制代码
qs
qs
处理 URL 查询字符串,支持内嵌对象和数组。简而言之,就是将对象和 URL 地址的参数互相转换安装及示例
yarn add 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)}`;复制代码
classnames
安装及示例
yarn add classnames 复制代码
import styles from "./index.less";
const Index=()=><div className={styles.class1 styles.class2}</div>复制代码
import React from "react"
import classnames from 'classnames'
import styles from "./index.less";
const Index=()=>(<div
className=classnames({
styles.class1,
styles.class2
})>
</div>)复制代码
numeral
安装及示例
yarn add 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
安装及示例
yarn add cross-env --dev 复制代码
"scripts": {
"start": "cross-env REACT_APP_ENV=development webpack",
"build": "cross-env REACT_APP_ENV=production webpack",
},复制代码
path-to-regexp
RegExp
方法做正则表达式校验,而 path-to-regexp
可以看成是 url 字符串的正则表达式。安装及示例
yarn add path-to-regexp 复制代码
pathToRegexp
方法可以类比于 js 中 new RegExp('xxx')
。import pathToRegexp from "path-to-regexp";
const re = pathToRegexp("/foo/:bar");
console.log(re); // /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i复制代码
compile
用于填充 url 字符串的参数值。var pathToRegexp = require("path-to-regexp");
var url = "/user/:id/:name";
var data = { id: 10001, name: "bob" };
// /user/10001/bob
console.log(pathToRegexp.compile(url)(data));复制代码
日期格式
Day.js
Moment.js
,就能够快速上手 Day.js
。安装
yarn add 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();
// =>复制代码
Linters 与格式化工具
ESLint
安装和使用
$ yarn add eslint --dev 复制代码
$ ./node_modules/.bin/eslint --init 复制代码
$ ./node_modules/.bin/eslint yourfile.js 复制代码
Prettier
安装
yarn add --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
安装
yarn add stylelint stylelint-config-standard --dev 复制代码
示例
.stylelintrc.js
并加入配置module.exports = {
extends: "stylelint-config-standard",
};复制代码
# 检查 src目录下所有css文件是否符合规范
npx stylelint "src/**/*.css"复制代码
Husky
安装及示例
yarn add husky --dev 复制代码
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm lint",
"pre-push": "npm test"
}
}
}复制代码
pre-commit
的 hooks
会在你提交到存储库之前运行。在将代码推送到存储库之前,将运行 pre-push hook
。♂️ 数据生成器
Uuid
安装及示例
npm install uuid 复制代码
import { v4 as uuidv4 } from "uuid";
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'复制代码
faker.js
安装及示例
yarn add faker 复制代码
import faker from "faker"
function generateCustomers () {
const customers = []
for (let id = 0; id < 50; id++) {
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()
customers.push({
id,
firstName,
lastName ,
phoneNumber ,
zipCode,
date
})
}
return { customers }复制代码
Mock.js
安装及示例
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 }复制代码
测试工具
Jest
安装及示例
yarn add --dev jest 复制代码
sum
函数,这个函数的功能是两数相加。首先创建 sum.js
文件:function sum(a, b) {
return a + b;
}
module.exports = sum;复制代码
sum.test.js
的文件。这个文件包含了实际测试内容:const sum = require("./sum");
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});复制代码
package.json
中:{
"script": {
"test": "jest"
}
}复制代码
yarn test
,Jest 将输出如下信息:PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)复制代码
Mocha
安装及示例
yarn add mocha --dev 复制代码
test.js
的文件。这个文件包含了实际测试内容:var assert = require("assert");
describe("Array", function () {
describe("#indexOf()", function () {
it("should return -1 when the value is not present", function () {
assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});复制代码
package.json
中:{
"script": {
"test": "mocha"
}
}复制代码
yarn test
,Mocha 将输出如下信息:$ ./node_modules/mocha/bin/mocha
Array
#indexOf()
✓ should return -1 when the value is not present
1 passing (9ms)复制代码
进程管理器与运行器
Nodemon
安装及示例
yarn add nodemon global 复制代码
server.js
表示一个 Node.js 入口文件"scripts": {
"start": "nodemon server.js",
}复制代码
PM2
安装及示例
$ yarn add global pm2 复制代码
$ pm2 start app.js 复制代码
$ pm2 ls 复制代码
Concurrently
安装及示例
yarn add concurrently global 复制代码
// package.json 同
"scripts": {
"start": "concurrently \"webpack-dev-server\" \"nodemon server.js\"",
},复制代码
Web sockets
Socket.io
安装及示例
WS
最后
END
“分享、点赞、在看” 支持一波
评论
【第129期】程序员的新宠:三款终端工具,让你告别Xshell!
概述 WindTerm:跨平台的SSH利器 首先介绍的是WindTerm,这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费,而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议,而且性能出色,甚至超过了FinalShell和Electerm。功能
前端微服务
0
上班的时候,有一群摸鱼搭子非常重要...
上班的时候,有一群摸鱼搭子非常重要!一到上班时间,他们就从四面八方涌进群里冒泡...从八卦聊到股市、从职场聊到乌X兰局势,偶尔还会复读、相亲、battle...然后,下午6点钟准时消失不见...所以你要不要加入我们一起摸鱼?我们有北京、上海、深圳、广州、杭州、武汉、成都、南京等8个城市的摸鱼群,还有
产品经理日记
0
周四002 瑞超:同样落寞的境遇——北雪平vs埃尔夫斯堡
上赛季最终排名联赛第9的北雪平本赛季伊始表现不佳,4轮战罢他们仅以1胜1平2负的战绩排在倒数第三,这支历史上曾夺得13次联赛冠军、6次杯赛冠军老牌劲旅,正如英格兰赛场上的一众百年俱乐部,在低谷中不断探索着出路。球队主教练安德烈亚斯·阿尔姆曾是AIK索尔纳及赫根队的主教练,他于今年年初刚刚拿起球队教鞭
产品与体验
0
你只是卡住了,你并没有被击垮
一旦思维僵化了,那就很难跟上这个真实世界的快节奏,更不可能自发地去发现自身问题,进而打破自己。思维僵化,会导致我们无法“活在当下,开放和接纳,并去做自己觉得重要的事情”。觉察自己思维僵化的特征,是改变的第一步。思维僵化导致了你的选择都是错误的。思维方式的不同,才是人跟人之间的不同。有的人遇到挫折了,
小Q聊产品
1
日本影山优佳最新杂志照,展现充满透明感的美丽
今天的图文分享的是影山优佳的杂志写真。元日向坂46的影山优佳,登上了写真杂志《周刊FLASH》5/7和5/14合并号的封面。影山优佳是日本艺人、女演员、前偶像。身高155厘米。2001年5月8日出生于东京都。2023年7月从组合日向坂46毕业,之后作为演员活跃的影山优佳,在《周刊FLAS
python教程
0
盘点一个使用超级鹰识别验证码并自动登录的案例
点击上方“Python共享之家”,进行关注回复“资源”即可获赠Python学习资料今日鸡汤江上几人在,天涯孤棹还。大家好,我是皮皮。一、前言前几天在Python钻石交流群【静惜】问了一个Python实现识别验证码并自动登录的问题,提问截图如下:验证码的截图如下所示:二、实现过程这里大家激烈的探讨,【
IT共享之家
0
朋友,你也不想一个人孤孤单单的上班吧?
上班的时候,有一群摸鱼搭子非常重要!一到上班时间,他们就从四面八方涌进群里冒泡...从八卦聊到股市、从职场聊到乌X兰局势,偶尔还会复读、相亲、battle...然后,下午6点钟准时消失不见...所以你要不要加入我们一起摸鱼?我们有北京、上海、深圳、广州、杭州、武汉、成都、南京等8个城市的摸鱼群,还有
产品经理日记
0