Автор оригинала: Kevin Velasco.
16 февраля мне посчастливилось оспорить одним из самых своеобразных ошибок, которые я когда-либо сталкивался. Давайте установим этап:
(Это встреча на кода-кода, и некоторые детали были изменены для защиты личности Участника)
В одну субботу днем я получил сообщение о кодаудах о проблеме, касающуюся WebPack. Наш клиент, которого мы будем ссылаться на Джордж, испытывали проблемы о разработке, как заменить значки в CKEDITOR с помощью некоторого выражения Regex. Немедленно, NormalModuleReplacePlugin приходит на ум. API прост и позволяет вам заменить любой модуль, называемый требуется или импортировать с любым другим произвольным модулем.
Я отвечаю на Джордж и скажу ему, что могу помочь ему с этой проблемой. Кажется достаточно простым и не должен занимать слишком долго.
У George есть несколько файлов, которые он хочет переопределить с помощью WebPack, поэтому мы решили собрать несколько помощников функций внутри WebPack.
Во-первых, мы определили некоторые четкие и последовательные API, которые позволят нам настроить этот помощник. Мы закончили с массивом объектов конфигурации следующим образом
const replaceModules = [
{ match: /some-icon\.svg/, replace: path.resolve(__dirname, 'src/icons/new-icon.svg') }
]
Большой! Это позволит нам определить функцию, излучаемую плагины для обработки каждого случая.
function createModuleReplacements(configurations) {
return configurations.map( config =>
new webpack.NormalModuleReplacementPlugin(config.match, config.replace)
)
}
Затем мы будем интегрировать это в плагины WebPack – распространять их в конфигурацию плагинов. Все хорошо и хорошо.
Мы проверили его одним элементом конфигурации, и он работал сломанным. Проблемы, начатые, когда мы добавили несколько элементов конфигурации. Внезапно иконки начали дублироваться. Каждый раз, когда мы добавим новую конфигурацию, тот же значок начнет появляться в том же месте.
Отлично. Некоторые не детерминированные, связанные с порядком, веб-папак, ошибка в разрешении модуля. Это, вероятно, некоторые из самых сложных жуков для отслеживания. Итак, мы намеревались определить, что происходит.
Идея 1. Возможно, WebPack испытывает проблемы с обработкой всех этих копий плагина. Это растяжка, но что, если мы использовали один плагин, который принимает функцию, а не распространять несколько плагинов.
new webpack.NormalModuleReplacementPlugin(/.+\.svg$/, resource => {
// we first check if this resource matches one of the items in our config
const configuration = replaceModules
.find( configuration => configuration.match.test( resource.request ) )
if (configuration) {
resource.request = configuration.replace // re asign the configuration
}
})
Итак, мы попадаем на это и даем это сборку. Нету, та же проблема.
Идея 2. Может быть, мы подходим себе. У нас были несколько замену модулей, которые были подмножествами других запросов Regex. Может быть, мы перезаписываем себя
(Мы даем это идти)
До сих пор нет костей.
На данный момент я клонировал источник библиотеки, начал повторно создать среду сборки и покинуть Node_Modules.
Это когда я замечаю что-то странное. Это то, что значок в библиотеке выглядит
И именно так, как СВГ, которые мы имели в источнике, выглядело
Эскиз. Экспорт. emojis. в. SVGS.
В то время как эмография определенно не была проблемой, мысль все еще беспокоила меня.
Это нормально не будет проблемой, если мы использовали какой-то файловой погрузчик или другой механизм объединения этих активов вместе. К сожалению, мы использовали сырой погрузчик Чтобы включить эти активы в финальной сборке JS. Это означало, что эти файлы вставляются байт на байт в наш пакет JS.
Я не совсем уверен, что это точно сломало CKeditor. Все, что я знаю, это то, что зачистка этого файла всех дополнений исправлена наша сборка, и все сделано правильно.
Отличный способ провести 4 часа. 10/10 будет отлаживать бы снова.