npm run generate와 npx nuxi generate는 무엇이 다를까

Nuxt 애플리케이션을 정적 사이트로 배포하려고 자료를 찾아보면 빌드 명령이 두 가지로 나온다. 하나는 npm run generate, 다른 하나는 npx nuxi generate다. 둘 다 “애플리케이션을 정적 파일로 빌드한다"고 설명되어 있다.

둘이 어떻게 다른지 알려면 앞에 붙은 npm run과 npx가 각각 무슨 일을 하는지부터 봐야 한다. 이 글에서는 두 명령을 앞에서부터 한 조각씩 나눠 정리한다.

npm은 저장소이면서 CLI다

npm은 Node Package Manager의 약자이고, 두 가지를 함께 가리킨다.

• npm 레지스트리: 전 세계 개발자가 만든 JavaScript 라이브러리와 애플리케이션을 호스팅하고 공유하는 중앙 저장소다. 필요한 패키지를 찾아 내려받고, 내가 만든 패키지를 올려 다른 사람과 나눈다. 웹 사이트로도, npm CLI로도 접근할 수 있다.

• npm CLI: 패키지 설치, 업데이트, 삭제로 프로젝트의 의존성을 관리한다. package.json에 정의한 스크립트를 실행하는 것도 이 CLI다.

npm run generate는 package.json을 봐야 안다

npm run은 package.json의 scripts에 정의된 스크립트를 실행하는 명령이다. npm run generate가 실제로 무엇을 돌리는지는 package.json을 열어 봐야 알 수 있다.

generate에는 nuxt generate가 걸려 있다. nuxt generate는 애플리케이션의 모든 페이지를 사전 렌더링해 HTML 파일로 바꾸고, 필요한 JavaScript, CSS, 이미지 파일을 만든다.

nuxt generate는 Nuxt 2 시절부터 있던 명령이지만 Nuxt 3에서도 이름 그대로 쓴다. 위 scripts에 있는 "postinstall": "nuxt prepare"는 Nuxt 3 프로젝트의 설정이다.

npx는 설치하지 않은 패키지도 실행한다

npx는 npm 5.2.0 버전부터 기본으로 들어 있는 패키지 러너다. 로컬이나 글로벌에 설치하지 않은 패키지도 npm 레지스트리에서 받아 바로 실행한다. 한 번만 쓰고 말 도구를 돌리거나, 여러 버전을 시험해 보거나, 프로젝트마다 버전이 다른 도구를 쓸 때 유용하다.

nuxi는 Nuxt 3의 CLI다

Nuxt 3는 nuxi라는 CLI를 새로 도입했다. nuxi generate도 애플리케이션을 정적 파일로 빌드한다. 공식 문서에 따르면 nuxi build를 prerender 옵션을 켠 채로 실행하는 명령이고, 결과물은 .output/public에 쌓인다. 이 디렉토리가 정적 호스팅에 올릴 대상이다.

npx로 부르기 때문에 프로젝트에 nuxi가 설치되어 있지 않아도 실행된다.

그렇다면 npm run generate와는 무엇이 다를까. Nuxt 3의 nuxt 패키지는 nuxt와 nuxi 두 이름으로 같은 CLI를 등록한다. Nuxt 3 프로젝트라면 npm run generate와 npx nuxi generate는 같은 빌드를 돌린다. 다른 것은 호출 경로뿐이다.

graph LR
  A["npm run generate"] --> B["package.json scripts"]
  B --> C["nuxt generate"]
  D["npx nuxi generate"] --> E["nuxi CLI"]
  C --> E
  E --> F["prerender 빌드"]
  F --> G[".output/public"]

팀 프로젝트라면 npm run generate 쪽이 낫다고 본다. 빌드 명령이 package.json에 적혀 있으니 누가 돌려도 같은 명령이 실행된다. npx nuxi generate는 scripts를 거치지 않고 바로 부를 때 쓴다.

정리

npm run은 package.json scripts를, npx는 설치 여부와 상관없이 패키지를 실행한다. Nuxt 3에서는 nuxt와 nuxi가 같은 CLI라서 두 명령의 결과물도 같다. 배포할 파일은 .output/public에서 찾으면 된다.