minor: сборщик CodeMirror и доки поменяли свои каталоги (подготовка к NPM для TailWindCSS) + в доки и скрипты внесены соответствующие правки.
This commit is contained in:
+20
-20
@@ -2,29 +2,29 @@
|
||||
|
||||
## Обзор
|
||||
|
||||
Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования текстовых полей в админке Django.
|
||||
Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования
|
||||
текстовых полей в админке Django.
|
||||
|
||||
## Структура проекта
|
||||
|
||||
- `frontend-assembly/`: Исходные файлы и скрипты для сборки.
|
||||
- `frontend-assembly/codemirror/`: Исходные файлы и конфиг для CodeMirror.
|
||||
- `package.json`: Список зависимостей CodeMirror 6.
|
||||
- `package-lock.json`: Файл с зафиксированными версиями зависимостей. **Не редактировать вручную!**
|
||||
- `build-codemirror6.sh`: Скрипт, который генерирует и собирает финальный JS-бандл.
|
||||
- `scripts/`: Скрипты для сборки компонентов CodeMirror.
|
||||
- `build-codemirror.sh`: Скрипт, который генерирует и собирает финальный JS-бандл.
|
||||
- `public/static/codemirror/`: Каталог с готовыми файлами для Django.
|
||||
- `editor.js`: Финальный, минифицированный JS-бандл. **Не редактировать вручную!**
|
||||
- `codemirror-styles.css`: Кастомные стили для интеграции с админкой.
|
||||
- `codemirror-patch.js`: JS-патч для управления размерами редактора.
|
||||
- `codemirror-styles.css`: Кастомные стили для интеграции с админкой (_приготовлено отдельно, не входят
|
||||
в сборку CodeMirror_).
|
||||
- `codemirror-patch.js`: JS-патч для управления размерами редактора (_приготовлено отдельно, не входит
|
||||
в сборку CodeMirror_).
|
||||
|
||||
## Как собрать бандл
|
||||
|
||||
После клонирования репозитория или обновления зависимостей, выполните:
|
||||
После клонирования репозитория или обновления зависимостей, выполните из корня проекта:
|
||||
|
||||
```bash
|
||||
# Перейдите в каталог сборки
|
||||
cd frontend-assembly
|
||||
|
||||
# Установите зависимости и соберите бандл
|
||||
bash ./build-codemirror6.sh
|
||||
bash ./scripts/build-codemirror.sh
|
||||
```
|
||||
|
||||
## Как использовать в Django Admin
|
||||
@@ -104,7 +104,7 @@ class YourModelAdmin(admin.ModelAdmin):
|
||||
|
||||
## Как добавить новый язык (например, jinja2 или xml)
|
||||
|
||||
1. **Добавить зависимость**: Откройте `frontend-assembly/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
|
||||
1. **Добавить зависимость**: Откройте `frontend-assembly/codemirror/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
|
||||
|
||||
```json
|
||||
// package.json
|
||||
@@ -115,7 +115,7 @@ class YourModelAdmin(admin.ModelAdmin):
|
||||
...
|
||||
```
|
||||
|
||||
2. **Обновить скрипт сборки**: Откройте `frontend-assembly/build-codemirror6.sh` и внесите два изменения в секцию `cat > "$WORK_DIR/src/editor.js" <<'EOF'`:
|
||||
2. **Обновить скрипт сборки**: Откройте `scripts/build-codemirror.sh` и внесите два изменения в секцию `cat > "$CODEMIRROR_DIR/src/editor.js" <<'EOF'`:
|
||||
- Добавьте импорт:
|
||||
```javascript
|
||||
import { xml } from '@codemirror/lang-xml';
|
||||
@@ -129,9 +129,7 @@ class YourModelAdmin(admin.ModelAdmin):
|
||||
|
||||
3. **Пересобрать бандл**:
|
||||
```bash
|
||||
cd frontend-assembly
|
||||
npm install # Установит новый пакет и обновит package-lock.json
|
||||
bash build-codemirror6.sh # Пересоберет editor.js с поддержкой XML
|
||||
bash ./scripts/build-codemirror.sh
|
||||
```
|
||||
|
||||
4. **Использовать в админке**: Теперь вы можете использовать `data-language="xml"` для любого поля.
|
||||
@@ -140,13 +138,15 @@ class YourModelAdmin(admin.ModelAdmin):
|
||||
|
||||
1. **Проверить устаревшие пакеты**:
|
||||
```bash
|
||||
cd frontend-assembly
|
||||
cd frontend-assembly/codemirror
|
||||
npm outdated
|
||||
```
|
||||
2. **Обновить версии**: Аккуратно обновите номера версий в `package.json`.
|
||||
2. **Обновить версии**: Аккуратно обновите номера версий в `frontend-assembly/codemirror/package.json`.
|
||||
3. **Установить обновления и пересобрать**:
|
||||
```bash
|
||||
cd frontend-assembly/codemirror
|
||||
npm install
|
||||
bash build-codemirror6.sh
|
||||
cd ../../
|
||||
bash ./scripts/build-codemirror.sh
|
||||
```
|
||||
4. **Закоммитить изменения**: Добавьте в коммит обновленные `package.json`, `package-lock.json` и `public/static/codemirror/editor.js`.
|
||||
4. **Закоммитить изменения**: Добавьте в коммит обновленные `frontend-assembly/codemirror/package.json`, `frontend-assembly/codemirror/package-lock.json` и `public/static/codemirror/editor.js`.
|
||||
@@ -5,7 +5,7 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "esbuild src/editor.js --bundle --format=iife --minify --outfile=${CM6_OUTPUT_DIR:-../public/static/codemirror}/editor.js"
|
||||
"build": "esbuild src/editor.js --bundle --format=iife --minify --outfile=${CM6_OUTPUT_DIR:-../../public/static/codemirror}/editor.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "7.29.7",
|
||||
Executable → Regular
+21
-28
@@ -1,17 +1,12 @@
|
||||
#!/usr/bin/env bash
|
||||
# Скрипт создаёт временную рабочую папку, ставит зависимости через `npm ci`, собирает
|
||||
# минимизированный бандл и затем сам удаляет временные `src/` и `node_modules/`.
|
||||
# В проекте остаётся только готовая статика:
|
||||
# * `public/static/codemirror/editor.js`
|
||||
#
|
||||
# Запуск:
|
||||
# bash ./frontend-assembly/build-codemirror6.sh
|
||||
# Сборка CodeMirror 6 для админки Django
|
||||
# Запуск из корня проекта: bash ./scripts/build-codemirror.sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
OUTPUT_DIR="$ROOT_DIR/../public/static/codemirror"
|
||||
WORK_DIR="$(mktemp -d "${TMPDIR:-/tmp}/codemirror6.XXXXXX")"
|
||||
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
CODEMIRROR_DIR="$PROJECT_ROOT/frontend-assembly/codemirror"
|
||||
OUTPUT_DIR="$PROJECT_ROOT/public/static/codemirror"
|
||||
|
||||
log() {
|
||||
printf '[codemirror6] %s\n' "$*"
|
||||
@@ -22,29 +17,25 @@ fail() {
|
||||
exit 1
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
rm -rf "$WORK_DIR"
|
||||
rm -rf "$ROOT_DIR/src" "$ROOT_DIR/node_modules"
|
||||
}
|
||||
|
||||
trap cleanup EXIT INT TERM
|
||||
|
||||
if ! command -v npm >/dev/null 2>&1; then
|
||||
fail 'Не найден `npm`. Установи Node.js и повтори сборку.'
|
||||
fi
|
||||
|
||||
if [[ ! -f "$ROOT_DIR/package.json" ]]; then
|
||||
fail "Не найден package.json: $ROOT_DIR/package.json"
|
||||
if [[ ! -f "$CODEMIRROR_DIR/package.json" ]]; then
|
||||
fail "Не найден package.json: $CODEMIRROR_DIR/package.json"
|
||||
fi
|
||||
|
||||
if [[ ! -f "$ROOT_DIR/package-lock.json" ]]; then
|
||||
fail "Не найден package-lock.json: $ROOT_DIR/package-lock.json"
|
||||
if [[ ! -f "$CODEMIRROR_DIR/package-lock.json" ]]; then
|
||||
fail "Не найден package-lock.json: $CODEMIRROR_DIR/package-lock.json"
|
||||
fi
|
||||
|
||||
mkdir -p "$WORK_DIR/src" "$OUTPUT_DIR"
|
||||
cp "$ROOT_DIR/package.json" "$ROOT_DIR/package-lock.json" "$WORK_DIR/"
|
||||
mkdir -p "$OUTPUT_DIR"
|
||||
|
||||
cat > "$WORK_DIR/src/editor.js" <<'EOF'
|
||||
# Создаём src/editor.js для CodeMirror
|
||||
mkdir -p "$CODEMIRROR_DIR/src"
|
||||
|
||||
log "Создаю src/editor.js в $CODEMIRROR_DIR"
|
||||
cat > "$CODEMIRROR_DIR/src/editor.js" <<'EOF'
|
||||
import { Compartment, EditorState } from '@codemirror/state';
|
||||
import { EditorView, lineNumbers, placeholder } from '@codemirror/view';
|
||||
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
||||
@@ -169,9 +160,8 @@ if (document.readyState === 'loading') {
|
||||
}
|
||||
EOF
|
||||
|
||||
log "СОБИРАЮ CodeMirror 6 ДЛЯ ФРОНТЕНДА АДМИНКИ ПРОЕКТА"
|
||||
log "Временная рабочая папка: $WORK_DIR"
|
||||
cd "$WORK_DIR"
|
||||
log "СОБИРАЮ CodeMirror 6"
|
||||
cd "$CODEMIRROR_DIR"
|
||||
|
||||
log 'Устанавливаю зависимости через npm ci'
|
||||
npm ci
|
||||
@@ -180,4 +170,7 @@ log 'Собираю CodeMirror 6'
|
||||
export CM6_OUTPUT_DIR="$OUTPUT_DIR"
|
||||
npm run build
|
||||
|
||||
log 'ГОТОВО'
|
||||
log 'Удаляю временные файлы (src/ и node_modules/)'
|
||||
rm -rf src node_modules
|
||||
|
||||
log 'ГОТОВО! Результат: '"$OUTPUT_DIR/editor.js"
|
||||
Reference in New Issue
Block a user