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