实用工具
Lodash
lodash是一套现代 JavaScript 实用程序库，提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。
安装及示例
1yarn add lodash 2
不要滥用，尽量使用 ES 自带方法 。我常用的一些方法如下
1// -----------------------------深度比较两个对象的值是否全相等 2import { isEqual, cloneDeep, uniqBy, sortBy } from "lodash"; 3 4const object = { a: 1 }; 5const other = { a: 1 }; 6 7isEqual(object, other); 8// => true 9 10object === other; 11// => false 12 13// -----------------------------深拷贝 14const objects = [{ a: 1 }, { b: 2 }]; 15 16const deep = cloneDeep(objects); 17console.log(deep[0] === objects[0]); 18// => false 19 20// -----------------------------数组去重 21uniqBy([{ x: 1 }, { x: 2 }, { x: 1 }], "x"); 22// => [{ 'x': 1 }, { 'x': 2 }] 23 24// -----------------------------数组排序 25const users = [ 26 { user: "fred", age: 48 }, 27 { user: "barney", age: 36 }, 28 { user: "fred", age: 40 }, 29 { user: "barney", age: 34 }, 30]; 31sortBy(users, "age"); 32/* 33[ 34 { 'user': 'barney', 'age': 34 }, 35 { 'user': 'barney', 'age': 36 }, 36 { 'user': 'fred', 'age': 40 }, 37 { 'user': 'fred', 'age': 48 }, 38]; 39*/ 40
qs
qs 处理 URL 查询字符串,支持内嵌对象和数组。简而言之，就是将对象和 URL 地址的参数互相转换
安装及示例
1yarn add qs 2
1import { parse, stringify } from "qs"; 2 3// 用途一 4// 将 浏览器上 URL地址参数转换为对象（字符串转对象） 5const urlParams = parse(window.location.href.split("?")[1]); 6 7// 用途二 8// 将对象参数 传递给到后端接口--GET 请求 （对象转字符串） 9const params = { 10 name: "wang", 11 age: "18", 12 sex: "女", 13}; 14 15// => /api/user?name=wang&age=18&sex=%E5%A5%B3 16const apiUrl = `/api/user?${stringify(params)}`; 17
classnames
classnames有条件地将类名组合在一起
安装及示例
1yarn add classnames 2
错误 ❎ 代码示例: React 原生动态添加多个样式类名会报错：
1import styles from "./index.less"; 2 3const Index=()=><div className={styles.class1 styles.class2}</div> 4
修改为如下代码即可解决
1import React from "react" 2import classnames from 'classnames' 3 4import styles from "./index.less"; 5 6const Index=()=>(<div 7 className=classnames({ 8 styles.class1, 9 styles.class2 10 })> 11</div>) 12
numeral
numeral是一个专门用来格式化数字的 NPM 库，同时 numeral 还能解析各种格式的数字。
安装及示例
1yarn add numeral 2
1import numeral from "numeral"; 2 3// 解析数字 4numeral("10,000.12"); // 10000.12 5numeral("$10,000.00"); // 10000 6numeral("3.467TB"); // 3467000000000 7numeral("-76%"); // -0.76 8 9// 格式化 10 11numeral(10000.23).format("0,0"); // '10,000' 12numeral(1000.234).format("$0,0.00"); // '$1,000.23' 13
cross-env
cross-env是一个运行跨平台设置和使用环境变量的脚本
安装及示例
1yarn add cross-env --dev 2
1"scripts": { 2 "start": "cross-env REACT_APP_ENV=development webpack", 3 "build": "cross-env REACT_APP_ENV=production webpack", 4 }, 5
path-to-regexp
path-to-regexp用来处理 url 中地址与参数，能够很方便得到我们想要的数据。
js 中有 RegExp 方法做正则表达式校验，而 path-to-regexp 可以看成是 url 字符串的正则表达式。
安装及示例
1yarn add path-to-regexp 2
pathToRegexp方法可以类比于 js 中 new RegExp('xxx')。
1 2 3import pathToRegexp from "path-to-regexp"; 4 5const re = pathToRegexp("/foo/:bar"); 6console.log(re); // /^/foo/((?:[^/]+?))(?:/(?=$))?$/i 7
compile用于填充 url 字符串的参数值。
1var pathToRegexp = require("path-to-regexp"); 2 3var url = "/user/:id/:name"; 4var data = { id: 10001, name: "bob" }; 5 6// /user/10001/bob 7console.log(pathToRegexp.compile(url)(data)); 8
日期格式
Day.js
Day.js 是一款快速且轻量化的 Moment.js(自 2020 年 9 月起进入纯维护模式,不再开发新版本) 替代方案。二者拥有类似的 API，只要你接触过 Moment.js，就能够快速上手 Day.js。
安装
1yarn add dayjs 2
示例
1import dayjs from "dayjs"; 2 3const myformat = "YYYY-MM-DD HH:mm:ss"; 4 5// -------------------------以字符串形式返回 当前时间 6const data = dayjs().format(myformat); 7// => 2020-11-25 12:25:56 8 9// -------------------------日期格式化 10const data1 = dayjs("2020-11-25 12:25:56").format("YYYY/MM/DD HH/mm/ss"); 11// => 2020/11/25 12/25/56 12 13// -------------------------多久之前 14var relativeTime = require("dayjs/plugin/relativeTime"); 15dayjs.extend(relativeTime); 16const data1 = dayjs("2020-11-25 11:40:41").fromNow(); 17 18// => 19
Linters 与格式化工具
ESLint
ESLint 是一个很好用的工具，可用来避免代码错误并强制开发团队使用编码标准。ESLint 是用于识别和报告 ECMAScript/JavaScript 代码中模式的工具。ESLint 具备全面的可插入特性，每项规则对应一款插件，供你在运行时添加更多内容。
安装和使用
1$ yarn add eslint --dev 2
然后，你应该设置一个配置文件：
1$ ./node_modules/.bin/eslint --init 2
之后，你可以在任何文件或目录上运行 ESLint，如下所示：
1$ ./node_modules/.bin/eslint yourfile.js 2
有关更多说明，请参阅官方文档，其中有许多入门和配置示例。
Prettier
Prettier 是一款风格鲜明的代码格式化程序。它通过解析代码并使用自己的规则（限定最大行长）对代码进行重新输出，借此实现统一的样式；
安装
1yarn add --dev --exact prettier 2
示例
创建 .prettierrc.js 加入自定义格式化规则
1module.exports = { 2 trailingComma: "es5", 3 tabWidth: 4, 4 semi: false, 5 singleQuote: true, 6}; 7
创建 .prettierignore 加入需要忽略的文件或目录
1# Ignore artifacts: 2build 3coverage 4
执行格式化命令
1# 格式化src目录下的所有js文件 2 3prettier --write "src/**/*.js" 4
stylelint
stylelint 一个强大的样式规则，可以让你强制执行样式规范，避免书写错误的样式代码
安装
1 2yarn add stylelint stylelint-config-standard --dev 3
示例
创建.stylelintrc.js并加入配置
1module.exports = { 2 extends: "stylelint-config-standard", 3}; 4
执行 lint 命令
1 2# 检查 src目录下所有css文件是否符合规范 3npx stylelint "src/**/*.css" 4
Husky
Husky 可以帮助我们简单直接地实现 git hooks。你们团队正在协作开发，并希望在整个团队中推行一套编码标准？没问题！有了 Husky，你就可以要求所有人在提交或推送到存储库之前自动完成 lint 并测试其代码。
安装及示例
1yarn add husky --dev 2
下面是一个实现 husky hooks 的示例：
1// package.json 2{ 3 "husky": { 4 "hooks": { 5 "pre-commit": "npm lint", 6 "pre-push": "npm test" 7 } 8 } 9} 10
这里 pre-commit 的 hooks 会在你提交到存储库之前运行。在将代码推送到存储库之前，将运行 pre-push hook。
♂️ 数据生成器
Uuid
uuid是一个便捷的微型软件包，能够快速生成更为复杂的通用唯一标识符（UUID）。
安装及示例
1npm install uuid 2
1import { v4 as uuidv4 } from "uuid"; 2uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' 3
faker.js
faker.js非常实用的工具包，用于在浏览器及 Node.js 中生成大量假数据。
安装及示例
1yarn add faker 2
1import faker from "faker" 2 3function generateCustomers () { 4 const customers = [] 5 6 for (let id = 0; id < 50; id++) { 7 const firstName = faker.name.firstName() 8 const lastName = faker.name.firstName() 9 const phoneNumber = faker.phone.phoneNumberFormat() 10 const zipCode = faker.address.zipCode() 11 const date = faker.date.recent() 12 13 customers.push({ 14 id, 15 firstName, 16 lastName , 17 phoneNumber , 18 zipCode, 19 date 20 }) 21 } 22 23 return { customers } 24
Mock.js
Mock.js 是一个模拟数据生成器，可帮助前端开发和原型与后端进度分开，并减少某些单调性，尤其是在编写自动化测试时。
安装及示例
npm install mockjs
1import Mock from "mockjs"; 2 3const Random = Mock.Random 4 5function generateCustomers () { 6 const customers = [] 7 8 for (let id = 0; id < 50; id++) { 9 const firstName = Random.first() 10 const lastName = Random.last() 11 const province = Random.province() 12 const date = Random.date() 13 14 customers.push({ 15 id, 16 firstName, 17 lastName , 18 province, 19 date 20 }) 21 } 22 23 return { customers } 24
测试工具
Jest
Jest 是一款便捷好用的 JavaScript 测试框架，以简单为核心诉求。您可以通过易于上手且功能丰富的 API 编写测试，从而快速获取结果。
安装及示例
1yarn add --dev jest 2
测试sum函数，这个函数的功能是两数相加。首先创建 sum.js 文件：
1function sum(a, b) { 2 return a + b; 3} 4module.exports = sum; 5
接下来，创建名为 sum.test.js 的文件。这个文件包含了实际测试内容：
1const sum = require("./sum"); 2 3test("adds 1 + 2 to equal 3", () => { 4 expect(sum(1, 2)).toBe(3); 5}); 6
将如下代码添加到 package.json 中：
1{ 2 "script": { 3 "test": "jest" 4 } 5} 6
最后，运行 yarn test ，Jest 将输出如下信息：
1 2 3PASS ./sum.test.js 4✓ adds 1 + 2 to equal 3 (5ms) 5
Mocha
Mocha 是一个功能丰富的 javascript 测试框架，运行在 node.js 和浏览器中，使异步测试变得简单有趣。Mocha 测试连续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。
安装及示例
1yarn add mocha --dev 2
接下来，创建名为 test.js 的文件。这个文件包含了实际测试内容：
1var assert = require("assert"); 2 3describe("Array", function () { 4 describe("#indexOf()", function () { 5 it("should return -1 when the value is not present", function () { 6 assert.equal([1, 2, 3].indexOf(4), -1); 7 }); 8 }); 9}); 10
将如下代码添加到 package.json 中：
1{ 2 "script": { 3 "test": "mocha" 4 } 5} 6
最后，运行 yarn test ，Mocha 将输出如下信息：
1$ ./node_modules/mocha/bin/mocha 2 3 Array 4 #indexOf() 5 ✓ should return -1 when the value is not present 6 7 8 1 passing (9ms) 9
进程管理器与运行器
Nodemon
nodemon用来监视 node.js 应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。
nodemon 将监视启动目录中的文件，如果有任何文件更改，nodemon 将自动重新启动 node 应用程序。
安装及示例
1yarn add nodemon global 2
server.js表示一个 Node.js 入口文件
1"scripts": { 2 "start": "nodemon server.js", 3 } 4
PM2
PM2 是一个具有内置负载均衡器的 Node.js 应用程序的生产流程管理器。有了它，你就可以让应用程序永远保持活跃，可以在不停机的前提下重新加载它们，并简化常见的系统管理任务。
安装及示例
1$ yarn add global pm2 2
你可以像下面一样启动任何应用程序（Node.js、Python、Ruby、$PATH 中的二进制文件……）
1$ pm2 start app.js 2
现在，你的应用将被守护、监控并永远保持活跃。有关流程管理的更多信息见此：
应用程序启动后，你就可以轻松管理它们。可以通过以下方法列出所有正在运行的应用程序：
1$ pm2 ls 2
查阅官方文档，以获取 PM2 功能给的完整列表。
Concurrently
Concurrently简单而直接——可同时运行多条命令的实用工具。
安装及示例
1yarn add concurrently global 2
时启动前端 webpack 项目和 后端 node 项目
1// package.json 同 2"scripts": { 3 "start": "concurrently "webpack-dev-server" "nodemon server.js"", 4 }, 5
Web sockets
Socket.io
Socket.IO 支持实时、双向、基于事件的通信功能。它能够运行在各类平台、浏览器及设备之上，且拥有良好的可靠性与速度表现。
安装及示例
官方教程
WS
WS易于使用、快速且经过全面测试的 WebSocket 客户端与服务器实现。同时也是一套强大、抽象度更低且几乎能够与 Socket.io 相媲美的替代方案。
官方教程
最后
在日常工作中你还使用哪些 NPM 工具库呢？欢迎在评论区留下的你的见解！
觉得有收获的朋友欢迎点赞，关注一波!