프로젝트 생성 명령어 npm init, npm create, npx 비교

vue 프로젝트를 생성하는데 갑자기 명령어가 이전과 묘하게 다르다는 생각이 들었다.

공식문서에도 두가지 버전이 있고 vue강의에서 나오는 명령어도 다르고 예전에 내가 봤던 강의를 되찾아봐도 또 다른 명령어로

프로젝트를 생성하고 있었다.

 

전에 vue 공부를 처음 시작할때는 webpack이 사용되었던 것 같은데

요즘 생성하는 프로젝트에는 vite를 사용한 프로젝트가 생성되길래 명령어의 차이인가 해서 

이번 기회에 프로젝트 생성 명령어 차이를 알아봤다.

 

우선 현재 기준 공식문서에는 npm create vue, npm init vue 로 프로젝트를 설치하라고 안내되어있다.

 

npm-init

 

npm 공식문서를 보면 init 명령어의 별칭(alias)이 create, innit 이라고 나와있어 같은 명령어임을 명시하고 있다.

또한 npx create-패키지명도 npm init과 같은 역할을 한다고 나와있다.

 

좀더 구글링을 해보니 npm init은 initializer이라 불리는 프로젝트 초기세팅 패키지를 실행한다는 것을 알 수 있었다.

이 initializer 패키지들은 npm 규칙에 따라 'create-패키지명' 이라는 이름으로 만들어져있다.

npm이 이 초기세팅 패키지를 실행하는 방법은 npx를 사용해서 'create-' 로 시작하는 패키지를 찾고 설치, 실행한뒤

프로젝트를 세팅하도록 하는 것이다.

npx를 통해 패키지를 임시로 설치했기 때문에 실행이 끝난뒤에는 디스크에서 제거되기 때문에

공간절약과 전역 패키지의 버전에 따른 영향에서 자유롭다는 이점이 있다고 한다.

 

 

실제로 위 명령어들로 프로젝트를 직접 설치해보면,

npm init vue 와 npm create vue 는 동일한 프로세스로 똑같은 프로젝트를 생성한다.

 

 

npx create-vue 명령어로 프로젝트를 생성했을 경우 완성된 프로젝트 세팅은 똑같지만

이전과 달리 실행하는 동안 >npx , >create-vue 를 부르는 단계가 없는 것을 확인할 수 있었다.

 

 

 

 

그리고 나를 또 혼란스럽게 만들었던 이전 기억의 명령어 'vue create 프로젝트명' ...

이 명령어는 vue CLI를 통해 프로젝트를 만드는데

현재는 maintenance mode 라고 하며, create-vue를 통해 vite기반 프로젝트를 만들 것을 권장하고 있다.

 

vue CLI를 실행하려면 먼저 전역으로 CLI를 설치한 뒤에 사용할 수 있다.

npm install -g @vue/cli

vue create 프로젝트명

 

실제로 전역으로 설치하는데에도 꽤 오랜 시간이 걸리고, 수많은 라이브러리들의 deprecated 경고 끝에 만들어진 프로젝트는

이렇게 웹팩 기반으로 좀더 많은 의존성들이 추가되어 있는 것을 볼 수 있었다.

 

 

 

결론

npm init [패키지] = npm create [패키지] 둘다 같은 명령어이고

-> 둘다 결국은 npx create-[패키지] 를 실행하게 된다.

 

 

참고)

https://www.daleseo.com/js-npm-init/

https://ktmihs.tistory.com/entry/Vuejs-Vue-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-CDN-vs-NPM-vs-CLI