Позвольте мне показать вам несколько замечательных пакетов NPM.

JavaScript
Позвольте мне показать вам несколько замечательных пакетов NPM.

При напряженных графиках и сжатых сроках выбор инструментов, которые действительно могут повысить производительность, имеет решающее значение.

Здесь я составил список своих любимых пакетов NPM. Для простоты просмотра я также разделил их на категории, надеясь представить более четкую структуру.

Конечно, вам не нужно устанавливать и изучать их все. В большинстве случаев одного выбора на категорию достаточно для удовлетворения производственных потребностей. Я просто хочу предоставить немного больше альтернатив, чтобы помочь каждому читателю найти для себя лучший вариант. Без лишних слов, давайте начнем!

🧰 Утилиты

Lodash

lodash— это современная служебная библиотека JavaScript, обеспечивающая модульность, производительность и множество дополнительных функций. Предоставляет множество полезных функций для массивов, объектов и других структур данных JavaScript.

lodash-logo

Установка и примеры

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-адресов друг в друга.

qs-github

Установка и примеры
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 также может анализировать числа в различных форматах.

numeral-github

Установка и примеры

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Метод может быть аналогом jsnew 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 года, новые версии не разрабатываются) Альтернатива. Оба имеют схожие API, если у вас есть к ним доступ.Moment.js, вы можете быстро приступить к работеDay.js.

dayJS-office

Установить

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

// =>

🌷 Линтеры и инструменты форматирования

ESLint

ESLint— отличный инструмент для предотвращения ошибок кодирования и принуждения команд разработчиков к использованию стандартов кодирования. ESLint — это инструмент для выявления шаблонов в коде ECMAScript/JavaScript и составления отчетов о них. ESLint полностью подключаемый, с подключаемым модулем для каждого правила, что позволяет добавлять больше контента во время выполнения.

eslint-offcial

установить и использовать
$ yarn add eslint --dev

Затем вы должны настроить файл конфигурации:

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

После этого вы можете запустить ESLint для любого файла или каталога следующим образом:

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

Дополнительные инструкции см.официальная документация, в котором есть много примеров начала работы и конфигурации.

Prettier

PrettierЭто стилизованный форматировщик кода. Единый стиль достигается за счет разбора кода и повторного вывода кода по собственным правилам (ограничение максимальной длины строки);

prettier-office

Установить

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-хуки просто и напрямую. Ваша команда ведет совместную разработку и хотела бы внедрить единый стандарт кодирования для всей команды? нет проблем! С помощью Husky вы можете попросить всех автоматически анализировать и тестировать свой код перед фиксацией или отправкой в ​​репозиторий.

HUSKY-GITHUB

Установка и примеры
yarn add husky --dev

Вот пример реализации хаски-хуков:

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

здесьpre-commitизhooksбудет запущен до того, как вы зафиксируете в репозитории. Перед отправкой кода в репозиторий запустится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.

faker-github

Установка и примеры

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— это генератор фиктивных данных, который помогает отделить фронтенд-разработку и прототипирование от бэкэнд-процесса и уменьшает монотонность, особенно при написании автоматизированных тестов.

moackjs-github

Установка и примеры
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.

jest-office

Установка и примеры

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 со встроенным балансировщиком нагрузки. С его помощью вы можете поддерживать приложения в рабочем состоянии вечно, перезагружать их без простоев и упрощать общие задачи системного администрирования.

p2-github

Установка и примеры
$ yarn add global pm2

Вы можете запустить любое приложение, как показано ниже (Node.js, Python, Ruby, двоичные файлы в $PATH...)

$ pm2 start app.js

Теперь ваше приложение будет охраняться, контролироваться и всегда будет активным. Подробнее об управлении процессамипосмотреть здесь:

После запуска приложений вы можете легко управлять ими. Все запущенные приложения могут быть перечислены:

$ pm2 ls

чек об оплатеофициальная документация, чтобы получить полный список функций PM2.

Concurrently

ConcurrentlyПростая и понятная — утилита для одновременного запуска нескольких команд.

Concurrently-github

Установка и примеры
yarn add concurrently global

Запустите интерфейсный проект WebPack и Backend Node Project

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

Web sockets

Socket.io

Socket.IOПоддерживает возможности двусторонней связи в режиме реального времени на основе событий. Он может работать на различных платформах, браузерах и устройствах и обладает хорошей надежностью и скоростью работы.

Socket.io-office

Установка и примеры

Официальный учебник

WS

WSПростая в использовании, быстрая и полностью протестированная реализация клиента и сервера WebSocket. Это также мощная, менее абстрактная альтернатива, почти сравнимая с Socket.io.

Официальный учебник

наконец

Что еще вы используете в своей повседневной работебиблиотека инструментов npmШерстяная ткань? Добро пожаловать, чтобы оставить свое мнение в области комментариев!

Друзья, которые чувствуют выгоду, приветствуютсяподобно,Сфокусируйся наВолна!

Прошлые статьи

серия сборки реакции

  1. Как создать спецификации для фронтенд-разработки корпоративного уровня 🛠
  2. Интеграция «React Build» Webpack5/React17
  3. Интегрированный CSS/Less/Sass/Antd из «React Build»
  4. Интегрированное изображение/шрифт "React Build"
  5. Интеграция "React Build" Redux/Typescript
  6. «React Build» использует Redux-thunk для реализации асинхронных операций Redux.
  7. «React Build» интегрировал меню React-Router/Antd для получения разрешений на маршрутизацию.
Категории