Node.js, Package, dan Ekosistemnya · 6/7

Script, CLI, dan alat-alat di proyekmu

Apa yang sebenarnya dijalankan `bun run dev`, dan di mana posisi linter serta formatter.

Baca 22 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa yang sebenarnya dieksekusi `bun run dev`
Menambahkan sebuah script ke package.json
Menjelaskan fungsi linter dan formatter masing-masing
Membaca argument command-line di sebuah script

Field scripts adalah daftar jalan pintas bernama. bun run dev mencari "dev" lalu menjalankan string apa pun yang ditemukannya. Itu seluruh mekanismenya.

json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "test": "vitest run",
    "test:watch": "vitest"
  }
}

Script sebenarnya di proyek ini. Jadi bun run test menjalankan vitest run — kata run itu penting, karena vitest tanpa argument akan memantau perubahan dan tidak pernah berhenti, sehingga CI akan menggantung.

bash

bun run dev              # run the "dev" script
bun run                  # list the available scripts
bun dev                  # shorthand, works when there is no name clash

# Pass extra arguments through to the underlying command:
bun run test -- --reporter=verbose

# Chain scripts:
#   "verify": "bun run lint && bun run test && bunx tsc --noEmit"
# && stops at the first failure, which is what you want in CI.

Linter dan formatter

	Formatter	Linter
Peduli pada	Tampilan kodenya	Apa yang dilakukan kodenya
Contoh masalah	Baris terlalu panjang, indentasi salah	Variable tak terpakai, await yang hilang
Berpendapat soal	Tidak ada yang mengubah perilaku	Potensi bug yang nyata
Alat	Prettier, Biome	ESLint, Biome
Perlu diperdebatkan?	Tidak — terima saja konfigurasinya	Kadang, dengan alasan

Formatter mengakhiri perdebatan soal gaya dengan membuatnya otomatis. Linter menemukan masalah nyata — dan aturan React di proyek ini menangkap dua kesalahan sungguhan saat ia dibangun: sebuah setState di dalam effect yang akan memicu render berantai, dan mutasi DOM langsung di badan sebuah component.

Membaca argument

Sebuah script sering butuh input. Node menaruh command line di process.argv, di mana dua entri pertamanya adalah binary Node dan path script-mu — argument yang kamu pedulikan mulai dari indeks 2. Mem-parse-nya tampak sepele tapi mengandung satu jebakan nyata, yang sengaja dimasuki runner di bawah ini.

// node scripts/seed.ts --count 20 --locale id --dry-run
console.log(process.argv);
// [ "/usr/bin/node", "/app/scripts/seed.ts", "--count", "20", ... ]

const args = process.argv.slice(2);   // the part that is yours

Coba sendiri

Dua parser: yang naif, dan yang benar. Selisih di antara keduanya adalah alasan alat CLI sungguhan mewajibkanmu mendeklarasikan opsi-opsimu di awal.

const input = ["--count", "20", "--locale=id", "--dry-run", "seed", "extra"];

// --- Attempt 1: guess, by looking at whether the next item starts with -- ---
function parseNaive(args) {
  const options = {};
  const positional = [];

for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (!arg.startsWith("--")) { positional.push(arg); continue; }

const naive = parseNaive(input);
console.log("naive options:   ", naive.options);
console.log("naive positional:", naive.positional);
console.log("--dry-run swallowed 'seed' as its value. Wrong.");
console.log("");

// The ambiguity: "--dry-run seed" and "--locale id" look IDENTICAL.
// Nothing in the text says which flags take a value. You must declare it.

// --- Attempt 2: declare which options are booleans ---
const BOOLEAN_FLAGS = new Set(["dry-run", "verbose"]);

function parseArgs(args) {
  const options = {};
  const positional = [];

for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (!arg.startsWith("--")) { positional.push(arg); continue; }

const name = arg.slice(2);
    if (name.includes("=")) {
      const [key, ...rest] = name.split("=");
      options[key] = rest.join("=");
      continue;
    }
    if (BOOLEAN_FLAGS.has(name)) { options[name] = true; continue; }

const next = args[i + 1];
    if (next === undefined || next.startsWith("--")) {
      throw new Error("Option --" + name + " needs a value");
    }
    options[name] = next;
    i++;
  }
  return { options, positional };
}

const parsed = parseArgs(input);
console.log("correct options:   ", parsed.options);
console.log("correct positional:", parsed.positional);

// Values always arrive as STRINGS. Convert and validate deliberately.
const count = Number(parsed.options.count);
console.log("count as a number:", count, "- valid?", Number.isInteger(count));
console.log("dry run?", parsed.options["dry-run"] === true);

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Tambahkan sebuah script ke proyek ini: "verify": "bun run lint && bun run test && bunx tsc --noEmit". Jalankan dan pastikan ketiganya lolos. Lalu sengaja rusak salah satunya — tambahkan variable tak terpakai di file mana pun — dan jalankan bun run verify lagi. Perhatikan ia berhenti di kegagalannya dan tidak menjalankan langkah setelahnya.

Hasil yang diharapkan

Tiga langkah lolos, lalu berhenti di langkah pertama yang gagal.