Vite predev/prebuild: 스크립트를 연속 실행하면서 정신이 나가지 않게

Source: Dev.to

내가 처음 시도한 방법

{
  "scripts": {
    "predev": "node scripts/hash.js && node scripts/split.js && node scripts/gen.js",
    "prebuild": "node scripts/hash.js && node scripts/split.js && node scripts/gen.js",
    "dev": "vite",
    "build": "vite build"
  }
}

문제점

• 중복 – predev와 prebuild가 동일합니다; 네 번째 단계를 추가하려면 두 항목을 모두 수정해야 합니다.
• 디버깅 어려움 – 중간 단계가 실패하면 체인이 멈추고 어느 단계가 실패했는지에 대한 컨텍스트를 제공하지 않습니다.

더 깔끔한 패턴

각 단계를 순차적으로 실행하고 진행 상황을 로그로 남기는 단일 오케스트레이터 스크립트를 만듭니다.

// scripts/prebuild.js
import { spawnSync } from 'node:child_process';

const STEPS = [
  ['hash-legal', 'scripts/hash-legal-content.cjs'],
  ['split-geojson', 'scripts/split_parcelas_by_sm.cjs'],
  ['gen-landings', 'scripts/generate_landings.js'],
];

for (const [name, file] of STEPS) {
  console.log(`▶ ${name}`);
  const start = Date.now();
  const res = spawnSync('node', [file], { stdio: 'inherit' });
  if (res.status !== 0) {
    console.error(`✗ ${name} failed (exit ${res.status})`);
    process.exit(res.status);
  }
  console.log(`✓ ${name} (${Date.now() - start}ms)`);
}

package.json을 업데이트하여 두 훅 모두 오케스트레이터를 사용하도록 합니다:

{
  "scripts": {
    "predev": "node scripts/prebuild.js",
    "prebuild": "node scripts/prebuild.js",
    "dev": "vite",
    "build": "vite build"
  }
}

• 네 번째 단계를 추가하고 싶나요? STEPS에 항목을 하나 더 추가하면 됩니다.
• 개발 중에 특정 단계를 건너뛰고 싶나요? 환경 변수를 기준으로 STEPS를 필터링하면 됩니다.
• 단계별 실행 시간을 알고 싶나요? 스크립트가 이미 로그를 남깁니다.

보너스: 병렬 단계

두 단계가 서로 독립적이라면(같은 파일을 쓰지 않는다) 전체 시간을 단축하기 위해 병렬로 실행할 수 있습니다:

// Example snippet inside scripts/prebuild.js
async function runStep(name, file) {
  console.log(`▶ ${name}`);
  const start = Date.now();
  const { status } = await import('child_process').then(cp =>
    cp.spawn('node', [file], { stdio: 'inherit' })
  );
  if (status !== 0) {
    console.error(`✗ ${name} failed (exit ${status})`);
    process.exit(status);
  }
  console.log(`✓ ${name} (${Date.now() - start}ms)`);
}

// Parallel execution
await Promise.all([
  runStep('hash', 'scripts/hash-legal-content.cjs'),
  runStep('split', 'scripts/split_parcelas_by_sm.cjs')
]);

await runStep('gen-landings', 'scripts/generate_landings.js');

독립적인 단계를 동시에 실행하면 저자의 프로젝트에서 predev 시간이 대략 절반으로 줄어들면서도 워크플로우는 간단하고 유지보수가 쉬워집니다.