Как изменить пакет в node_module без переустановки

React.js

задний план

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

предисловие

Другие модифицируют исходный код часто несколькими способами:

  1. Прямо к источнику подключаемости Node_Modules непосредственно измените проект;
    • Преимущества: простота и прямота, быстрые результаты
    • Недостатки: нельзя сохранить, после переустановки он будет недействителен; членам команды неудобно использовать измененный код.
  2. Перейдите на github, чтобы разветвить код в свой собственный репозиторий для модификации, и опубликуйте измененный код в npm для использования;
    • Преимущества: Члены команды могут использовать этот модифицированный код.
    • Недостатки: хлопотно, очень хлопотно

Очевидно, что вышеупомянутые два метода не являются ни элегантными, так и ненадежными. Как программист, мы можем иметь эту вещь, чтобы было трудно жить, сообщество открытого исходного кода уже подготовило наше решение:patch-package

использовать патч

Начать проект с cra

npx create-react-app my-app
cd my-app
npm start

Дайте проекту @alifd/next (библиотека пользовательского интерфейса), patch-package, postinstall-postinstall (необходимо установить при использовании пряжи для установки, npm не нужно устанавливать эту зависимость)

yarn add @alifd/next patch-package postinstall-postinstall -D

Добавьте команды сценария в файл package.json (Очень важно, используете ли мы пряжи или NPM, команда выполняется автоматически в конце всей установки, на патке Node_Modules Package)

 "scripts": {
+  "postinstall": "patch-package"
 }

Вводим кнопку компонента и просматриваем текущую структуру компонента

situation.png

Мы переходим к node_module, чтобы изменить исходный код кнопки.

revise.png

Смотрим ситуацию со страницей (если не работает, можно перезапустить сервис)

result.png

После того, как модификация будет завершена и она вступит в силу, мы собираемся начать исправление и запустить командуyarn patch-package package-name

yarn patch-package @alifd/next

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

patch.png

тестовое задание

удалить node_module и переустановить

rm -rf node_modules/ && yarn

После установки пакета зависимости вы можете видеть, что патч применен к командной строке (последние 5 строк)

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @alifd/next@1.22.21" has unmet peer dependency "@alifd/meet-react@^2.0.0".
warning " > @alifd/next@1.22.21" has unmet peer dependency "moment@^2.22.1".
warning " > @alifd/next@1.22.21" has incorrect peer dependency "react@^16.0.0".
warning " > @alifd/next@1.22.21" has incorrect peer dependency "react-dom@^16.0.0".
[4/4] 🔨  Building fresh packages...
$ patch-package
patch-package 6.4.7
Applying patches...
@alifd/next@1.22.21 ✔
✨  Done in 20.10s.

yarn startПерезапустите, просмотрите элемент обзора, это все еще тег!

конец

Эта статья очень короткая, но очень практичная, если эта статья вас вдохновила или помогла, то поставьте лайк! 😊

Категории