# ============================================================= # SPFx + Heft project bootstrap script (PowerShell) # ВАРИАНТ С ПОДКЛЮЧЕНИЕМ ОБЩЕЙ UI-БИБЛИОТЕКИ @tnsu/ui-kit. # Запустите из корня вашей ПУСТОЙ папки проекта: # .\create-spfx-uikit.ps1 # # Если запуск скриптов заблокирован, выполните сначала: # Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned # # Требование: у запускающего должен быть токен @tnsu в ~/.npmrc # (см. README пакета tnsu-ui-kit) — иначе установка @tnsu/ui-kit не пройдёт. # ============================================================= $ErrorActionPreference = "Stop" # ---- Цвета вывода ---- function Info { param($msg) Write-Host "[INFO] $msg" -ForegroundColor Cyan } function Success { param($msg) Write-Host "[OK] $msg" -ForegroundColor Green } function Warn { param($msg) Write-Host "[WARN] $msg" -ForegroundColor Yellow } function Header { param($msg) Write-Host "`n$msg" -ForegroundColor White } Header "=================================================" Header " SPFx + Heft — автоматическая инициализация" Header " (с общей UI-библиотекой @tnsu/ui-kit)" Header "=================================================`n" # --------------------------------------------------------- # 1. Проверка Node.js (SPFx 1.20+ требует Node 18+) # --------------------------------------------------------- Info "Проверка Node.js..." try { $nodeVersion = node -e "process.stdout.write(process.version)" 2>&1 } catch { Warn "Node.js не найден. Установите Node 18 LTS: https://nodejs.org" exit 1 } $nodeMajor = [int]($nodeVersion.TrimStart('v').Split('.')[0]) if ($nodeMajor -lt 18) { Warn "Обнаружен Node.js $nodeVersion. SPFx 1.20+ требует Node 18.x или выше." Warn "Установите Node 18 LTS через nvm-windows или с https://nodejs.org" exit 1 } Success "Node.js $nodeVersion — подходит." # --------------------------------------------------------- # 2. Вспомогательная функция: установка глобального пакета # --------------------------------------------------------- function Install-GlobalIfMissing { param( [string]$Package, [string]$Command = "" ) if ($Command -eq "") { $Command = $Package.Split('/')[-1] } if (-not (Get-Command $Command -ErrorAction SilentlyContinue)) { Info "Устанавливаем $Package глобально..." npm install -g $Package Success "$Package установлен." } else { Success "$Package уже установлен." } } Install-GlobalIfMissing "@microsoft/generator-sharepoint" "yo" Install-GlobalIfMissing "yo" "yo" Install-GlobalIfMissing "@rushstack/heft" "heft" # --------------------------------------------------------- # 3. Создание package.json # --------------------------------------------------------- Info "Создаём package.json..." $packageJson = @' { "name": "spfx-heft-project", "version": "0.0.1", "private": true, "scripts": { "build": "heft build", "bundle": "heft build && gulp bundle --ship", "package-solution": "heft build && gulp package-solution --ship", "serve": "heft build && gulp serve", "clean": "heft clean" }, "overrides": { "ajv": "^8.0.0" } } '@ $packageJson | Set-Content -Encoding UTF8 "package.json" Success "package.json создан." # --------------------------------------------------------- # 4. Создание структуры папок # --------------------------------------------------------- Info "Создаём структуру папок..." New-Item -ItemType Directory -Force -Path "config" | Out-Null New-Item -ItemType Directory -Force -Path "src\webparts" | Out-Null Success "Папки созданы." # --------------------------------------------------------- # 5. Запуск Yeoman-генератора SPFx # --------------------------------------------------------- Info "Запускаем Yeoman-генератор SPFx..." Write-Host "" Write-Host ">>> Сейчас откроется интерактивный генератор Yeoman." -ForegroundColor Yellow Write-Host ">>> Выберите тип: WebPart, Framework: No framework (или React)." -ForegroundColor Yellow Write-Host "" yo "@microsoft/sharepoint" npm uninstall @microsoft/sp-build-web ajv gulp npm uninstall @microsoft/rush-stack-compiler-5.3 # --------------------------------------------------------- # 6. Установка Heft и Rush Stack зависимостей # --------------------------------------------------------- Info "Устанавливаем Heft и плагины..." $devDeps = @( "@microsoft/spfx-web-build-rig@1.22.1", "@microsoft/spfx-heft-plugins@1.22.1", "@microsoft/eslint-config-spfx@1.22.1", "@microsoft/eslint-plugin-spfx@1.22.17", "@microsoft/sp-module-interfaces@1.22.1", "@rushstack/eslint-config@4.5.2", "@rushstack/heft@1.1.2", "@types/heft-jest@1.0.2", "@typescript-eslint/parser@8.46.2" ) npm install --save-dev @($devDeps) --save-exact --force --legacy-peer-deps npm install typescript@~5.8.0 --save-dev Success "Heft и плагины установлены." # --------------------------------------------------------- # 7. config/rig.json # --------------------------------------------------------- Info "Создаём config\rig.json..." New-Item -ItemType Directory -Force -Path "config" | Out-Null $rigJson = @' { "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json", "rigPackageName": "@microsoft/spfx-web-build-rig" } '@ $rigJson | Set-Content -Encoding UTF8 "config\rig.json" Success "config\rig.json создан." # --------------------------------------------------------- # 8. config/sass.json # --------------------------------------------------------- Info "Создаём config\sass.json..." New-Item -ItemType Directory -Force -Path "config" | Out-Null $sassJson = @' { "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json", "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json" } '@ $sassJson | Set-Content -Encoding UTF8 "config\sass.json" Success "config\sass.json создан." # --------------------------------------------------------- # 9. config/typescript.json # --------------------------------------------------------- Info "Создаём config\typescript.json..." New-Item -ItemType Directory -Force -Path "config" | Out-Null $typescriptJson = @' { "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json", "staticAssetsToCopy": { "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"], "includeGlobs": ["webparts/*/loc/*.js"] } } '@ $typescriptJson | Set-Content -Encoding UTF8 "config\typescript.json" Success "config\typescript.json создан." # --------------------------------------------------------- # 8. tsconfig.json (если Yeoman ещё не создал) # --------------------------------------------------------- if (-not (Test-Path "tsconfig.json")) { Info "Создаём tsconfig.json..." $tsConfig = @' { "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json" } '@ $tsConfig | Set-Content -Encoding UTF8 "tsconfig.json" Success "tsconfig.json создан." } else { Success "tsconfig.json уже существует, пропускаем." } # --------------------------------------------------------- # 9. .eslintrc.js (если не создан) # --------------------------------------------------------- if (-not (Test-Path ".eslintrc.js")) { Info "Создаём .eslintrc.js..." $eslintConfig = @' require('@rushstack/eslint-config/patch/modern-module-resolution'); module.exports = { extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'], parserOptions: { tsconfigRootDir: __dirname } }; '@ $eslintConfig | Set-Content -Encoding UTF8 ".eslintrc.js" Success ".eslintrc.js создан." } else { Success ".eslintrc.js уже существует, пропускаем." } # --------------------------------------------------------- # 10. .gitignore # --------------------------------------------------------- Info "Создаём .gitignore..." $gitignore = @' node_modules/ lib/ dist/ temp/ *.sppkg .heft/ sharepoint/solution/ '@ $gitignore | Set-Content -Encoding UTF8 ".gitignore" Success ".gitignore создан." # --------------------------------------------------------- # 11. Финальный npm install # --------------------------------------------------------- $devDeps = @( "@microsoft/sp-component-base@1.22.1", "@microsoft/sp-core-library@1.22.1", "@microsoft/sp-lodash-subset@1.22.1", "@microsoft/sp-office-ui-fabric-core@1.22.1", "@microsoft/sp-property-pane@1.22.1", "@microsoft/sp-webpart-base@1.22.1" ) Info "Финальный npm install..." npm install @($devDeps) --save-exact --legacy-peer-deps Success "Все зависимости установлены." # --------------------------------------------------------- # 12. Подключение общей UI-библиотеки @tnsu/ui-kit # --------------------------------------------------------- Info "Подключаем @tnsu/ui-kit..." # .npmrc: адрес registry для скоупа @tnsu (НЕ секрет, можно коммитить). # Токен на чтение — у каждого разработчика свой, в ~/.npmrc (в проект не кладём). $npmrc = @' @tnsu:registry=http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/ '@ $npmrc | Set-Content -Encoding UTF8 ".npmrc" Success ".npmrc создан (адрес registry @tnsu)." try { npm install @tnsu/ui-kit Success "@tnsu/ui-kit установлен." Write-Host " Импорт: import { Button } from '@tnsu/ui-kit';" -ForegroundColor DarkGray Write-Host " Стили: import '@tnsu/ui-kit/styles.css'; (один раз в корневом компоненте)" -ForegroundColor DarkGray } catch { Warn "Не удалось поставить @tnsu/ui-kit. Скорее всего нет токена @tnsu в ~/.npmrc." Warn "Создай токен (Gitea → Настройки → Приложения → package: Read) и пропиши в ~/.npmrc:" Warn " //git.tnsu.kz/api/packages/timur.gorodetskiy/npm/:_authToken=ТВОЙ_ТОКЕН" Warn "Потом выполни: npm install @tnsu/ui-kit" } # --------------------------------------------------------- # Готово # --------------------------------------------------------- Write-Host "" Write-Host "=================================================" -ForegroundColor Green Write-Host " Проект успешно инициализирован!" -ForegroundColor Green Write-Host "=================================================" -ForegroundColor Green Write-Host "" Write-Host " Доступные команды:" -ForegroundColor White Write-Host "" Write-Host " npm run serve " -NoNewline -ForegroundColor Cyan Write-Host "— локальная разработка (gulp serve)" Write-Host " npm run build " -NoNewline -ForegroundColor Cyan Write-Host "— сборка через Heft" Write-Host " npm run bundle " -NoNewline -ForegroundColor Cyan Write-Host "— бандлинг для продакшна" Write-Host " npm run package-solution " -NoNewline -ForegroundColor Cyan Write-Host "— создание .sppkg пакета" Write-Host " npm run clean " -NoNewline -ForegroundColor Cyan Write-Host "— очистка артефактов сборки" Write-Host "" Write-Host " UI-библиотека: " -NoNewline -ForegroundColor Yellow Write-Host "@tnsu/ui-kit подключён (см. .npmrc)" -ForegroundColor Cyan Write-Host "" Write-Host " Следующий шаг: " -NoNewline -ForegroundColor Yellow Write-Host "npm run serve" -ForegroundColor Cyan Write-Host ""