Сегодняшняя повестка дня:

  • нпм си
  • Асинхронная итерация
  • Плагины Бабель 7

нпм си

Это «новая», предположительно замечательная функция npm 5.7, оптимизированная для среды CI, где вместо «npm install» вы можете запустить «npm ci».

Из журнала изменений:

Благодаря новой функции package-lock.json мы смогли добавить новую классную команду в [email protected]: npm ci! Это добавило второй установщик в интерфейс командной строки npm, который использует преимущества проектов с package-lock.json файлами для быстрого извлечения в node_modules/. Он пропускает множество интерактивных и ориентированных на человека проверок, которые делает npm install, и даже делает так, что любые несоответствия вызывают ошибки, вместо того, чтобы команда npm install исправляла их за вас. npm ci примерно в 2–3 раза быстрее обычного npm install.

Мы попробовали это в нашей среде CI, но, поскольку мы не удаляли папку node_modules между запусками, мы не смогли увидеть улучшения скорости. Это все еще полезный инструмент для других проектов! 👍

Кроме того, поскольку мы говорим о npm, есть и другие полезные функции, такие как:

  1. «npm аудит»: инструмент, который сообщает об известных уязвимостях в установленных пакетах.
  2. npm теперь безопаснее пряжи

Больше информации в:

https://www.youtube.com/watch?v=mSQh0gcDXkc

Асинхронная итерация

Меня часто спрашивают:

«Эй, Мигель, почему ты собираешься добавить в свои «Советы недели» что-то, для чего у тебя нет полезного варианта использования?»

Но вы знаете, что? Ненавистники пусть ненавидят!

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

ES2018 принес нам новую функцию (стадия 4), которая позволяет нам обрабатывать асинхронные действия… синхронно… Позволяя нам «ждать» в «цикле for»… А?

Это работает следующим образом:

Здесь у нас есть массив запросов (Promises), которые все отправляются асинхронно. Но благодаря «ожиданию» после ключевого слова «for» каждая итерация цикла, в данном случае каждая выборка в массиве «requests», обрабатывается (или в данном случае регистрируется) синхронно.

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

Как мы это делаем сейчас:

Использование Promise.all

Использование when.settle:

Вывод

«Promise.all» имеет досадную (иногда) проблему. Если я пытаюсь разрешить четыре промиса, а первый не работает, он выдает ошибку сбоя и отбрасывает ответы всех остальных.

Этот новый итератор Async страдает от той же проблемы, поэтому я не могу рекомендовать его вместо «when.settle», когда мне нужно обработать ответы нескольких промисов, как указано выше.

Тем не менее… Он блестящий и новый, так что, ОЧЕВИДНО, я весь в этом. 🔥

Больше информации здесь:

http://2ality.com/2016/10/асинхронная-итерация.html

Вавилон 7

Я в восторге от этого. Я большой поклонник Babel , и как только я узнал, что Babel 7 вышел, я сразу же начал пытаться реализовать его в нашем проекте.

Вы можете найти все изменения здесь:

https://babeljs.io/blog/2018/08/27/7.0.0

Но сегодня я расскажу обо всех новых плагинах, которые я считаю крутыми. Полезный? Возможно, но точно круто!

Необязательная цепочка



@babel/plugin-proposal-Optional-Chaing · Babel
Примерbabeljs.io



Помните это?

if (requests[0] && requests[0].data) {
  console.log(requests[0].data);
}
else {
  console.log('No data');
}

Я знаю, грубо.

К счастью, благодаря нашему спасителю lodash, мы можем написать это вместо этого:

import { get } from 'lodash';
console.log(get(requests[0], 'data', 'No data'));

Да, пожалуйста!

Теперь, если мы по какой-то причине работаем над проектом, в котором не используется lodash или он нам не нравится,мы можем использовать новый синтаксис (в настоящее время на этапе 1) это выглядит примерно так:

if (requests[0]?.data) {
  console.log(requests[0].data);
}
else {
  console.log('No data');
}

Обратите внимание на «?». Это возвращает объект «данные», если он существует, в противном случае он возвращает undefined вместо того, чтобы выдавать ошибку, как это делает JS в настоящее время.

Блять да!.. Это то, что я бы сказал, если бы это действительно реализовало то же поведение, что и lodash. А это не так, потому что lodash делает это в 1 строку, а не в оператор «if… else».

К счастью, у нас есть еще один плагин для этого. Ура, плагины!

Но прежде чем мы это сделаем, позвольте мне показать вам еще один отличный вариант использования необязательной цепочки.

Когда мы хотим удалить часть объекта:

if (requests[0].data) {
  delete requests[0].data;
}
// becomes
delete requests[0]?.data;

Нулевой оператор объединения



@babel/plugin-proposal-nullish-coalescing-operator · Babel
Примерbabeljs.io



С помощью этого плагина мы можем отразить приведенный выше пример из lodash, выполнив следующие действия:

import { get } from 'lodash';
console.log(get(requests[0], 'data', 'No data'));
// is the same as
console.log(requests[0]?.data ?? 'No data');

Если вам это нравится 👌, иначе я просто вестник!

Как это работает, если какое-то условие перед «??» имеет значение null или не определено, он возвращает все, что следует за ним.

Если это не заставит вашего разработчика фронтенда перекачивать кровь, вы можете быть мертвы.

Дополнительная привязка улова



@babel/plugin-proposal-option-catch-binding · Babel
Примерыbabeljs.io



Это всего лишь синтаксический сахар, и, черт возьми, я его обожаю!

Посмотри на это:

try {
    doSomething();
} catch (err) {
    dispatchErrorAction();
}

Почему «поймать (ошибиться)»? Где мы используем «ошибаться». Нигде, вот где.

Введите этот удивительный маленький драгоценный камень:

try {
    doSomething();
} catch {
    dispatchErrorAction();
}

БУМ!

Теперь вы можете задаться вопросом: «Насколько это важно?»

И знаете, что я говорю? «Кого это волнует, смотрите, какая хорошенькая! “

И все, ребята!

Спасибо за чтение, если вы зашли так далеко.

Если вы дошли до конца, вы только что убили невинного щенка где-то в мире.

Надеюсь, ты счастлив.

Цитата недели

"Привет! Он компилируется! Отправим его!" - Неизвестный

Увидимся на следующей неделе!