1. Предпосылки

История разворачивается из ежедневной совместной разработки команды и используется всей командойreact + antd4Создайте фронтальную страницу, которую я нашел в разработкеantd4.9.*версияInput.TextAreaЕсть ошибка компонентов, производительность ошибкаmaxLengthОграничение атрибута не соответствует ожиданиям. При вводе китайских иероглифов этот атрибут будет ограничивать количество предварительно введенных слов пиньинь, соответствующих китайскому языку, что блокирует ввод длины китайских иероглифов. Проверив проблему с репозиторием github и соответствующий журнал изменений, мы обнаружили, что ошибка официально исправлена ​​в версии v4.15.*.

Когда я сталкиваюсь с такой проблемой, как и большинство людей, первое, о чем я думаю, это обновить и тд до последней версии, поэтому я ничего не говорю о работе.После обновления проблема решена~

Но действительно ли проблема решена? Часто все не так гладко, как ожидалось. Я думал, что волна счастливых обновлений отлично решила проблему, но после недели хорошего времени одноклассник А прислал привет: «Я нашел иv4.15.3В версии есть ошибка,uploadкомпонент вwindowsне может вызватьbeforeUploadКрюк, новую функцию торопился проверить, поэтому поставил антд на версию 4.9.4". Такие плохие новости, естественно, вызвали большой дискомфорт в моем сердце. Между дилеммой и дилеммой, я слышал об этом раньше, но было лень попробовать.ПластырьДафа, начни операцию, не говоря ни слова.

2. Исправьте пакет npm

1. Установите патч-пакет

npm i patch-package --save-dev

2. Измените пакет npm

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

Откройте целевой код проектаnode_modulesПапка, подтвердите, что это версия 4.15.3

Откройте неиспользуемый проект, установите версию v4.9.4, а также откройте каталог antd.

Используйте метод копирования, чтобы скопировать код компонента загрузки, который мы хотим изменить с 4.9.4 на 4.15.3, а затемnpm run devЗапустите проект и проверьте, исправлена ​​ли ошибка компонента загрузки.

3. Создайте патч

Было подтверждено, что эффект, как и ожидалось, в настоящее времяcdПерейдите к записи Genmu и выполните следующую команду для создания файла исправления:

npx patch-package antd

На этом этапе вы получите следующие файлы в корневом каталоге

очень любопытный.patchЧто это за файл, вы можете сразу увидеть, когда откроете файл, на самом деле это какой-тоgit diffЗапишите описание, патч впринципе вот-вот выйдет ——patch-packageбудет текущимnode_modulesПриведенный ниже исходный код сравнивается с оригинальным исходным кодом.git diff, и создайтеpatchпатч-файл.

4. Добавьте управление версиями

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

git add patches/antd+4.15.3.patch

git commit -m "feat:添加antd补丁"

git push

5. Улучшить npm-скрипты

Как применить патч, когда другие коллеги тянут код? На основании вышеперечисленных операций мыnpm installпосле казниpatch-packageКоманда, этот процесс можно использоватьnpm scriptпонял, вpackage.jsonизscriptДобавьте следующие поля и содержимое:

{
    "postinstall":"patch-package"
}

Выполните завершенную «установку зависимостей -> выпуск сборки», все, как и ожидалось, и все готово ~

3. Другие способы

Я на самом деле хочу просто изменитьnpmПакетный метод — это не только патч-пакет, представленный в этой статье, но и, сравнивая другие методы, мы можем почувствовать, почему патч-пакет является оптимальным решением.

1. Метод модификации одним файлом

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

• копировать-перезаписывать

все еще используюpostinstallЭтот хук, выполнить в этом хукеcp измененный файл./node_modules/包名/原始文件скопировать прошлое, в конце концовnode_modulesФайл ниже становится измененным файлом, и приложение в этом примере antd выглядит следующим образом:

"scripts": {
    "postinstall": "cp ./patches/upload/* ./node_modules/antd/lib/"
}

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

• Измененный закон о цитировании

настроитьwebpack aliasпсевдоним, например'原始文件的引用路径': '修改后文件的引用路径', так что ссылка на окончательный измененный файл выглядит следующим образом:

resolve: {
      alias: {
          'antd/upload': path.resolve(__dirname, './patched/upload/*'),
      }
  }

2. Общий метод копирования проекта

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

• прямое цитирование

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

• Опубликовать закон о частной библиотеке

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

3. Метод модификации внешнего кода

Этот метод напрямую не модифицируетсяnode_modulesИсходный код, но использование функций js при выполнении изменяет внутренние свойства этого пакета для достижения цели.

Проще говоря, используйтеdefineProperty,prototypeи другие характеристики изменяют классы в пакете, например,Vue2.0используется вdefinePropertyСделать экземпляр компонента数据劫持和代理. В проекте vue мы также частоmain.jsсередина, чтобы датьVue根实例пройти черезVue.prototype.xxx=xxxxПерехватите некоторые глобальные свойства и методы.

4, преимущество пакета исправлений

Хотя использование вышеперечисленных трех методов может решить проблемы в некоторых конкретных сценариях с помощью некоторых хитрых операций, их нельзя избежать.版本升级Если пакет npm будет обновлен, это может привести к ошибкам в исходной модификации, поэтому, если вы хотите использовать три вышеуказанных метода, лучше всего записать номер версии насмерть. Тем не менее, patch-package имеет следующие особенности:

• пробная версия и ошибка

  Если версия установленного вами пакета отличается от версии, записанной в ранее сгенерированном патче,npx patch-packageсообщит об ошибке напрямую**ERROR** Failed to apply patch for package xxxx at path, с помощью подсказки вам будет легче найти проблему

• сэкономить место

  использоватьgit diffПереопределенный метод для записи патча, чем источник большего пространства,即安全,又便捷

Суммировать

Благодаря введению этой статьи, я считаю, что выpatch-packageПри хорошем понимании его можно элегантно решить в ежедневном развитии.鱼和熊掌不可兼得Однако, хотя пластырь может укрыть от ветра, он не такой теплый, как новая одежда.Когда возникает проблема, лучше искать наиболее фундаментальное решение по формальным каналам, таким как предоставление официального совета.issueИ обращайте внимание на обновления версий и исправления ошибок, чтобы вовремя обновлять или удалять патчи. Пусть пятно мира сменится на новую одежду как можно скорее~