• Время чтения ~2 мин
  • 03.03.2023

Вы когда-нибудь пытались обновить пакет npm, а затем поняли, что он ломает все другие пакеты в вашем проекте Javascript?

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

В этом блоге я покажу вам, как обновить пакеты npm, не нарушая ваш проект, выполнив 4 простых шага:

  1. Understand npm package versioning
  2. Audit installed npm packages
  3. Update only one npm package at time
  4. Test your code after updating npm packages

Шпаргалка: 6 обязательных команд для обновления пакетов npmШаг 1: Понимание версий

пакетов

npm Управление версиями является важной частью npm и как безопасно использовать обновления при разработке веб-приложений.

Большинство пакетов npm соответствуют рекомендациям по семантическому управлению версиями.

Семантическое управление версиями означает, что разработчики должны составить версию пакета из трех чисел, разделенных точками (например, «0.12.31»).

МАЙОР. НЕСОВЕРШЕННОЛЕТНИЙ. Формат

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

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

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

Что означают каретка (^) и тильда (~)?

В package.json версия может иметь ^ спереди (например^0.12.31, ), что означает, что последняя незначительная версия может быть безопасно установлена.

Тильда (~) спереди (например, ) означает, ~0.12.31что последняя версия патча безопасна для установки.

Npm package dependencies listed in package.json file.

Пример пакетов npm, перечисленных в файле package.json как зависимости. Все зависимости имеют каретку (^) впереди, показывающую, что безопасно устанавливать последние дополнительные версии.

пакет.json
package.json — это файл, который отслеживает все пакеты, необходимые приложению для правильной работы, а также параметры его поведения при работе на разных платформах и средах.

Шаг 2: Аудит установленных пакетов npm Перед обновлением пакетов

npm выясните, есть ли у вас веская причина.

Лучше придерживаться версии пакета, которая работает. Таким образом, у вас не будет риска того, что что-то сломается.

Основными причинами обновления пакетов npm являются:

  • Последняя версия пакета, имеющая функцию, которую мы хотим
  • Исправлены ошибки в последней версии пакета npm
  • Обновленные зависимости для другого используемого пакета
  • Уязвимость системы безопасности в пакете npm
  • Обновление среды, в которой выполняется проект, несовместимо с текущей версией пакета npm

Пара команд npm, которые помогут вам провести аудит пакетов перед обновлением:

  • npm list --depth 0 Список всех пакетов на верхнем уровне
  • npm аудит Проверяет наличие уязвимостей системы безопасности или устаревших версий
  • npm устаревший Список, отчет о версиях пакетов в сравнении с версиями, указанными в package.json файле

npm list --depth 0

npm list --depth 0 lists all installed npm packages, but only at the top level.

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

npm аудит

npm аудит will run a security vulnerability check against your project and report any found issues. It is not perfect, but it helps to find potential problems if you are using npm packages that have security vulnerabilities. It's not perfect because not all vulnerabilities are reported to npm.

An example of output when running ` npm аудит` command.

npm аудит shows you a list of vulnerable packages, including the npm dependency tree.

npm устаревший

npm устаревший will report any out-of-date packages in your project.

Отображает текущую, желаемую и последнюю версии по сравнению с версиями, указанными в файле package.json.

  • Текущая: текущая установленная версия.
  • Требуется: максимальная версия пакета, разрешенная диапазоном версий в файле package.json.
  • Последняя: версия пакета помечена как «последняя» в реестре npm.

Note: npm устаревший command only shows the direct dependencies of the root project. But if you want to see other dependencies also, then use "--all."

An example of output when running ` npm аудит` command.

npm устаревший prints out a list of all installed packages that have updates available.

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

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

Перед внесением критических изменений разработчики пакетов часто добавляют сообщения «Breaking Changes» в выходные данные консоли. Это означает, что модуль будет меняться в будущих версиях, и разработчики должны следить за ним.

Чтобы узнать, есть ли какие-либо критические изменения, вы также можете посмотреть раздел «Критические изменения» файла readme пакета.

Обычно файл readme пакета можно найти в:

  • Страница пакета npm в реестре npm
  • внутри каталога модуля, проверьте node_modules папку внутри проекта
  • сайт проекта (или GitHub)

Шаг 3: Обновляйте только один пакет за раз

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

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

обновление

npm Изменение версии пакета в файле package.json и запуск npm install , скорее всего, ничего не сделают, поскольку уже установленная версия пакета удовлетворяет управлению версиями в файле package.json.

Rather than using npm install, you can use the обновление command to upgrade already installed packages. When you run a обновление, npm checks if there are newer versions out there that satisfy specified semantic versioning ranges that you specified in package.json and installs them.

Чтобы обновить определенный пакет npm, выполните в консоли следующее:

Как отменить обновления пакета npm?

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

Должна @version быть та же версия, которую вы установили ранее.

Шаг 4: Протестируйте код после установки новых пакетов

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

Стремянка:

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

Эти 3 простых шага помогут вам избежать поломки вашего проекта путем тщательной установки новых пакетов npm.

Каковы некоторые из других способов, которыми люди сломали свои проекты? Дайте нам знать в комментариях ниже, и мы напишем сообщение в блоге о них!

Бонусный совет: Очистите кэш

npm Начиная с npm@5, кэш npm самовосстанавливается от проблем с повреждением, и данные, извлеченные из кэша, гарантированно действительны. Если вы хотите убедиться, что все согласовано, используйте вместо этого 'npm cache verify'. С другой стороны, если вы отлаживаете проблему с установщиком, вы можете npm install --cache /tmp/empty-cache использовать временный кэш вместо того, чтобы использовать фактический кэш.

Иногда npm не извлекает последнюю версию пакета, потому что у него есть более старая версия, хранящаяся в кэше. По состоянию на npm@5 проблем с кэшем не должно возникать. Но они все еще иногда это делают.

To clear npm cache, run npm cache clean --force. This command clears npm's cache of all the packages that your project has installed with npm install or обновление.

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

Шпаргалка: 6 команд, которые помогут вам обновить пакеты

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

  • Use npm list --depth 0 to list all the packages in your package directory
  • Use npm аудит to find out which of your npm dependencies are vulnerable.
  • Use npm устаревший to list the packages that are out of date with respect to what is installed in package.json
  • Use обновление package_name to update an individual package that has already been installed.
  • Use npm uninstall package_name and npm install package_name@version to revert to a specific version.
  • Use npm cache clean --force to clear npm's cache of all the packages that have been installed.

Дата:

Comments

No comments yet
Yurij Finiv

Yurij Finiv

Full stack

Про мене

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

Об авторе CrazyBoy49z
WORK EXPERIENCE
Контакты
Ukraine, Lutsk
+380979856297