Библиотеки JavaScript, которые вы должны знать как разработчик JavaScript

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

Рамда

Установить: yarn add ramda

Говоря о служебных библиотеках, некоторые могут подумать о lodash. Но ramda лучше, и вот почему:

Это автоматически карри

// When the number of parameters supplied is not sufficient,
// It returns a new function which waits for more parameters.
const add10 = R.add(10) // create a function to add 10 to input
console.log(add10(3)) // 13
console.log(add10(9)) // 19

2. Неизменный

const obj = {a: 1}
const newObj = R.assoc('b', 2, obj)
console.log(newObj) // {a: 1, b: 2}
// ramda functions never mutate input parameters
console.log(obj) // {a: 1}

3. Вы можете легко составлять сложные (но читаемые) функции.

// I need to pick all `thumbnails[0].large.url` property from an array of object
// if the `url` exist, replace `http://` by `https://`,
// else returns `null`
R.map(
  R.pipe(
    R.path(['thumbnails', 0, 'large', 'url']),
    R.ifElse(
      R.isNil,
      R.always(null),
      R.replace('http://', 'https://')
    )
  )
)(articles)

Axios

Установить: yarn add axios

Как бы вы сделали HTTP-запрос? По jQuery.ajax или window.fetch API? Axios - лучшая библиотека для HTTP-запросов! Вы можете легко запрашивать различные HTTP-методы (GET, POST, DELETE и другие), и код очень удобочитаем:

// fetch from `http://example.com/articles?limit=10`
axios.get('http://example.com/articles', {
  params: {
    limit: 10
  }
})
// post data with custom header
axios.post('http://example.com/articles', {
  title: 'A very good title',
  content: 'Hello World!'
}, {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
})

Вы также можете создать клиент API с базовым URL, таймаутом и перехватчиками:

const apiClient = axios.create({
  baseURL: 'http://example.com/',
  timeout: 5000
})
apiClient.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response && error.response.data) {
      throw error.response.data
    } else {
      throw {
        code: 'UNKNOWN_SERVER_ERROR',
        message: 'Unknown server error.'
      }
    }
  }
)

Dayjs

Установить: yarn add dayjs

Если вы хотите манипулировать DateTime объектами, вы можете подумать о moment или date-fns, но у меня есть лучший выбор.

Образец кода:

dayjs().startOf('month').add(1, 'day').format('YYYY-MM-DD')

Он небольшой (~ 2 КБ), неизменяемый, подключаемый к цепочке и поддерживает i18n. нужно ли мне сказать больше?

Ms

Установить: yarn add ms

Когда вам нужно установить определенные временные интервалы, например выполнять некоторый блок кода каждые 5 минут или установить время жизни токена. Вы бы сделали что-нибудь вроде:

setInterval(() => {
  console.log('Code block executed.')
}, 300000) // 5 minutes

Теперь вы можете написать:

setInterval(() => {
  console.log('Code block executed.')
}, ms('5min'))

Он более читабельный, правда?

Заключение

Итак, вот мои наиболее часто используемые библиотеки JavaScript. Попробуйте использовать их в своих проектах и расскажите мне, что вы о них думаете!

Библиотеки JavaScript, которые вы должны знать как разработчик JavaScript