实用程序

Lodash

lodash是一个现代的JavaScript实用程序库，它提供了模块化、高性能和许多附加功能。它可以提供各种关于Javascript数组、对象和其他数据结构的实用功能。

安装及示例

纱线添加lodash 复制代码

不要滥用，尽量用它自己的方法。我经常使用的一些方法如下

/ -深度比较两个对象的值是否都相等 从& #导入{ isequal，clone deep，uniq by，sort by}。洛达什& # 34；； const object = { a:1 }； const other = { a:1 }； isEqual(object，other)； //= & gt；true object = = = other； //= & gt；False / -深度复制 constobjects = [{a: 1}，{b: 2}。 const deep = cloneDeep(objects)； console . log(deep[0]= = = objects[0])； //= & gt；True / -阵列重复数据删除 uniqby ([{x: 1}，{x: 2})。x & # 34); //= & gt；[{ 'x & # 39: 1 }, { 'x & # 39:2}] / -数组排序 constusers = [ {user:。弗雷德& # 34；，年龄:48 }， {用户:& # 34；巴尼& # 34；，年龄:36 }， {用户:& # 34；弗雷德& # 34；，年龄:40 }， {用户:& # 34；巴尼& # 34；，年龄:34 }， ]； sortBy(用户，& # 34；年龄& # 34；); /* [ { & # 39；用户& # 39；: '巴尼& # 39；, '年龄& # 39；:34 }， { & # 39；用户& # 39；: '巴尼& # 39；, '年龄& # 39；:36 }， { & # 39；用户& # 39；: '弗雷德& # 39；, '年龄& # 39；:40 }， { & # 39；用户& # 39；: '弗雷德& # 39；, '年龄& # 39；:48 }， ]； */ 复制代码

qs

qs处理URL查询字符串并支持嵌入的对象和数组。简而言之，就是将对象的参数和URL地址相互转换。

安装及示例

纱线添加qs 复制代码

从& # 34；导入{ parse，stringify };qs & # 34； //用法1 /将浏览器上的URL地址参数转换为对象(string to object) const URL params = parse(window . location . href . split(& # 34；？")[1]); //目的二 /向后端接口传递对象参数- GET请求(对象到字符串) const params = { Name:& # 34；王& # 34；， 年龄:& # 34；18"， 性别:& # 34；女& # 34；， }； //= & gt；/API/用户？name = Wang & age = 18 & sex = female const API URL = `/API/user？$ { stringify(params)} `； 复制代码

classnames

classnames有条件地将类名组合在一起。

安装及示例

yarn添加类名 复制代码

错误代码示例:本机反应和动态添加多个样式类名将导致错误:

从& # 34；。/index . less & # 34；； const Index =()= & gt；& ltdiv class name = { styles . class 1 styles . class 2 } & lt；/div & gt； 复制代码

修改成下面的代码就可以解决了。

从& # 34；反应& # 34； 从& # 39；类名& # 39； 从& # 34；。/index . less & # 34；； const Index =()= & gt；(& ltdiv class name = class names({ styles . class 1， styles . class 2 })& gt； & lt；/div & gt；) 复制代码

numeral

digital是一个致力于格式化数字的NPM库，它也可以解析各种格式的数字。

安装及示例

纱添加数值 复制代码

从& # 34；数字& # 34；； /解析数 数值(& # 34；10,000.12");//10000.12 数字(& # 34；,000.00");//10000 数字(& # 34；3.467TB & # 34);//3467000000000 数字(& # 34；-76%");//-0.76 /Format 数值(10000.23)。格式(& # 34；0,0");// '10,000' 数字(1000.234)。格式(& # 34；[20],0.00");// ',000.23' 复制代码

cross-env

cross-env是一个运行跨平台设置并使用环境变量的脚本。

安装及示例

yarn添加跨环境开发 复制代码

& # 34；脚本& # 34；:{ & # 34；开始& # 34；: "跨环境REACT _ APP _ ENV =开发webpack & # 34， & # 34；构建& # 34；: "跨环境REACT _ APP _ ENV = production web pack & # 34；， }， 复制代码

path-to-regexp

path-to-Regexp用于处理url中的地址和参数，可以很容易的得到我们想要的数据。

js有正则表达式检查的RegExp方法，path-to-regexp可以看作是url字符串的正则表达式。

安装及示例

yarn添加path-to-regexp 复制代码

