This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1460" role="img" aria-labelledby="title description">
|
||||
<title id="title">Диагностика legacy jQuery-плагина в production-сборке Webpack</title>
|
||||
<desc id="description">Вертикальная схема показывает ошибочный статический импорт, мост с правильным порядком и проверку того, что глобальный и импортированный jQuery являются одним объектом.</desc>
|
||||
<defs>
|
||||
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#111b2e"/>
|
||||
<stop offset="1" stop-color="#182d43"/>
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-20%" y="-12%" width="140%" height="124%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#060b14" flood-opacity="0.36"/>
|
||||
</filter>
|
||||
<marker id="arrowBlue" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#62d7ff"/>
|
||||
</marker>
|
||||
<marker id="arrowRed" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#ff8e8e"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<rect width="720" height="1460" fill="url(#background)" rx="28"/>
|
||||
<text x="52" y="68" fill="#f4f8ff" font-family="system-ui, sans-serif" font-size="34" font-weight="700">jQuery + Webpack:</text>
|
||||
<text x="52" y="108" fill="#f4f8ff" font-family="system-ui, sans-serif" font-size="34" font-weight="700">порядок и один экземпляр</text>
|
||||
<text x="52" y="145" fill="#b7c9df" font-family="system-ui, sans-serif" font-size="21">Начинаем с момента, когда legacy-плагин читает window.jQuery.</text>
|
||||
|
||||
<rect x="52" y="184" width="616" height="506" rx="22" fill="#202d42" stroke="#80565e" stroke-width="2" filter="url(#shadow)"/>
|
||||
<text x="86" y="235" fill="#ffb6b6" font-family="system-ui, sans-serif" font-size="29" font-weight="700">Сбой: статический импорт</text>
|
||||
<text x="86" y="270" fill="#d5e0ef" font-family="system-ui, sans-serif" font-size="21">bootstrap.bad.js</text>
|
||||
|
||||
<rect x="84" y="304" width="552" height="90" rx="14" fill="#293b55"/>
|
||||
<text x="110" y="340" fill="#d9f0ff" font-family="ui-monospace, SFMono-Regular, monospace" font-size="21">import './legacy-mask'</text>
|
||||
<text x="110" y="370" fill="#b6c7dd" font-family="system-ui, sans-serif" font-size="19">зависимость выполняется первой</text>
|
||||
<path d="M360 394 L360 432" stroke="#ff8e8e" stroke-width="4" marker-end="url(#arrowRed)"/>
|
||||
|
||||
<rect x="84" y="451" width="552" height="104" rx="14" fill="#4b3039"/>
|
||||
<text x="110" y="489" fill="#ffe5e5" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">legacy-mask читает</text>
|
||||
<text x="110" y="519" fill="#ffe5e5" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">window.jQuery = отсутствует</text>
|
||||
<path d="M360 555 L360 593" stroke="#ff8e8e" stroke-width="4" marker-end="url(#arrowRed)"/>
|
||||
|
||||
<rect x="84" y="596" width="552" height="78" rx="14" fill="#293b55"/>
|
||||
<text x="110" y="630" fill="#d9f0ff" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">window.jQuery = $</text>
|
||||
<text x="110" y="656" fill="#b6c7dd" font-family="system-ui, sans-serif" font-size="18">присваивание произошло поздно</text>
|
||||
|
||||
<rect x="52" y="742" width="616" height="506" rx="22" fill="#203a44" stroke="#4c9c9c" stroke-width="2" filter="url(#shadow)"/>
|
||||
<text x="86" y="793" fill="#b8f1e8" font-family="system-ui, sans-serif" font-size="29" font-weight="700">Мост: явный порядок</text>
|
||||
<text x="86" y="828" fill="#d5e0ef" font-family="system-ui, sans-serif" font-size="21">legacy-jquery-bridge.js</text>
|
||||
|
||||
<rect x="84" y="862" width="552" height="78" rx="14" fill="#294a5a"/>
|
||||
<text x="110" y="896" fill="#d9f6ff" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">import $ from 'jquery'</text>
|
||||
<text x="110" y="922" fill="#b6d9e4" font-family="system-ui, sans-serif" font-size="18">один объект в модуле</text>
|
||||
<path d="M360 940 L360 978" stroke="#62d7ff" stroke-width="4" marker-end="url(#arrowBlue)"/>
|
||||
|
||||
<rect x="84" y="997" width="552" height="78" rx="14" fill="#294a5a"/>
|
||||
<text x="110" y="1031" fill="#d9f6ff" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">window.jQuery = $</text>
|
||||
<text x="110" y="1057" fill="#b6d9e4" font-family="system-ui, sans-serif" font-size="18">legacy-контракт выполнен</text>
|
||||
<path d="M360 1075 L360 1113" stroke="#62d7ff" stroke-width="4" marker-end="url(#arrowBlue)"/>
|
||||
|
||||
<rect x="84" y="1132" width="552" height="78" rx="14" fill="#294a5a"/>
|
||||
<text x="110" y="1166" fill="#d9f6ff" font-family="ui-monospace, SFMono-Regular, monospace" font-size="20">require('./legacy-mask')</text>
|
||||
<text x="110" y="1192" fill="#b6d9e4" font-family="system-ui, sans-serif" font-size="18">плагин расширяет тот же $.fn</text>
|
||||
|
||||
<rect x="52" y="1300" width="616" height="112" rx="22" fill="#15243a" stroke="#365c7f" stroke-width="2"/>
|
||||
<text x="84" y="1340" fill="#f4f8ff" font-family="system-ui, sans-serif" font-size="24" font-weight="700">Проверка второго экземпляра</text>
|
||||
<text x="84" y="1376" fill="#c9dced" font-family="ui-monospace, SFMono-Regular, monospace" font-size="21">window.jQuery === imported$ ?</text>
|
||||
<text x="84" y="1403" fill="#b7c9df" font-family="system-ui, sans-serif" font-size="17">false: ищем другой resolved-путь или entry.</text>
|
||||
<circle cx="619" cy="1358" r="27" fill="#183e48" stroke="#62d7ff" stroke-width="3"/>
|
||||
<path d="M606 1358 L616 1368 L633 1348" fill="none" stroke="#74efd3" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
Reference in New Issue
Block a user