让我告诉你一些强无敌的 NPM 软件包

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 },
];
*/

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)}`;

yarn add classnames

import styles from "./index.less";

const Index=()=><div className={style.class1 style.class2}</div>

import React from "react"
import classnames from 'classnames'

import styles from "./index.less";

const Index=()=>(<div
          className=classnames({
              style.class1,
              style.class2
          })>
</div>)

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'

yarn add cross-env --dev

  "scripts": {
    "start": "cross-env REACT_APP_ENV=development webpack",
    "build": "cross-env REACT_APP_ENV=production webpack",
  },

yarn add path-to-regexp

import pathToRegexp from "path-to-regexp";

const re = pathToRegexp("/foo/:bar");
console.log(re); // /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i

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));

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();

// =>

$ yarn add eslint --dev

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

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

yarn add --dev --exact prettier

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

# Ignore artifacts:
build
coverage

# 格式化src目录下的所有js文件

prettier --write "src/**/*.js"

yarn add stylelint stylelint-config-standard --dev

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

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

yarn add husky --dev

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

npm install uuid

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

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 }

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 }

yarn add --dev jest

function sum(a, b) {
  return a + b;
}
module.exports = sum;

const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

{
  "script": {
    "test": "jest"
  }
}

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

yarn add mocha --dev

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);
    });
  });
});

{
  "script": {
    "test": "mocha"
  }
}

$ ./node_modules/mocha/bin/mocha

  Array
    #indexOf()
      ✓ should return -1 when the value is not present


  1 passing (9ms)

yarn add  nodemon global

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

$ yarn add global pm2

$ pm2 start app.js

$ pm2 ls

yarn add concurrently global

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