95 lines
4.1 KiB
Markdown
95 lines
4.1 KiB
Markdown
# frontend-assembly
|
||
|
||
Эта папка отвечает за сборку CodeMirror 6 для админки Django.
|
||
Идея здесь простая: код редактора собирается как готовый минифицированный бандл,
|
||
а в репозиторий и в `public/static` попадает только итоговый результат.
|
||
|
||
## Что здесь лежит
|
||
|
||
### `package.json`
|
||
Главный файл npm-проекта.
|
||
|
||
В нём описано:
|
||
- имя сборочного пакета;
|
||
- версия;
|
||
- зависимость от `esbuild` и пакетов CodeMirror 6;
|
||
- npm-скрипт `build`.
|
||
|
||
Скрипт `build` собирает `src/editor.js` в файл:
|
||
|
||
```bash
|
||
../public/static/codemirror/editor.js
|
||
```
|
||
|
||
При сборке используется `--minify`, потому что редактор нужен как готовый
|
||
чёрный ящик для админки, а не как объект для отладки.
|
||
|
||
### `package-lock.json`
|
||
Файл фиксации версий npm-зависимостей.
|
||
|
||
Он нужен, чтобы сборка была воспроизводимой:
|
||
- `npm ci` ставит ровно те версии, которые уже зафиксированы;
|
||
- одинаковый результат получается и на деве, и на любой другой машине;
|
||
- при повторной сборке не подтягиваются случайные новые версии пакетов.
|
||
|
||
### `build-codemirror6.sh`
|
||
Основной скрипт сборки.
|
||
|
||
Он делает всё сам:
|
||
1. проверяет наличие `npm`;
|
||
2. создаёт временную рабочую папку;
|
||
3. временно создаёт там `src/editor.js`;
|
||
4. устанавливает зависимости через `npm ci`;
|
||
5. запускает `npm run build`;
|
||
6. кладёт готовый бандл в `public/static/codemirror/editor.js`;
|
||
7. удаляет временные `src/` и `node_modules/` после завершения.
|
||
|
||
Это означает, что в рабочем дереве не остаётся мусора от сборки.
|
||
|
||
### `src/editor.js`
|
||
Временный исходник редактора.
|
||
|
||
Он **не хранится в репозитории** как постоянный файл: скрипт создаёт его во
|
||
временной директории только на время сборки.
|
||
|
||
Внутри этого файла живёт минимальная инициализация CodeMirror 6:
|
||
- монтирование на `textarea[data-codemirror-editor]`;
|
||
- HTML-режим;
|
||
- JavaScript-режим;
|
||
- CSS-режим;
|
||
- тема `oneDark`;
|
||
- перенос строк;
|
||
- синхронизация значения редактора обратно в скрытую textarea.
|
||
|
||
Если позже захочется менять поведение редактора, логика правится либо в шаблоне,
|
||
который выдаёт этот исходник, либо прямо в сборочном скрипте.
|
||
|
||
### `public/static/codemirror/editor.js`
|
||
Готовый результат сборки.
|
||
|
||
Именно этот файл должен подключаться в Django-админке. Он уже минифицирован и
|
||
готов к использованию как обычная статика.
|
||
|
||
## Как запускать сборку
|
||
|
||
Из корня проекта:
|
||
|
||
```bash
|
||
bash ./frontend-assembly/build-codemirror6.sh
|
||
```
|
||
|
||
После успешного запуска в проекте должен обновиться только один полезный артефакт:
|
||
|
||
```bash
|
||
public/static/codemirror/editor.js
|
||
```
|
||
|
||
## Коротко о логике работы
|
||
|
||
Смысл этой папки такой:
|
||
- собрать CodeMirror 6 один раз;
|
||
- не держать в репозитории и контейнере лишний фронтенд-мусор;
|
||
- оставить Django только готовый JS-бандл для подключения в админке.
|
||
|
||
|