[vue] npm run serve 입력 시

npm run serve 입력 시 localhost:8080, 즉 내 호스트에 뷰 프로젝트를 띄워준다.

이건 어디서 띄워주는 건지 궁금해서 알아봄

 

vue project 생성시 자동으로 package.json이 생성된다.

위 사진이 package.json의 일부이며 scripts에 npm명령어들이 설정되어있다.

npm run **** 로 해당 명령어들을 실행하면 됨

 

나는 지금까지 npm run serve로 뷰 프로젝트들을 실행해왔는데 귀찮다면 

npm run s

이렇게 바꿔서 실행도 가능

---

이 포스트는 어떻게 내호스트에 뷰 프로젝트를 띄워주는가가 목적이니 이만하고,

 

본문으로 돌아갔다.

처음엔 이렇게 생각했다

npm run serve를 입력하면 npm run vue-cli-service serve를 입력한 것과 똑같은건가?

해서 npm run vue-cli-service serve를 입력해보면 vue-cli-service란 스크립트 자체를 찾지 못했음

흠..

 

맨땅에 헤딩할때는 전체검색이죠

이렇게 나오네요

package-lock.json부터 보기로 함

 

오.. bin의 vue-cli-service,js파일을 실행해주는 듯 함

 

다음에는 전체검색으로 찾는것이 아니라

아래와 같이 탐색해야겠음

---

package.json의 scripts 즉 npm 명령어 부분에

vue-cli-service serve라는 문장이 있었고

그게 뭔지 나는 궁금함

마침 vue-cli-service는 dependencies에서 관리를 해주니

package-lock.json에서 더 자세하게 나와있겠구나

하여 package-lock.json의 파일에 들어가 vue-cli-service쪽을 살펴봄

---

node_moduels > bin > vue-cli-service.js

돌아와서 package-lock.json에 명시된 bin/vue-cli-service.js파일에 들어가보자

음... 이 부분은 뭔진 잘 모르겠지만

노드모듈에 뷰쪽에 저걸 실행해주는 듯

같은 경로에.cmd 확장자명도 있는걸보니

이걸 컴파일 한 후에 cmd에서 실행해주는 듯 하네요

---

node_moduls > @vue > cli-service > bin > vue-cli-service.js

저 경로로 이동하면 아래와 같은 파일이 나옴

음... 계속계속 나오네

service.run이라는 실행메소드로 의심되는게 보이니 service객체를 한 번 봅시다.

라고했으니 service객체가 너무 커 

 

command, args, rawArgv 값부터 확인해 봤음

 

command는 serve라 나왔고,

args는 아래와 같이,

rawArgv는 빈 배열로 나왔음

 

command에 먼저 집중해보기로 함

command자체가 args에서 받아온거길래 

위와같이 콘솔로 찍어보았는데

웃긴게 then안에서 args._ 안에는 빈배열로 비워져있었음.

service.run 메소드를 처리하는 과정에서 args._를 비워주나?

 

그래서 밖에다 한번 args._를 찍어봤음

나와 버렸노

 

service.run으로 실행해준단건 확인했으니

service 객체를 자세하게 파고들 차례

 

파고들기위해 

또 다른 경로로 출발..

---

node_moduls > @vue > cli-service > lib > service.js

찾았다 네이놈

아 언제까지 파고들어가야하죠?

3번만 더 참을게요

 

소스를 파악중..

첫번쨰 인자로 serve를 보냈으니 

this.modes[serve]가 mode로 들어가겠네요

console로 확인 ㄱㄱ

ok serve로 실행했으니 development가 들어갔네요

 

다음으론 command가 매우 수상해보임

console ㄱㄱ

여기다..

 

command의 fn이란 함수로 뷰 프로젝트를 띄워주는 듯 하여 테스트해보니

fn을 한번 더 실행 시 뷰 프로젝트를 띄워주는 행동을 두 번 한다.

 

command를 추적해봅시다.

---

node_moduls > @vue > cli-service > lib > service.js

스크립트의 상단에 command를 빈 객체로 선언해주네요

그런데 어디서 이 commands 객체를 가공해주는지 모르겠음;;

 

혹시 아까봤던 run메소드 실행도중에 가공해주나?

확인하기 위해 아래와 같이 테스트

과연 두구두구..

this.init함수에서 command를 가공해주네요.

이제 init함수로 갑시다

---

node_moduls > @vue > cli-service > lib > service.js

마찬가지로 같은 파일에 있음 

 

this.commands가 어디서 가공하는지 테스트해봤는데

