Pull to refresh

Comments 2

Если в проекте используется Webpack, то он при билде строит граф зависимостей, который можно отобразить в любом формате. Например, такой миниатюрный плагин позволяет описывать в .dot типа


digraph sources {
        rankdir=LR;
    "node_modules/@sentry/hub/esm/index.js" -> "node_modules/@sentry/hub/esm/session.js";
    "node_modules/@sentry/hub/esm/index.js" -> "node_modules/@sentry/hub/esm/scope.js";
    "node_modules/@sentry/hub/esm/index.js" -> "node_modules/@sentry/hub/esm/hub.js";
    "src/components/Footer/Footer.tsx" -> "src/components/Footer/Footer.scss";
    "src/components/Header/Header.tsx" -> "src/components/Header/Header.scss";
    "src/assets/icons.ts" -> "src/assets/icons/arrow-left-bold.svg";
    "src/assets/icons.ts" -> "src/assets/icons/arrow-left.svg";
    "src/assets/icons.ts" -> "src/assets/icons/arrow-right-bold.svg";
    "src/assets/icons.ts" -> "src/assets/icons/arrow-right.svg";
    "src/assets/icons.ts" -> "src/assets/icons/auth.svg";
}

который можно отобразить графически в одном из многочисленных онлайн просмотрщиков, либо в плагине к IDE (для WebStorm тот же dotplugin). Плюс в том, что можно самостоятельно выбирать итоговый формат, фильтровать, конкатенировать, включать в git для просмотра из онлайн-утилит, делать статический анализ зависимостей по сгенерированному графу в гит-хуках или CI. Минус в том, что учитываются только импорты, а не динамически используемые зависимости (через IoC, Context), поэтому для полноценной демонстрации архитектуры не подходит, но полноценный граф по реальным динамическим usages статическим анализом сгенерировать сложно.


Как-то медитировал над задачей "найти все использования параметров хранилищ в компонентах", но для этого нужен стейт, отслеживающий использование параметров (как MobX) и прогон полного автоматизированного регресса сайта. Хотя это вполне реально сделать, на практике фактически бесполезно — только для проверки, правильно ли используется архитектура в проекте.

Sign up to leave a comment.

Articles