Perintah dan Tooling

package.json menjadi satu-satunya pintu masuk perintah di repository ini. Berkas itu mendefinisikan enam script, dan semuanya memanggil perkakas yang dideklarasikan di berkas yang sama (package.json:5-12¹). Halaman ini memetakan tiap script ke perkakas dan berkas konfigurasinya.

Ketergantungan script ke tooling

graph LR
  dev["npm run dev"] --> viteDev["vite dev"]
  build["npm run build"] --> viteBuild["vite build"]
  preview["npm run preview"] --> viteBuild
  preview --> pagesDev["wrangler pages dev"]
  deploy["npm run deploy"] --> viteBuild
  deploy --> pagesDeploy["wrangler pages deploy"]
  lint["npm run lint"] --> prettier["prettier"]
  lint --> eslint["eslint ."]
  format["npm run format"] --> prettier
  viteDev --> viteConfig["vite.config.js"]
  viteBuild --> viteConfig
  viteConfig --> kitPlugin["sveltekit()"]
  viteConfig --> lokal["lokalTunnel"]
  kitPlugin --> svelteConfig["svelte.config.js"]
  svelteConfig --> adapterCF["adapter cloudflare"]
  prettier --> prettierrc[".prettierrc"]
  prettierrc --> sveltePlugin["prettier-plugin-svelte"]
  css["src/app.css"] --> postcss["postcss.config.js"]
  postcss --> tailwind["tailwindcss"]
  postcss --> autoprefixer["autoprefixer"]
  tailwind --> twConfig["tailwind.config.js"]
  preview --> wranglerToml["wrangler.toml"]
  deploy --> wranglerToml
  style viteBuild fill:#2d7d46,color:#fff
  style pagesDeploy fill:#2d7d46,color:#fff
  style pagesDev fill:#8b5cf6,color:#fff
  style prettier fill:#8b5cf6,color:#fff
  style eslint fill:#dc2626,color:#fff
  style viteConfig fill:#f59e0b,color:#000
  style svelteConfig fill:#f59e0b,color:#000
  style postcss fill:#f59e0b,color:#000
  style prettierrc fill:#f59e0b,color:#000
  style lokal fill:#f59e0b,color:#000
  style wranglerToml fill:#f59e0b,color:#000
%% fig: Ketergantungan script ke tooling
%% desc: Enam script npm bercabang ke vite, prettier, eslint, dan wrangler, lalu berujung pada berkas konfigurasi tiap perkakas.

dev dan build sama-sama berakhir di vite.config.js, yang mendaftarkan dua plugin: sveltekit() dan lokalTunnel (vite.config.js:3-12²). Sebaliknya lint dan format tidak menyentuh Vite; keduanya hanya memakai prettier, dan lint menambahkan eslint (package.json:9-10³). preview dan deploy berbagi langkah npm run build, lalu berbeda pada subcommand wrangler (package.json:8-11⁴).

Daftar perintah

Keenam baris di atas diambil langsung dari blok scripts (package.json:5-12¹). Kedua subcommand wrangler berasal dari paket wrangler versi ^3.68.0 di devDependencies (package.json:27⁵).

Prettier sebagai pemeriksa format

lint dan format membaca satu berkas konfigurasi yang sama, .prettierrc (package.json:9-10³). Opsi di dalamnya menentukan bentuk keluaran format dan hasil prettier --check .:

Seluruh nilai itu tertulis di .prettierrc:1-8 (.prettierrc:1-8). Plugin prettier-plugin-svelte sendiri dideklarasikan dengan versi ^3.1.2 (package.json:13-28⁶). Berkas .prettierignore hanya mengabaikan tiga berkas lock, yaitu package-lock.json, pnpm-lock.yaml, dan yarn.lock (.prettierignore:1-4), sehingga kode di src/ tetap diperiksa penuh.

PostCSS, Tailwind, dan app.css

postcss.config.js mendaftarkan tailwindcss dan autoprefixer sebagai plugin tanpa opsi tambahan (postcss.config.js:1-6⁷). Tailwind hanya memindai berkas di src/ lewat glob ./src/**/*.{html,js,svelte,ts} (tailwind.config.js:3⁸). Rantai itu baru aktif karena src/app.css memuat tiga aturan @tailwind (src/app.css:1-3⁹), dan berkas CSS itu diimpor di layout root (src/routes/+layout.svelte:2¹⁰).

lokal-vite-plugin di jalur dev

vite.config.js mengimpor default lokal-vite-plugin sebagai lokalTunnel dan memanggilnya sebagai plugin kedua setelah sveltekit() (vite.config.js:3-12²). Pemanggilan itu menyetel tunnelName: 'GitHub Roast' dan lanAddress: 'github-roast.local' (vite.config.js:8-11¹¹), jadi hanya npm run dev yang terpengaruh. Paket ini justru tercatat di blok dependencies, bukan devDependencies (package.json:30-34¹²), padahal pemakaiannya terbatas pada konfigurasi Vite saat dev.

Build bersama untuk preview dan deploy

preview dan deploy sama-sama menjalankan npm run build sebagai langkah pertama (package.json:8-11⁴). Keduanya lalu membaca wrangler.toml yang menetapkan pages_build_output_dir = ".svelte-kit/cloudflare" (wrangler.toml:2-4¹³) serta binding D1 bernama DB (wrangler.toml:28-31). Di sisi Vite, svelte.config.js mengimpor @sveltejs/adapter-cloudflare (svelte.config.js:1) dan memanggil adapter() tanpa argumen (svelte.config.js:10), sehingga direktori keluaran mengikuti default adapter tersebut.

⚠️ preview memakai wrangler pages dev dengan wrangler.toml yang sama seperti deploy, termasuk binding DB ke database githubroast (wrangler.toml:28-31¹⁴). Periksa kembali konfigurasi binding sebelum menjalankan salah satunya, karena keduanya berbagi direktori keluaran .svelte-kit/cloudflare (wrangler.toml:2-4¹³).

Langkah lengkap deploy ke Cloudflare Pages dibahas di Deployment ke Cloudflare Pages, sedangkan arti tiap binding ada di Konfigurasi Environment dan Binding.

Jebakan pada npm run lint

⚠️ lint menjalankan prettier --check . && eslint ., tetapi eslint tidak tercantum di blok devDependencies; blok itu hanya memuat @types/eslint (package.json:18¹⁷). Daftar berkas di akar repository juga tidak memuat konfigurasi eslint. Karena memakai &&, langkah eslint . baru dijalankan setelah prettier --check lolos, dan tanpa binary eslint yang terpasang langkah itu berhenti dengan galat.

Jalur yang selalu tersedia tanpa dependensi tambahan adalah npm run format, karena script itu hanya memanggil prettier (package.json:9-10³) yang sudah ada di devDependencies dengan versi ^3.1.1 (package.json:22¹⁸).