apply함수에서 가공을 해줬음.

그래서 apply함수를 가지고 있는 plugins객체를 파고들어가봄

built-in:commands/serve .....

여기서 apply함수를 이용하여 뷰 프로젝트를 띄워주는

fn함수를 가지고 있는 command객체를 생성시킴

---

진도를 빼기 전 계속 꼬리에 꼬리를 무니 헷갈릴것같아 잠시 정리함

 

npm run serve를 입력할 시

node_moduls > @vue > cli-service > lib > service.js에서

service.run() 메소드를 실행하는것을 확인했고,

service 해당 객체를 추적하기 위해 

service 객체를 넣어주는 node_moduls > @vue > cli-service > lib > service.js로 이동했음

 

node_moduls > @vue > cli-service > lib > service.js로 이동하니

command객체에 'description:start development server', 포트 정보 의심가는것들이 보였고

테스트 결과

command객체의 fn함수로 프로젝트를 띄워주었음

 

그래서 fn함수가 어떻게 생성되었는지, 어떻게 생겨먹었는지 확인하기 위해 command를 생성해주는 곳을 찾아봄

node_moduls > @vue > cli-service > lib > service.js 파일(동일파일)의

this.init 메소드에서 command를 생성해주더라.

 

this.init을 보니 또 this.plugins의 apply함수에서 command를 생성해주는 걸 확인했음

그래서 apply함수에서 fn함수를 가지고 있는 command객체를 어떻게 생성해줬는지 알기위해

apply함수를 가지고 있는 this.plugins를 찾아감

---

node_moduls > @vue > cli-service > lib > service.js

소스를 찾아보니 plugins는 resolvePlugins 함수에서 생성을 해줌..

 

추적한 결과

resolvePlugins의 idToPlugin 함수에서 plugins를 생성하며 apply도 당연히 같이 설정된다.

(아래사진참고)

idToPlugin 함수의 인자로 사용되는 absolutePath에서 fn함수를 지니고 있는 command객체를 생성하는거고,

해당 path는 babel과 eslint의 index.js파일로 나왔음 (콘솔로 찍어봄)

하... 언제까지 갈런지

babel부터 찾아보기로 함

babel이나 eslint 파일이 apply에 들어가니,

babel이나 eslint에서 command객체를 생성해주는거 같음

command의 fn함수에서 프로젝트를 띄워주고

 

위 말을 여러번 하는 이유는

내가 까먹어서 복습해야돼요.

---

갑자기 뇌정지 와서 다시 정리함

this.commands 객체의 fn함수로 뷰 프로젝트를 띄워줌

this.commands를 설정하는것은 this.plugins 객체의 apply 함수임

this.plugins의 apply함수는 bable,eslint의 index.js파일에서 exports함

---

node_moduls > @vue > cli-plugin-babel > lndex.js

봤는데,

여기서부턴 잘 모르겠음

 

더 가지고 놀다보니

node_moduls > @vue > cli-service > lib > service.js 에서

apply함수의 인자로 넣는 new PluginAPI(id,this) 자체에 this.commands가 이미 있었음

plugins 객체의 apply함수로 뷰프로젝트를 띄워주는 fn함수가 있는 this.command객체를 생성해주는 줄 알았는데

apply함수는 PluginAPI에서 생성한 command를 그냥 this.command에 넣어주는 역할 같음

그래서 new PluginAPI쪽을 보는것으로 선회함

---

node_moduls > @vue > cli-service > lib > PluginAPI.js

해당 파일에 registerCommand 함수에 commands를 생성해주는게 있네요 fn까지....

이제 이 fn의 출처를 따라가면 될 듯 합니다.

 

라고 하고 찾아보는데

registerCommand로 검색을해봐도 호출하는 곳을 찾을수가 없네요.. 

클래스 생성할때 자동으로 실행해주는거라쳐도 인자는 어디서받는거지

여기의 fn으로 뷰 프로젝트를 띄워주는건데...

---

그냥 이쯤하고 cli 문서 등으로 찾아봐야될듯요.

끝이없네요.

그래도 이 포스팅으로 얻어가는게 있어야하니..

 

vue-cli에서는

위와 같은 방식으로 scripts에 명령어가 있다면

우측에 serve / build / lint / abc부분 짤라서

this.service.command에 해당하는 key를 찾아 그 안의 fn함수를 실행해줌

 

그래서

npm run abc를 입력시 5가찍히고

npm run abcd를 입력시 6이 찍힘

 

위 점을 이용해 npm 명령어를 추가할수도,,