安利一些强无敌的 NPM 软件包

凯特林 等级 564 1 0
标签: httpseslint

实用工具

Lodash

lodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。

安利一些强无敌的 NPM 软件包

安装及示例

yarn add lodash  

不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下

// -----------------------------深度比较两个对象的值是否全相等  
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 地址的参数互相转换

安利一些强无敌的 NPM 软件包

安装及示例
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

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

安装及示例

yarn add classnames  

错误 ❎ 代码示例: React 原生动态添加多个样式类名会报错:

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

numeral是一个专门用来格式化数字的 NPM 库,同时 numeral 还能解析各种格式的数字。

安利一些强无敌的 NPM 软件包

安装及示例

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

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

path-to-regexp用来处理 url 中地址与参数,能够很方便得到我们想要的数据。

js 中有 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

Day.js 是一款快速且轻量化的 Moment.js(自 2020 年 9 月起进入纯维护模式,不再开发新版本) 替代方案。二者拥有类似的 API,只要你接触过 Moment.js,就能够快速上手 Day.js

安利一些强无敌的 NPM 软件包

安装

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

ESLint 是一个很好用的工具,可用来避免代码错误并强制开发团队使用编码标准。ESLint 是用于识别和报告 ECMAScript/JavaScript 代码中模式的工具。ESLint 具备全面的可插入特性,每项规则对应一款插件,供你在运行时添加更多内容。

安利一些强无敌的 NPM 软件包

安装和使用
$ yarn add eslint --dev  

然后,你应该设置一个配置文件:

$ ./node_modules/.bin/eslint --init  

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

$ ./node_modules/.bin/eslint yourfile.js  

有关更多说明,请参阅官方文档,其中有许多入门和配置示例。

Prettier

Prettier 是一款风格鲜明的代码格式化程序。它通过解析代码并使用自己的规则(限定最大行长)对代码进行重新输出,借此实现统一的样式;

安利一些强无敌的 NPM 软件包

安装

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

stylelint 一个强大的样式规则,可以让你强制执行样式规范,避免书写错误的样式代码

安装


yarn add stylelint stylelint-config-standard --dev  

示例

创建.stylelintrc.js并加入配置

module.exports = {  
  extends: "stylelint-config-standard",  
};  

执行 lint 命令


# 检查 src目录下所有css文件是否符合规范  
npx stylelint "src/**/*.css"  

Husky

Husky 可以帮助我们简单直接地实现 git hooks。你们团队正在协作开发,并希望在整个团队中推行一套编码标准?没问题!有了 Husky,你就可以要求所有人在提交或推送到存储库之前自动完成 lint 并测试其代码。

安利一些强无敌的 NPM 软件包

安装及示例
yarn add husky --dev  

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

// package.json  
{  
  "husky": {  
    "hooks": {  
      "pre-commit": "npm lint",  
      "pre-push": "npm test"  
    }  
  }  
}  

这里 pre-commithooks 会在你提交到存储库之前运行。在将代码推送到存储库之前,将运行 pre-push hook


‍♂️ 数据生成器

Uuid

uuid是一个便捷的微型软件包,能够快速生成更为复杂的通用唯一标识符(UUID)。

安装及示例

npm install uuid  
import { v4 as uuidv4 } from "uuid";  
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'  

faker.js

faker.js非常实用的工具包,用于在浏览器及 Node.js 中生成大量假数据。

安利一些强无敌的 NPM 软件包

安装及示例

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

Mock.js 是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开,并减少某些单调性,尤其是在编写自动化测试时。

安利一些强无敌的 NPM 软件包

安装及示例
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

Jest 是一款便捷好用的 JavaScript 测试框架,以简单为核心诉求。您可以通过易于上手且功能丰富的 API 编写测试,从而快速获取结果。

安利一些强无敌的 NPM 软件包

安装及示例

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

Mocha 是一个功能丰富的 javascript 测试框架,运行在 node.js 和浏览器中,使异步测试变得简单有趣。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

