几个比较常用的 NPM 包

# qs

qs:处理 URL 查询字符串,支持内嵌对象和数组。简而言之,就是将对象和 URL 地址的参数互相转换(官网实例

// 安装
npm install qs
// 引入
import { parse, stringify } from "qs"
// 将 浏览器上 URL地址参数转换为对象(字符串转对象)
parse(window.location.href.split("?")[1])
// 将对象参数 传递给到后端接口--GET 请求  (对象转字符串)
const params = {  name: "wang", age: "18",  sex: "女" };
`/api/user?${stringify(params)} =》/api/user?name=wang&age=18&sex=%E5%A5%B3

# numeral

numeral:是一个专门用来格式化数字的库,同时 ·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'

# cross-env

cross-env:是一个运行跨平台设置和使用环境变量的脚本(官网实例)。

// 安装
npm install cross-env --dev
// package.json 文件里使用
"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 字符串的正则表达式。

// 安装 path-to-regexp
npm install path-to-regexp
// 引入
import pathToRegexp from "path-to-regexp"
// 使用
const re = pathToRegexp("/foo/:bar");
console.log(re); // /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i
// compile用于填充 url 字符串的参数值
var url = "/user/:id/:name";
var data = { id: 10001, name: "bob" };
console.log(pathToRegexp.compile(url)(data)); // /user/10001/bob

# Day.js

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

// 安装
npm install dayjs
// 引入
import dayjs from "dayjs"
// 获得时间
const data = dayjs().format("YYYY-MM-DD HH:mm:ss");
console.log(data ); // 2020-11-25 12:25:56
// 格式化
const data1 = dayjs("2020-11-25 12:25:56").format("YYYY/MM/DD HH/mm/ss");
console.log(data1); // 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(); 

# Prettier

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

// 安装
npm install --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:一个强大的样式规则,可以让你强制执行样式规范,避免书写错误的样式代码(官网实例)。

// 安装
npm install stylelint stylelint-config-standard --dev
// 创建.stylelintrc.js并加入配置
module.exports = {
  extends: "stylelint-config-standard",
};
// 检查 src目录下所有css文件是否符合规范
npx stylelint "src/**/*.css"

# Husky

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

// 安装
npm install husky --dev
// 在 package.json 文件中实现 husky hooks 的示例
{
  "husky": {
    "hooks": {
      "pre-commit": "npm lint",
      "pre-push": "npm test"
    }
  }
}

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

# Uuid

Uuid:是一个便捷的微型软件包,能够快速生成更为复杂的通用唯一标识符(官网实例)。

// 安装
npm install install uuid
// 引入
import { v4 as uuidv4 } from "uuid"
// 使用
console.log( uuidv4() ); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

# faker.js

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

// 安装
npm install faker
// 引入 
import faker from "faker"
// 使用
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()

# Concurrently

Concurrently:可同时运行多条命令的实用工具(官网实例)。

// 安装
npm install concurrently global
// package.json 写入
"scripts": {
    "start": "concurrently \"webpack-dev-server\" \"nodemon server.js\"",
}

# Socket.io

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容