pathToRegexp方法可以与新的RegExp(& # 39；xxx & # 39)。

从& # 34；正则表达式路径& # 34；； const re = pathtore gexp(& # 34；/foo/:bar & # 34；); console . log(re)；// /^/foo/((？:[^/] ?))(?:/(?=$))?$/i 复制代码

compile用于填充url字符串的参数值。

var pathToRegexp = require(& # 34；正则表达式路径& # 34；); var URL = & # 34；/user/:id/:name & # 34；； var data = { id: 10001，name:& # 34；鲍勃& # 34；}; ///user/10001/bob console . log(pathtore gexp . compile(URL)(data))； 复制代码

日期格式Day.js

Day.js是Moment.js的快速轻量级替代方案(从2020年9月开始进入纯维护模式，不会再开发新版本)。两者API相似，只要接触过Moment.js，就能快速上手Day.js。

安装

纱线添加日期 复制代码

示例

从& # 34；dayjs & # 34； const my format = & # 34；YYYY-MM-DD HH:MM:ss & # 34；； / -以字符串 constdata = dayjs()的形式返回当前时间。格式(my format)； //= & gt；2020-11-25 12: 25: 56 [/ -日期格式 constdata1 = dayjs(。2020-11-25 12:25:56").格式(& # 34；YYYY/MM/DD HH/MM/ss & # 34；); //= & gt；2020/11/25/12/25/56 / -多久以前 var相对时间= require(。dayjs/plugin/relative time & # 34；); dayjs . extend(relative time)； const data1 = day js(& # 34；2020-11-25 11:40:41").from now()； //= & gt； 复制代码

Linters 与格式化工具ESLint

ESLint是避免代码错误并迫使开发团队使用编码标准的有用工具。ESLint是一个用于识别和报告ECMAScript/JavaScript代码中的模式的工具。ESLint具有全面的可插拔特性，每个规则对应一个插件，供您在运行时添加更多内容。

安装和使用

$ yarnadeslint-dev 复制代码

然后，您应该设置一个配置文件:

$。/node _ modules/。bin/eslint-init 复制代码。

之后，您可以在任何文件或目录上运行ESLint，如下所示:

$。/node _ modules/。bin/eslintfourfile . js 复制代码

有关更多说明，请参考官方文档，其中包含许多入门和配置示例。

Prettier

漂亮是一个独特的代码格式化程序。它解析代码，用自己的规则(限制最大行长度)重新输出代码，从而实现统一的风格；

安装

yarnadd-dev-exact预测器 复制代码。

示例

创建。prettierrc.js添加自定义格式规则。

module . exports = { trailing逗号:& # 34；es5 & # 34， tabWidth: 4， semi: false， singleQuote: true， }； 复制代码

创建。添加需要忽略的文件或目录。

# ignoreyartifacts: 构建 覆盖率 复制代码。

执行格式化命令

#格式化src目录下的所有js文件 [/h 更漂亮-write & # 34 # 34；src/**/*。js & # 34 复制代码

stylelint

stylelint是一个强大的样式规则，它允许您实施样式规范并避免编写错误的样式代码。

安装

yarn添加stylelint-config-standard-dev 复制代码。

示例

创建stylelintrc.js并添加配置。

module . exports = { extends:& # 34；stylelint-config-standard & # 34；， }； 复制代码

执行lint命令

#检查src目录下的所有css文件是否符合规范 npx stylelint & # 34；src/**/*。css & # 34 复制代码

Husky

Husky可以帮助我们简单直接的实现git钩子。您的团队正在协作开发，并希望在整个团队中实现一套编码标准？没问题！使用Husky，您可以要求每个人在提交或推送到存储库之前自动完成lint并测试其代码。

安装及示例

yarn添加husky-dev 复制代码

下面是实现husky挂钩的一个示例:

//package . JSON { & # 34；哈士奇& # 34；:{ & # 34；钩子& # 34；:{ & # 34；预提交& # 34；: "npm lint & # 34， & # 34；预推& # 34；: "npm测试& # 34； } } } 复制代码

这里，预提交的钩子将在提交到存储库之前运行。预推送挂钩将在将代码推送到存储库之前运行。

‍♂️ 数据生成器Uuid

uuid是一个方便的微包，可以快速生成更复杂的通用唯一标识符(uuid)。

安装及示例

npm安装uuid 复制代码

导入{ v4 as uuidv4 }从& # 34；uuid & # 34； uuid v4()；// ⇨ '9 B1 deb 4d-3b7d-4 bad-9 BDD-2 b0d 7 B3 dcb 6d & # 39； 复制代码

faker.js

faker.js是一个非常实用的工具包，用来在浏览器和Node.js中生成大量的假数据。

安装及示例

纱加faker 复制代码

从& # 34；faker & # 34 function generate customers(){ const customers =[] for(let id = 0；id & lt50;id){ const first name = faker . name . first name() const last name = faker . name . first name() const phone number = faker . phone . phone number format() const zip code = faker . address . zip code() const date = faker . date . recent() customers . push({ id， firstname，

Mock.js

Mock.js是一个模拟数据生成器，可以帮助前端开发和原型从后端进度中分离出来，减少一些单调，尤其是在编写自动化测试的时候。

安装及示例

npm install mockjs 复制代码

从& # 34；mockjs & # 34； const Random = Mock。random 函数generate customers(){ const customers =[] for(let id = 0；id & lt50;id){ Const first name = random . first() Const last name = random . last() Const province = random . province() Const date = random . date() customers . push({ id， firstname， lastname， 省， date 。

测试工具Jest

Jest是一个方便易用的JavaScript测试框架，简单是其核心诉求。您可以通过一个易于使用且功能丰富的API来编写测试，以便快速获得结果。

安装及示例

yarnadd-devjest 复制代码

测试sum函数，它的作用是将两个数相加。首先创建sum.js文件:

函数sum(a，b) { 返回a b； } module . exports = sum； 复制代码

接下来，创建一个名为sum.test.js的文件。该文件包含实际的测试内容:

const sum = require(& # 34；。/sum & # 34；); 测试(& # 34；1加2等于3 & # 34；，()= & gt{ expect(sum(1，2))。toBe(3)； })； 复制代码

将以下代码添加到package.json中:

{ & # 34；脚本& # 34；:{ & # 34；测试& # 34；: "jest & # 34 } } 复制代码

最后，运行yarn test，Jest将输出以下信息:

通过。/sum . test . js adds 12 to equal 3(5 ms) 复制代码。

Mocha

Mocha是一个丰富的javascript测试框架，运行在node.js和浏览器中，让异步测试变得简单有趣。Mocha测试持续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。

安装及示例

yarn添加mocha-dev 复制代码

接下来，创建一个名为test.js的文件。该文件包含实际的测试内容:

var assert = require(& # 34；断言& # 34；); 形容(& # 34；数组& # 34；，function(){ describe(& # 34；# index of()& # 34；，function(){ it(& # 34；当值不存在时应该返回-1 & # 34；，function(){ assert . equal([1，2，3]。indexOf(4)，-1)； })； })； })； 复制代码

将以下代码添加到package.json中:

{ & # 34；脚本& # 34；:{ & # 34；测试& # 34；: "摩卡& # 34； } } 复制代码

最后运行yarn test，Mocha会输出以下信息:

$。/node _ modules/mocha/bin/mocha array () 的# index应该在值不存在时返回-1 [

‍ 进程管理器与运行器Nodemon

nodemon用于监控node.js应用程序的任何变化，并自动重启服务，非常适合在开发环境中使用。

nodemon会监控启动目录下的文件，如果有任何文件更改，nodemon会自动重启节点应用。

安装及示例

yarn添加nodemon全局 复制代码

server.js表示一个Node.js入口文件。

& # 34；脚本& # 34；:{ & # 34；开始& # 34；: "nodemon server.js & # 34， } 复制代码

PM2

PM2是Node.js应用程序的生产流程管理器，内置负载平衡器。有了它，您可以让应用程序永远保持活动状态，无需停止即可重新加载它们，并简化常见的系统管理任务。

安装及示例

$ yarn添加全局pm2 复制代码

可以启动任何应用程序(Node.js、Python、Ruby、$PATH中的二进制文件...)如下。

$ pm2 start app.js 复制代码

现在，您的应用程序将被保护、监控并永远保持活动状态。有关流程管理的更多信息，请参见此处:

应用程序启动后，您可以轻松管理它们。您可以通过以下方式列出所有正在运行的应用程序:

$ pm2 ls 复制代码

有关PM2函数的完整列表，请查阅官方文档。

Concurrently

Concurrently简单明了——一个可以同时运行多个命令的实用程序。

安装及示例

纱添加并发全局 复制代码

当 时，启动前端webpack项目和后端节点项目

[/h // package.json与 & # 34；脚本& # 34；:{ & # 34；开始& # 34；: "并发 & # 34；web pack-dev-server & # 34；"nodemon server.js & # 34"， }， 复制代码

Web socketsSocket.io

插座。IO支持实时、双向和基于事件的通信。它可以运行在各种平台、浏览器和设备上，具有良好的可靠性和速度性能。

安装及示例

官方教程

WS

WS是一个易于使用、快速且经过全面测试的WebSocket客户端和服务器实现。同时，它是一个强大的、不那么抽象的、几乎可以与Socket.io相媲美的替代品

,