nodemon用来监视 node.js 应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。

nodemon 将监视启动目录中的文件,如果有任何文件更改,nodemon 将自动重新启动 node 应用程序。

安装及示例

yarn add  nodemon global  

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

"scripts": {  
    "start": "nodemon server.js",  
  }  

PM2

PM2 是一个具有内置负载均衡器的 Node.js 应用程序的生产流程管理器。有了它,你就可以让应用程序永远保持活跃,可以在不停机的前提下重新加载它们,并简化常见的系统管理任务。

安利一些强无敌的 NPM 软件包

安装及示例
$ yarn add global pm2  

你可以像下面一样启动任何应用程序(Node.js、Python、Ruby、$PATH 中的二进制文件……)

$ pm2 start app.js  

现在,你的应用将被守护、监控并永远保持活跃。有关流程管理的更多信息见此:

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

$ pm2 ls  

安利一些强无敌的 NPM 软件包

查阅官方文档,以获取 PM2 功能给的完整列表。

Concurrently

Concurrently简单而直接——可同时运行多条命令的实用工具。

安利一些强无敌的 NPM 软件包

安装及示例
yarn add concurrently global  

时启动前端 webpack 项目和 后端 node 项目

// package.json   同  
"scripts": {  
    "start": "concurrently "webpack-dev-server" "nodemon server.js"",  
  },  

Web sockets

Socket.io

Socket.IO 支持实时、双向、基于事件的通信功能。它能够运行在各类平台、浏览器及设备之上,且拥有良好的可靠性与速度表现。

安利一些强无敌的 NPM 软件包

安装及示例

官方教程

WS

WS易于使用、快速且经过全面测试的 WebSocket 客户端与服务器实现。同时也是一套强大、抽象度更低且几乎能够与 Socket.io 相媲美的替代方案。

官方教程


最后

在日常工作中你还使用哪些 NPM 工具库呢?欢迎在评论区留下的你的见解!

觉得有收获的朋友欢迎点赞,关注一波!

收藏
评论区

相关推荐

Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
这是我第4篇简书。   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用
JavaScript实现H5接金币功能
今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的,详情(https://hiloteam.github.io/Hilo/docs/apizh/index.html) 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 language i
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
Virtual DOM 的原理与实现
只贴代码 不解释过程 勿喷 ; 环境搭建1.克隆$ git clone https://github.com/cvgellhorn/webpackboilerplate.git$ npm install $ npm install @babel/plugintransformreactjsx savedev2.配
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
NPM如何只发布打包后的dist
首发于<a name"jv1sc"</a 前言因为项目要求,我写了一个基于 umirequest 的统一请求插件,但公司的私有库尚未搭建起来,虽然可以暂时通过 webpack alias 别名引用的方式解决,但为了其他同学能快速拉到我的插件,我只能暂时先只将 dist 上传到 npm 仓库上。<br /<br /一共有两种方式。 .npm
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
go好用的类型转换第三方组件 [cast]
关于我 Cast介绍 Cast是什么?Cast是一个库,以一致和简单的方式在不同的go类型之间转换。Cast提供了简单的函数,可以轻松地将数字转换为字符串,将接口转换为bool类型等等。当一个明显的转换是可能的时,Cast会智能地执行这一操作。它不会试图猜测你的意思,例如,你只能将一个字符串转换为int的字符串表示形式,例如“8”。Cast是为Hugo开发的
React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。安装1. 初始化 npm init y 2.安装webpack相关依赖npm install webpack webpackcli D 3. 安装babelloader相关依赖 npm install babelloader @babel/core @babel/presetenv D 4.
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
「Node+Express+Mysql搭建API接口平台」笔记1(P1,P2)
1:本地环境安装:node、npm、express自检:node v、npm v、express versionexpress安装命令:npm install express g && npm install g expressgenerator 2:创建并启动项目D:\workspace\nodeApiexpress apiLearnD:\workspac