Как изменить файлы в node_modules

внешний интерфейс Webpack

предисловие

иногда используетсяnpmна упаковке обнаружил, что естьbug, мы знаем, как изменить его, но другие могут не иметь возможности обновлять его какое-то время или из-за наших особых потребностей другие не хотят его изменять. В настоящее время мы можем сделать это только сами. Так как же нам модифицировать чужой исходный код? Во-первых, непосредственно изменитьnode_modulesФайлы внутри не очень, а зависимости пропадут после переустановки. Есть два широко используемых метода:

  1. Скачай чужой код на локалку, вставьsrcКаталог, импортированный вручную после модификации.
  2. forkЧужой код на свой склад, после модификации установить этот плагин со своего склада.

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

Роль псевдонима webpack

webpack aliasОбычно используется для настройки псевдонимов пути, чтобы мы могли написать меньше кода пути:

chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('#', resolve('src/views/page1'))
      .set('&', resolve('src/views/page2'));
},

То есть,webpack aliasзаменит "сокращенный путь", который мы написали, и будетnode_modulesФайлы внутри также действительны. В настоящее время мы можем заменить путь модуля, на который указывает ссылка, в исходном коде других на наш собственный файл.

Конкретные операции заключаются в следующем:

  1. Найдите модуль, который нужно изменить в чужом исходном коде, скопируйте код вsrcсодержание
  2. изменитьbug, обратите внимание, что другие файлы, на которые он ссылается, должны быть записаны как абсолютные пути
  3. Найдите путь, по которому импортируется этот модуль (Путь, который нам нужно перехватить)
  4. настроитьwebpack alias

Сделайте это на практике

кqiankunобрамленныйpatchersПример модуля:

Путь, на который ссылается файл:./patchers(путь, который мы хотим перехватить)

Содержимое файла:

скопировать содержимое вsrc/assets/patchers.js, изменить егоimportПуть абсолютный и добавляем наш код:

настроитьwebpack alias(Я используюvue-cli4, файл конфигурацииvue.config.js):

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))
  }
};

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

Дополнение: использоватьpatch-packageмодифицировать

По совету копающего друга @Leemagination, используйтеpatch-packageмодифицироватьnode_modulesФайлы внутри удобнее

Шаги также очень просты:

  1. Установитьpatch-package:npm i patch-package --save-dev
  2. Исправлятьpackage.json, новая командаpostinstall:
"scripts": {
+  "postinstall": "patch-package"
 }
  1. Исправлятьnode_modulesкод внутри
  2. Выполнение заказа:npx patch-package qiankun.

первое использованиеpatch-packageбудет сгенерирован в корневом каталоге проектаpatchesпапка с измененными файлами в нейdiffЗаписывать.

Когда версия пакета обновится, выполните команду:git apply --ignore-whitespace patches/qiankun+2.0.11.patchВот и все. вqiankun+2.0.11.patchэто имя файла, который он генерирует.

конец

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

Категории