'npx'에 해당하는 글 1건

 

vue create 명령으로 생성된 node_modules 와 package.json 을 살펴본다. 

 

package.json 파일에는 프로젝트 정보 및 scripts, dependencies, devDependencies 등의 속성이 기본적으로 포함되어 있다.

 

  • scripts : 주로 사용할 명령어 모음
  • dependencies : 해당 모듈에 필요한 라이브러리 모음 (프로덕션 환경)
  • devDependencies : 해당 모듈에 필요한 라이브러리 모음 (개발 및 테스트 환경)

 

 

1. dependencies / devDependencies 속성

 

디펜던시는 우리말로 의존성, 종속성이라고 한다. 라이브러리로 생각하면 편하지만, 어쨌든 이 속성에 기입하면 해당 모듈에 종속이 되므로 그냥 디펜던시라고 부른다. 이 디펜던시를 패키지 관리자(npm, yarn, ...)로부터 설치하고 나면 node_modules 디렉토리에 포함된다. 각종 테스트 도구나 컴파일러 관련 도구들은 개발 및 테스트 환경에서만 사용될 것이므로 devDependencies 속성에 포함할 것이다. 또한 빌드시 devDependencies 속성의 디펜던시들은 포함되지 않으므로 더 빠르고 가볍게 빌드가 가능하다. package.json 파일에 디펜던시를 정의한 후 npm 으로 설치해도 되고, npm 명령어(--save)로 설치 후에 package.json 파일의 디펜던시 속성을 업데이트 할 수도 있다.

 

> npm install --save vue vue-router vuex (--save: default)
> npm install --save-dev webpack webpack-cli

 

 

2. scripts 속성

 

...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

 

vue-cli-service serve 명령을 실행하면, 기본적으로 개발 서버 환경이 구동되며 브라우저(http://localhost:8080) 에서 프로젝트를 확인할 수 있다. 이 때 webpack-dev-server 기반의 HMR(Hot-Module-Replacement) 기능으로 소스 수정시 실시간으로 브라우저의 화면이 업데이트된다.

 

script 속성에는 패키지 관리자로부터 serve 명령을 실행하면 vue-cli-service serve 라는 구문을 실행하도록 되어 있는데 여기서 vue-cli-service 라는 파일은 ./node_modules/@vue/cli-service/bin/ 디렉토리에 있으며 ./node_modules/.bin 디렉토리에 심볼링 링크로 존재한다. 모든 디펜던시들이 이러한 형태를 가지고 있다. node_modules 디렉토리 안에 각자의 디렉토리들을 가지고 있으며 실행파일의 심볼릭 링크를 ./node_modules/.bin 디렉토리에 만들어서 경로를 단순하게 만들어 준다.

 

이 때 root 디렉토리에서 vue-cli-service serve 를 실행할 수 있는 방법은 다양하다.

 

> npm run serve (npm 사용)
> npx vue-cli-service serve (npx 사용)
> ./node_modules/.bin/vue-cli-service serve (심볼링 링크 사용)
> node ./node_modules/@vue/cli-service/bin/vue-cli-service serve (원본 파일 사용)
> vue-cli-service serve (./node_modules/.bin 디렉토리 path 추가 후 사용)


serve 명령 아래에 vue-cli-service build 명령을 실행하면, dist 디렉토리에 빌드된 결과물들이 생성되며, 이 결과물들을 실서버에 배포할 수 있다. vue-cli-service lint 명령은 소스 에러 체크시 사용한다.

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,