Package for rollupfix что это

Как удалить последнее накопительное обновление, если Windows не загружается

В Windows 10 1809 появилась возможность удалить последнее накопительное обновление из среды восстановления. Ее добавили без фанфар – я наткнулся случайно и не нашел упоминаний в инсайдерском списке изменений и прочей документации.

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

Новая функция полезна, но на отдельную статью в блоге она бы не тянула, если бы не терминологические изыски Microsoft (мои подписи на картинке не случайны). Однако сначала инструкции.

[+] Сегодня в программе

• Инструкции по удалению обновления
• Краткая история вопроса
• Терминология
  • Quality update (исправление)
  • Feature update (обновление компонентов)

  Инструкции по удалению обновления

  1. Войдите в среду восстановления.
  2. Перейдите в Поиск и устранение неисправностей – Дополнительные параметры – Удалить обновления.
  3. Выберите:
     • Удалить последнее исправление, чтобы удалить последнее накопительное обновление с исправлениями работы ОС и системы безопасности.
     • Удалить последнее обновление компонентов, чтобы вернуться к предыдущей версии ОС, если с момента обновления до новой версии не истекли 10 дней либо заданный вами срок ( ТГ | ВК).

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

  Краткая история вопроса

  Удалять обновления из RE можно было с помощью DISM еще в Windows 7. В принципе, ничего сложного – одна команда выводит список пакетов, вторая – удаляет пакет с нужным именем.

  dism /image:c:\ /get-packages dism /image:c:\ /remove-package /packagename:"SomePackageName"

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

  

  Откат к предыдущей версии появился в Windows 10 и получил свою плитку в меню RE, но он не имеет отношения к удалению последнего исправления. Теперь есть и оно – всего несколько щелчков мышью. Главное – не заблудиться в двух соснах!

  Терминология

  С терминами в этой сфере у Microsoft всегда было непросто, а в русском переводе – совсем тяжко. Обновлением называлось как исправление (update), так и установка новой версии поверх текущей (upgrade).

  В Windows 10 компания перешла на новую внешнюю терминологию (ниже в скобках – официальный русский перевод). Внутренняя терминология сложнее, но я уже разбирал B, C и D.

  Quality update (исправление)

  К этой категории относятся:

  • пакет с исправлениями работы ОС и системы безопасности
  • обновление сервисного стека
  • обновление .NET Framework

  Все эти исправления являются накопительными и заменяют предыдущие. Обновление сервисного стека поставляется в одном пакете с исправлениями ОС, а его удаление не предусмотрено. То есть при удалении накопительного обновления откатываются только исправления ОС и системы безопасности.

  В среде восстановления не уточняется, какое именно последнее исправление будет удалено. Но имеется в виду первый пункт списка выше, потому что прочие не могут уронить систему.

  Feature update (обновление компонентов)

  Это — установка новой версии Windows 10 поверх текущей (например, 1803 → 1903 или 1809 → 1903). Способ установки значения не имеет, будь то Windows Update, помощник по обновлению, или установочная флэшка.

  

  Очевидно, Microsoft в своей терминологии избавляется от сложного процесса upgrade в пользу простой операции update. Действительно, процесс обновления до новой версии укладывается в пару щелчков мышью и отлично работает.

  Однако у компании есть печальная традиция выдумывать непонятные термины, причем без оглядки на локализацию (один Focus Assist чего стоит).

  В итоге приходится разъяснять не только сам термин, но и его адский перевод. Хотя формально при установке новой версии ОС компоненты тоже обновляются.

  Но еще прячется по углам недобитый враг © Когда в среде восстановления выбор уже сделан и ходу назад нет, появляется предательское сообщение 🙂

  

  Заключение

  Инструменты восстановления Windows 10 продолжают эволюционировать, упрощая и автоматизируя процесс. Так, для новых моделей Surface Pro и Book появилось даже восстановление из облака Microsoft (чистая установка фабричного образа).

  Возможно, в будущем подтянутся и ОЕМы. Но на мой взгляд овчинка выделки не стоит – быстрее сделать сброс к исходному состоянию, так хоть личные файлы сохранятся. А чистая установка из облака – это уже для совсем беспомощных в тупике.

  В комментариях напишите, приходилось ли вам удалять последнее исправление или использовать прочие функции среды восстановления Windows 10, скажем, в течение года. Как прошло?

  Об авторе

  Вадим — владелец этого блога, и почти все записи здесь вышли из-под его пера. Подробности о блоге и авторе здесь. Поддержать автора вы можете тут.

  Вас также может заинтересовать:

  • О форсировании предварительных обновлений .NET Framework
  • Как Microsoft форсирует предварительные обновления, а потом заметает следы
  • O предварительных обновлениях в Windows
  • Как извлечь резервную копию реестра из точки восстановления
  • Как Microsoft доставляет обновления Windows
  • Как Microsoft раскатывает новые версии Windows
  • Среда восстановления в Windows 11, 10 и 8.1

  Я в Telegram

  Подпишитесь на канал и читайте интересные записи чаще! Есть вопросы? Задайте их в чате.

  комментариев 7

  для новых моделей Surface Pro и Book появилось даже восстановление из облака Microsoft

  каких-то десять лет спустя после эппла. и то не работает нормально, судя по комментам под статьёй по ссылке. а откатываться на предыдущую сборку приходилось, но больше года назад, когда сидел на инсайдерской программе (с которой слез, когда придумали дебильные вкладки).

  Ваша оценка: 0

  В июне мне в центр обновлений пришло 1903, установил, перезагрузился, интернет не работает. Разбираться с этой проблемой я тогда поленился, да и не до этого тогда было, поэтому взял, да откатил. Откатилось гладко, только встроенное приложение «Будильник» забыло русский язык. Неделю назад у меня появилось время поковыряться с компьютером, установил обновление, интернет не работал снова. Открыл «Параметры» → «Сеть и интернет», узрел там кнопу «Сброс сети», нажал и всё заработало. Жалею, что протупил это сделать раньше. Похоже, проблема была в виртуальном коммутаторе Hyper-V, который нужно было переустановить (что и сделала кнопка «Сброс сети»). Кстати, русскоязычный интерфейс в «Будильнике» восстановился. Про откаты других обновлений ничего не помню, или не сталкивался, или это было очень давно.

  Ваша оценка: 0

  Про язык интерфейса будильника запланирована запись через неделю 🙂

  Ваша оценка: +1

  • Александр [Маздайщик] 05.08.2019 в 16:15

  Дождался этой записи. Почему возникал глюк с будильником (и почему после вторичной установки 19H1 он прошёл), осталось непонятно. Видимо, артефакт отката. Между откатом и повторной установкой я ничего магазинного, кроме будильника не запускал, а язык его интерфейса мне был совершенно не важен.

  Ваша оценка: 0

  Себе дома не приходилось (только инсайдерские билды откатывал на предыдущий) а на работе восстанавливаем ОС клиентам частенько. Удаление обновление обычно проходит гладко, но использую MSDART. Пробуем восстановление на имеющуюся точку — работает крайне редко, чаще ошибки, с которыми разбираться долго и бессмысленно. Еще забавный факт: восстановление на имеющуюся точку иногда сообщает что «не удалось» из-за ошибки и изменения не были внесены, но по факту после перезагрузки все работает. Сталкивался неоднократно. По клиентам за несколько лет работы четко вижу что с обновлениями у 10ки ситуация намного лучше чем W7, которая после обнов не грузилась у людей или приложения не работали, etc.

  Ваша оценка: 0

  Александр, спасибо за рассказ об опыте обслуживания ПК клиентов. MSDaRT, к сожалению, только для организаций лицензируется. Его принцип удаления не знаю, но думаю, что это просто более дружелюбный интерфейс для списка пакетов DISM.

  Ваша оценка: 0

  Мне в начале июля принесли гробик — сети нет, программы не запускаются, проводник не открывает. Сказали «мигнул свет» при обновлении. Откат на старую версию не прокатилась — диск там 128 mg. Откат на заводские тоже — все осталось по прежнему. Откатывал через dism. Заработало.

  Ваша оценка: 0

  Как правильно удалять обновления в Windows 10 и Windows Server?

  

  25.03.2019

  

  itpro

  

  Windows 10, Windows 7, Windows Server 2012 R2, Windows Server 2016

  

  комментариев 6

  На моей практике уже не раз случалось, что свежие обновления безопасности для продуктов Microsoft, выпускаемые в рамках MS Patch Tuesday, вызывают проблемы в работе операционной системы Windows или стороннего ПО. Проблемы, вызываемые обновлениями, бывают как массовыми, встречающимися у большого количества пользователей, так и частными – встречающимися в редких сочетания определённой версии Windows ОС и некоторых приложений (яркий такой пример проблемы описан здесь).

  Если обновление Windows (или Office) вызывает проблему на компьютерах многих пользователей, и это подтверждается специалистами Microsoft, обновление отзывается компанией и через некоторое время заменяется новым, в котором исправляются найденные ошибки. Если обновление Windows вызывает проблемы, пользователь или администратора может самостоятельно удалить уже установленные обновления безопасности.

  В этой статье мы рассмотрим, как правильно удалить обновления в ОС Windows (статья относится к Windows 10, 8.1, 7 и Windows Server 2016, 2012/R2, 2008/R2). Данные способы удаления обновлений можно использовать, если вы установили обновление вручную из CAB или MSU файла, автоматически получили его из Интернета с серверов Windows Update или своего сервера WSUS.

  Вы можете удалить обновления в Windows (Windows Server) несколькими способами:

  Внимание. Возможность удаления обновлений – это, в первую очередь, временное решение, к которому можно прибегнуть, чтобы, во-первых, быстро восстановить работоспособность системы или ПО, а во-вторых подтвердить факт, что проблема вызвана именно установкой нового обновления безопасности. О найденной проблеме рекомендуется сообщить в техподдержку Microsoft и дождаться появления новой версии обновлений. Ни в коем случае нельзя отключать автоматическое обновление системы, удалять обновления из соображений улучшения работы системы или освобождения места на диске (тем более в новых версиях Windows появился мастер очистки устаревших обновлений, позволяющий удалить старые версии обновленных файлов). В противном случае вы подвергаете серьезному риску безопасность своего компьютера!

  Удаляем обновление Windows вручную через Панель управления

  Рассмотрим, как удаляются обновления на примере Windows 10. Откройте меню Параметры (Settings) и перейдите в раздел Обновления и Безопасность (Update & Security) -> Центр обновления Windows (Windows update)-> Просмотр журнала обновлений (View Update History) -> Удалить обновления (Uninstall updates).

  

  Также вы можете перейди в окно удаления обновлений через классическую Панель управления: Панель управления -> Программы -> Удаление программ (Control Panel\Programs\Programs and Features) и нажмите на кнопку “Просмотр установленных обновлений” (View installed updates).

  

  В открывшемся окне появится список всех обновлений Windows и Office, установленных в системе. Найдите в списке нужное обновление (а если быть более точным, ненужное �� ), выделите его, нажмите кнопку Удалить (Uninstall). Запуститься мастер удаления обновления.

  

  шт

  На вопрос: “вы действительно хотите удалить это обновление?” ответьте Да..

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

  Как заблокировать (скрыть) конкретное обновление в Windows 10?

  Если ваш компьютер настроены на автоматическое обновление Windows через Windows Update или WSUS это обновление скорее всего опять установится на вашем компьютере. Но вы можете отключить установку конкретного обновления, скрыв его (заблокировав). Для этого нужно использовать официальную утилиту Microsoft Show or Hide Updates (Показывать или скрывать обновления) https://support.microsoft.com/ru-ru/help/3073930/how-to-temporarily-prevent-a-driver-update-from-reinstalling-in-window

  1. Запустите wushowhide.diagcab;
  2. В мастере выберите пункт Hide Updates (скрыть обновления);
  3. Выберите обнволение, которое вы хотите скрыть и нажмите Далее;
  4. После этого данное обновление не будет устанавливаться в Windows через систему автоматических обновлений. Вы можете убрать обновление из скрытых, выбрав его в пункте Show hidden updates (показать скрытые обновления).

  WUSA.exe: Удаление обновлений Windows из командной строки

  Обновления Windows можно удалить также и из командной строки. Для этих целей в системе предусмотрена утилита wusa.exe (Windows Update Standalone Installer – автономный установщик обновлений Windows).

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

  wmic qfe list brief /format:table

  

  С помощью следующей команды, запущенной с правами администратора, мы удалим обновление KB2790655:
  wusa.exe /uninstall /kb:2693643
  Пользователь должен подтвердить удаление обновления.

  

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

  wusa.exe /quiet /uninstall /kb:2693643 /promptrestart

  Если нужно подавить запрос на перезагрузку, используйте команду:

  wusa.exe /quiet /uninstall /kb:2693643 /norestart

  Также вы можете удалить обновление из PowerShell с помощью модуля PSWindowsUpdate. Используется командлет Remove-WindowsUpdate формат команды:

  Remove-WindowsUpdate -KBArticleID KB2693643 -NoRestart

  Событие удаление обновления Windows фиксируется в системном журнале Setup EventID 7 и источником WUSA:

  Windows update «Security Update for Microsoft Windows (KB2693643)» was successfully uninstalled. (Command line: «wusa.exe /quiet /uninstall /kb:2693643 /promptrestart»).

  

  Вы можете удалить обновление на удаленном компьютере с помощью PsExec, используется такой формат команды:

  psexec.exe \\remotePK C:\Windows\System32\wusa.exe /quiet /uninstall /kb:2693643/warnrestart:600

  Удаление обновлений на всех компьютерах домена через WSUS

  

  Если в вашей комании для установки обновлений на компьютеры домена используется корпоративный сервер WSUS, вы моежет удалить установленные одобренные обновления из консоли управления службы обновлений Update Services. Для этого щелкните ПКМ по ветке Updates и в меню выберите Search.

  Укажите номер KB или бюллетеня безопасности, который требуется найти и нажмите Find Now. В списке, содержащем найденные обновления для разных версий Windows, выделите обновления, которые требуется удалить и выберите в меню пункт Approve.

  

  Затем выберите группу компьютеров, которая вас интересует и в выпадающем списке выберите пункт Approved for Removal.

  

  

  В нашем примере мы хотим удалить обновления на группе компьютеров, с именем Servers.

  После процедуры обновления Windows на стороне клиентов WSUS (которая происходит по расписанию в соответствии с политикам WSUS и частотой синхронизации, которая задается параметром Automatic Update detection frequency, либо вы можете запустить цикл синхронизации вручную, набрав wuauclt /detectnow) в панели Windows Update соответствующее обновление появится с префиксом (Uninstall�� в названии.

  

  После удаления обновления в журнале Windows Update History появится запись об этом событии.

  

  Удаление обновлений на компьютерах домена с помощью политик GPO

  Если вам нужно удалить определенное обновление на множестве компьютеров в домене Active Directory, в котором не используется WSUS, можно воспользоваться функционалом Startup/Shutdown скриптом групповых политик (GPO).

  Для этого создайте новый объект GPO, нацеленный на нужную OU / сайт (пример таргетирования групповых политик на сайты AD описан здесь)/ или группу компьютеров. А затем в разделе Computer Configuration -> Policies -> Windows Settings -> Scripts (Startup/Shutdown) создайте новый скрипт с командой wusa из предыдущего раздела.

  

  Также вы можете использовать PowerShell логон скрипты для удаления обновлений.

  Как удалить обновление, если Windows не грузится?

  Иногда случается, что не удается удалить обновление непосредственно из системы, т.к. Windows просто перестала загружаться после установки проблемного обновления. В этом случае, вероятно, вам придется загрузиться компьютер с загрузочного диска и удалять обновления через DISM (см статью https://winitpro.ru/index.php/2018/01/24/ne-zagruzhaetsya-windows-posle-ustanovki-obnovlenij/), или с помощью утилиты Hotfix uninstall из комплекта MSDaRT.

  Итак, мы рассмотрели самые распространенные сценарии удаления обновлений на компьютерах под управлением Windows.

  Обратите внимание, что нельзя удалить установленные обновления, если произведена очистка образа системы от старых версий компонентов с помощью мастера очистки диска (Cleanup Manager) или очистки хранилища компонентов (WinSxS ) командой:

  Dism.exe /Online /Cleanup-Image /StartComponentCleanup /ResetBase

  Предыдущая статья Следующая статья

  Package for rollupfix что это

  Сообщения: 498
  Благодарности: 44

  Windows 7 x64 ru. Образ с vlsc, чистая ОС (только установленная, антивируса нет), возникли проблемы с поиском обновлений (долгий поиск без результатов). Использовал https://support.microsoft.com/en-us/kb/3102810 — поиск прошел успешно.
  Загрузились и установились обновления, но не все (осталось пара десятков), было предложено перезагрузиться. Перезагрузился, в центре обновлений больше нет обновлений, кроме 3035583 (переход на Windows 10), поиск снова висит. Ладно, думаю, поставлю 3035583, дальше посмотрим. Загрузка этого обновления висит на 0%.
  Средство Fix Microsoft Windows Update Issues (https://support.microsoft.com/en-us/. e-issues/en-us) предъявило мне, что не смогло исправить ошибку 800f081f. Ок, http://windows.microsoft.com/ru-ru/w. error-800f081f предлагает воспользоваться средством проверки готовности к обновлениям. https://support.microsoft.com/ru-ru/kb/947821 качаю kb947821, оно успешно устанавливается, как и написано в течение 15-20 минут. Все ок. Лог в спойлере

  Скрытый текст

  =================================
  Checking System Update Readiness.
  Binary Version 6.1.7601.22471
  Package Version 26.0
  2016-06-02 11:23

  Checking Windows Servicing Packages

  Checking Package Manifests and Catalogs

  Checking Package Watchlist

  Checking Component Watchlist

  Checking Component Store

  Summary:
  Seconds executed: 210
  No errors detected
  (w) Unable to get system disk properties 0x0000045D IOCTL_STORAGE_QUERY_PROPERTY Disk Cache

  Пытаюсь снова запустить поиск — висит, пытаюсь снова запустить загрузку единственного оставшегося найденного ранее обновления 3035583 — висит. Fix Microsoft Windows Update Issues снова говорит что не может исправить 800f081f.

  Пробовал очистить %windir%\softwaredistribution\download (1.5 gb) — не помогло. Видел рекомендации переименовать %windir%\softwaredistribution чтобы при запуске центра обновлений был создан новый каталог, но в таком случае журнал обновлений также будет создан заново, не знаю к каким последствиям это приведет — будут ли все уже установленные обновления заново загружаться и ставиться?

  Вообще, за последние пару лет у меня ни одна windows машина нормально не обновилась после установки (все образы с vlsc). Обновление свежеустановленной ОС превращается в какой-то цирк с конями.

  Создание внутреннего пакета компонентов React — проще, чем кажется

  В разработке современных React-приложений часто возникает потребность в повторном использовании компонентов. Есть разные способы решения такой задачи, и одним из них является создание внутреннего пакета компонентов. Грамотная сборка и поддержка такого пакета позволяют повысить эффективность и производительность разработки, а команда получает возможность использовать готовые компоненты в различных проектах без особых усилий.

  Я frontend-разработчик SimbirSoft Эллина, и в этой статье расскажу, как создать внутренний пакет компонентов в React с помощью инструмента сборки Rollup, а также как сделать его более качественным и удобным для использования. Материал будет полезен frontend-разработчикам уровней junior+ и middle.

  

  Для чего это вообще нужно?

  Внутренний пакет компонентов в React влияет на эффективность разработки и успех проекта в целом. Рассмотрим, какие практические преимущества он может принести как самому проекту, так и бизнесу:

  1. Экономия времени и улучшение качества за счет повторного использования компонентов.

  В IT достаточно часто случаются ситуации, когда один и тот же элемент дизайна используется в нескольких местах/проектах, при этом на каждое такое использование есть своя реализация. Очевидно, что работать с такими компонентами довольно сложно и дорого: уйма времени тратится на повторные реализации, тестирование одинаковой функциональности, обновление логики, поддержку.

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

  2. Единообразный дизайн и стиль для согласованного пользовательского опыта.

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

  3. Оптимизация производительности и скорости разработки.

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

  4. Централизованное управление и обновление.

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

  Как понять, нужен ли проекту такой пакет?

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

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

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

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

  Основные моменты при подготовке качественного пакета

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

  О чем стоит подумать перед созданием пакета:

  Типизация — один из ключевых аспектов при создании качественного пакета компонентов. Хотя в некоторых случаях типизация может быть необязательной, в современной разработке она становится все более значимой. Использование типов позволяет заранее обнаруживать ошибки в коде, ускоряет процесс разработки и обеспечивает понимание того, что ожидать от кода. Вы можете выбрать удобные вам инструменты, но в нашем случае мы остановимся на Typescript.

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

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

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

  Еще одним значимым аспектом является версионирование, которое позволяет отслеживать изменения в пакете с течением времени. Тесная связь с Changelog (журналом изменений) делает его важным инструментом документирования изменений и коммуникации между разработчиками пакета и разработчиками-пользователями. Changelog предоставляет ценную информацию о новых функциях, исправлениях ошибок и других изменениях, позволяя легко отследить и понять развитие пакета. Таким образом, версионирование и Changelog обеспечивают прозрачность и удобство восприятия для разработчиков, которые будут работать с вынесенными компонентами.

  Инструкция к сборке

  Давайте перейдем к разработке нашего пакета. В этом блоке мы рассмотрим основные шаги, которые необходимо сделать, используя Rollup. Мы рассмотрим настройку проекта, конфигурацию сборки, включение зависимостей, оптимизацию кода и другие важные аспекты, которые помогут успешно собрать и подготовить к использованию внутренний пакет компонентов в вашем проекте.

  1. Создание локального репозитория

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

  После выполнения этой команды в корневой папке будет создан файл package.json, в котором будут указаны введенные вами имя проекта, версия, описание, автор и другое.

  Далее инициализируем гит:

  И наполняем .gitignore:

  2. Установка React

  Теперь установим зависимости для React:

  yarn add -D react react-dom @types/react

  Установка пакетов с флагом -D (или —dev) указывает, что они являются зависимостями разработки: эти пакеты не требуются в процессе работы и использования самого пакета, который мы собираем, но они необходимы при разработке или сборке пакета.

  После установки они отобразятся как devDependencies в ранее созданном package.json.

  Важно! Так как пакет будет использоваться в React-проекте, то необходимо поместить некоторые пакеты из зависимостей разработки devDependencies в зависимости peerDependencies.

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

  Добавим в package.json блок peerDependencies и поместим туда react и react-dom. Для гибкой совместимости мы не будем фиксировать конкретную версию:

  . "peerDependencies": < "react": ">=18.0.0", "react-dom": ">=18.0.0" > . 

  3. Настройка Typescript

  Установим Typescript с помощью команды:

  yarn add -D typescript

  Создадим tsconfig.json со следующим содержимым:

  < "compilerOptions": < "target": "ESNext", "lib": ["es6", "dom", "es2016", "es2017"], "jsx": "react", "module": "ESNext", "moduleResolution": "node", "declaration": true, "sourceMap": true, "declarationDir": "dist", "allowSyntheticDefaultImports": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "skipLibCheck": true >, "include": ["src/**/*"], "exclude": [ "node_modules", "dist" ] >

  Конфигурация выше – минимум, необходимый для понимания материала статьи, её можно донастроить под ваши нужды. В данном случае мы пропускаем проверки внешних зависимостей для ускорения сборки с помощью skipLibCheck. Для избежания транспиляции лишних файлов мы указываем в exclude папки node_modules и dist (папка, куда будет собираться проект).

  4. Добавление компонентов

  Есть разные способы стилизовать компоненты, но в данной статье рассмотрим реализацию с помощью библиотеки styled-components. Для её установки запустим следующую команду:

  yarn add -D styled-components @types/styled-components

  Теперь добавим тестовый компонент — карточку. Для этого создадим файлы по следующей структуре:

  Card.styles.ts // Здесь будут располагаться стили

  Card.tsx // Здесь будет располагаться код компонента

  Card.types.ts // Здесь будут располагаться типы

  index.ts // Нужен для экспорта компонента и его типов

  index.ts // Нужен для экспорта всех компонентов, входящих в пакет

  import styled from "styled-components"; import < CardProps >from './Card.types'; type CardContainerProps = Pick; export const CardContainer = styled.div` border: 2px dashed #0ebeff; border-radius: 20px; padding: 12px 24px; $<(< disabled >) => disabled ? `pointer-events: none;` : `cursor: pointer;`> `; export const CardTitle = styled.span` font-size: 24px; font-weight: bold; `;

  import React, < FC >from "react"; import < CardProps >from './Card.types'; import < CardContainer, CardTitle >from './Card.styles'; /** Интерактивная карточка */ export const Card: FC = (< title, onClick, disabled >) => ( disabled= > );

  export interface CardProps < /** Заголовок карточки */ title: string; /** Обработчик клика по карточке */ onClick: () =>void; /** Флаг блокировки карточки */ disabled?: boolean; >

  export < Card >from "./Card"; export < CardProps >from "./Card.types";

  export * from "./Card";

  Здесь src/index.ts файл, который будет экспортировать все компоненты нашего пакета. Именно с этим файлом мы будем работать в дальнейшем — он будет отправной точкой в нашей сборке, и Rollup будет обрабатывать те файлы, которые в нём указаны.

  5. Настройка сборки

  Давайте наконец перейдем непосредственно к сборке. Установим Rollup и некоторые его плагины, которые пригодятся в работе:

  yarn add -D rollup rollup-plugin-peer-deps-external @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-terser rollup-plugin-dts

  Работа этих плагинов заключается в следующем:

  • rollup-plugin-peer-deps-external потребуется для того, чтобы исключать из сборки зависимости, которые мы ранее перенесли в peerDependencies. Это поможет нам уменьшить объем нашего пакета
  • @rollup/plugin-commonjs позволит нам поддерживать формат CommonJS
  • @rollup/plugin-node-resolve поможет Rollup работать с внешними модулями (node_modules)
  • @rollup/plugin-typescript поддерживает работу Rollup с Typescript
  • @rollup/plugin-terser минифицирует код сборки
  • rollup-plugin-dts соберет все типы в единый файл

  В корневой папке создадим файл rollup.config.mjs и наполним его следующим содержимым:

  import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import dts from "rollup-plugin-dts"; import terser from "@rollup/plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; const packageJson = require("./package.json"); export default [ < input: "src/index.ts", output: [ < file: packageJson.main, format: "cjs", sourcemap: true, >, < file: packageJson.module, format: "esm", sourcemap: true, >, ], plugins: [ peerDepsExternal(), resolve(), commonjs(), typescript(< tsconfig: "./tsconfig.json" >), terser(), ], external: ["react", "react-dom", "styled-components"], >, < input: "src/index.ts", output: [< file: packageJson.types, format: "es" >], plugins: [dts.default()], >, ];

  Рассмотрим заданные настройки.

  • В input указывается входная точка для сборки, для нас это будет корневой индексный файл, который импортирует наши компоненты и их типы.
  • output указывает, куда будет помещен обработанный код. Мы настроим сборку так, чтобы получились два билда в разных форматах: CommonJS (cjs) и ES Modules (esm); теперь пакет смогут поддержать инструменты, которые работают с форматом CommonJS (например, Webpack, Node.js), и инструменты, которые работают с ES Modules (Webpack 2+, Rollup). Некоторые значения мы импортируем из package.json, которые добавим позже.
  • В plugins мы подключаем упомянутые выше плагины. В зависимости от нужд вашего пакета, вам могут понадобиться и другие плагины Rollup, которых на npm достаточно много.
  • В external указываются пакеты, которые не должны быть включены в сборку, в нашем случае это пакеты из peerDependencies.

  Помимо этого доработаем package.json, добавив следующие строки:

  . "main": "dist/cjs/index.js", "module": "dist/esm/index.js", "types": "dist/types.d.ts", "files": ["dist"], "scripts": < "build": "rollup -c --bundleConfigAsCjs" >. 

  Как я отметила ранее, строки main и module фигурируют в конфиге Rollup. Они указывают на файлы — входные точки наших двух билдов. В зависимости от инструмента, который будет работать с пакетом, он выберет main (CommonJS) или module (ES Modules). Строка types указывает на общий файл с типами пакета.

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

  В блоке scripts мы описали команду сборки пакета с помощью Rollup. Теперь запустим команду в консоли:

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

  $ yarn build yarn run v1.22.19 $ rollup -c src/index.ts → dist/cjs/index.js, dist/esm/index.js. created dist/cjs/index.js, dist/esm/index.js in 4.1s Done in 5.14s.

  Совет! Конечно, чтобы использовать пакет на проекте, его нужно опубликовать. Однако мы можем проверить корректность собранного пакета локально.

  Для этого запустим следующую команду для архивации репозитория:

  Затем перейдем в репозиторий нужного проекта, перенесем полученный архив в корневую папку и установим наш пакет с помощью команды:

  yarn add file:./component-library-v1.0.0.tgz

  где component-library-v1.0.0.tgz — название полученного архива.

  Проверку выполнить просто: импортируем компонент Card так, как сделали бы это с внешним пакетом:

  import React, < FC >from 'react'; import < Card >from 'component-library'; import < Container >from './styles'; export const BasePage: FC = () => < return (  console.log('Успех!')> /> ); >;

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

  6. Публикация пакета

  Для начала нам потребуется создать аккаунт в npm, затем ввести в консоли логин и электронную почту аккаунта для yarn с помощью команды:

  Для публикации запустим следующую команду:

  После уточнения информации по пакету и вашему аккаунту, пакет будет опубликован, и мы сможем найти его у себя в личном кабинете npm. Первая версия пакета успешно опубликована!

  7. Версионирование

  Давайте настроим версионирование, которым мы сможем управлять самостоятельно, при этом генерировать CHANGELOG.md автоматически. Для этого можно воспользоваться библиотекой, которая работает по принципу SemVer (Семантическое Версионирование) и Conventional Commits (Соглашение о коммитах). Установим ее с помощью команды:

  yarn add -D standard-version

  Чтобы наши коммиты попадали в список СhangeLog, их комментарии следует начинать со следующих ключевых слов:

  • chore — изменение конфигурации, обновление зависимостей и так далее
  • docs — изменения только в документации
  • feat — новая функция, модуль и так далее
  • fix — исправление ошибки
  • refactor — изменение кода, которое не исправляет ошибку и не добавляет новую функцию
  • test — добавление отсутствующих тестов или исправление существующих тестов

  Например, если мы добавим новые пропсы для нашего компонента Card, мы можем закоммитить их следующим образом:

  git commit -m «feat: Добавляет пропс фона компонента Cards»

  Теперь в package.json добавим дополнительные скрипты:

  . "scripts": < … "dryrelease": "standard-version --dry-run", "release": "standard-version -a" >. 

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

  $ yarn dryrelease yarn run v1.22.19 $ standard-version --dry-run √ bumping version in package.json from 1.0.0 to 1.1.0 √ created CHANGELOG.md √ outputting changes to CHANGELOG.md --- ## 1.1.0 (2023-07-26) ### Features * Добавляет пропс фона компонента Cards a330789 ### Bug Fixes * Исправляет отступы в компоненте Card 40010c8 --- √ committing package.json and CHANGELOG.md √ tagging release v1.1.0 i Run `git push --follow-tags origin HEAD && npm publish` to publish Done in 1.22s.

  Удостоверившись, что всё так, как нам нужно, мы можем выпустить релиз командой release.

  $ yarn release yarn run v1.22.19 $ standard-version -a √ bumping version in package.json from 1.0.0 to 1.1.0 √ created CHANGELOG.md √ outputting changes to CHANGELOG.md √ committing package.json and CHANGELOG.md and all staged files warning: LF will be replaced by CRLF in CHANGELOG.md. The file will have its original line endings in your working directory √ tagging release v1.1.0 i Run `git push --follow-tags origin d && npm publish` to publish Done in 7.10s.

  В результате мы получим следующее:

  • в package.json будет автоматически поднята версия до той, которая соответствует вашим правкам,
  • будет создан CHANGELOG.md, если его нет, а в его контент будут добавлены логи по коммитам с ключевыми словами (подобно тому, что мы видели в консоли после выполнения dryrelease).
  • Все изменения будут закомичены и готовы к публикации.

  8. Дополнительно: документация и тесты

  Существует множество библиотек, которые предоставляют простые и удобные инструменты для создания документации к коду. Однако зачастую простого описания бывает недостаточно. Так как мы описываем компоненты, было бы полезно отображать их и дать возможность взаимодействовать с ними. С этим нам поможет такой инструмент как Storybook. Более подробную информацию о нем, а также инструкцию по настройке Storybook можно найти в опубликованной нами ранее статье.

  Не забудьте добавить в репозиторий подробную документацию и к самому пакету. Разместить её можно в следующих файлах:

  • README.md — здесь обычно хранится информация для разработчиков-пользователей по знакомству с пакетом, его назначению, основным требованиям к установке и так далее.
  • CONTRIBUTING.md — файл дает четкие инструкции, как внести свой вклад в проект. Полезен для разработчиков, которые занимаются непосредственным созданием пакета, или тех, кто хочет внести в него свои предложения и изменения.
  • CHANGELOG.md — как упоминалось раннее, в этом файле хранятся версии и их изменения, внесенные в проект.

  Для тестирования компонентов также есть различные инструменты. В топе – известные Enzyme и Jest, которые позволяют протестировать не только состояние компонента, но и взаимодействие с ним, вычислить покрытие кода тестами. Существуют и менее популярные альтернативные инструменты для тестирования, например, Ava.js.

  Подводя итоги

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

  Спасибо за внимание!

  Авторские материалы для frontend-разработчиков мы также публикуем в наших соцсетях – ВКонтакте и Telegram.

  Читать:

  Зачем нужны эти значки социальных сетей битрикс 24