CLI

CLI sitelo opakowuje dołączone Vite i automatycznie wstrzykuje wtyczkę stron HTML.

Polecenia

sitelo              # to samo co sitelo dev
sitelo dev          # serwer deweloperski
sitelo build        # build produkcyjny
sitelo preview      # podgląd buildu produkcyjnego
sitelo lighthouse   # audyt buildu produkcyjnego

• dev — prawdziwy render SSR na żądanie, łącznie z trasami dynamicznymi, plus mały pasek deweloperski
• build — statyczny HTML w dist/ (albo w Twoim outDir)
• preview — serwuj build produkcyjny lokalnie
• lighthouse — audytuj build produkcyjny (wymaga peer dependency lighthouse)

Wyłącz pasek przez devToolbar: false w sitelo.config.js — zobacz Konfigurację.

Przydatne flagi

sitelo --port 8888
sitelo build --outDir public --emptyOutDir
sitelo --root docs

• --port / --host / --open — serwer
• --outDir / --emptyOutDir / --base — build
• --root — katalog główny projektu (wygodne dla witryny w docs/)
• --config — własny plik konfiguracyjny Vite
• --mode / --logLevel / --debug

Dla wszystkiego, czego używasz w wielu poleceniach, wybieraj opcje Vite w sitelo.config.js pod kluczem vite.

Szukanie nieużywanego kodu

knip znajduje pliki, eksporty i zależności, z których nikt nie korzysta. W projekcie sitelo potrzebuje jednej podpowiedzi: strony i wyspy są odkrywane z systemu plików, więc nikt ich nie importuje, a bez dodatkowej informacji knip zgłasza całą witrynę jako nieużywane pliki.

npm install -D knip

import { knipConfig } from 'sitelo/knip'

export default knipConfig()

npx knip

knipConfig() czyta Twój sitelo.config.js i oznacza strony oraz wyspy jako punkty wejścia dokładnie tak, jak odkrywa je build — działają pagesDir, pageExtensions, include i exclude. To, co zostaje w raporcie, to kod, do którego witryna naprawdę nigdy nie sięga.

Jednego nie zobaczy: skryptu klienckiego, do którego strona odwołuje się przez URL, a nie importem, jak <script src="/js/app.js">. Takie wypisz samodzielnie, a obok podaj cokolwiek innego, co knip przyjmuje — trafia to do wyniku. Końcowy ! to znacznik knipa dla kodu produkcyjnego, a skrypt wysłany do przeglądarki właśnie nim jest.

export default knipConfig({
  entry: ['src/js/app.js!'], // to, co strony ładują przez <script src>
  ignore: ['legacy/**'], // i cokolwiek innego, co knip przyjmie
})