12. 뷰 CLI 에서 사용하는 NPM

# npm (node package manager) : 전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소이다.

 

NPM 설치 명령어

# npm install : npm 설정 파일 (package.json) 에 설정된 라이브러리 목록을 다운로드 할 수 있다.

​

# --save 옵션과 --save-dev 옵션 :

→ 두 옵션의 공통기능 : 웹팩 추가 설정을 위해 플러그인 라이브러리나 애플리케이션 로직과 관련된 외부 라이브러리를 추가해준다.

→ 두 옵션의 차이 : npm 설정 파일의 라이브러리 목록에 설치된 라이브러리 이름이 추가되는 곳만 다르다

​

(1) dependencies : 애플리케이션을 동작하는 데에 필요한 라이브러리

(2) devdependencies : 애플리케이션을 개발할 때 필요한 라이브러리

​

따라서,

(1) npm install --save : dependencies 속성에 라이브러리 이름이 추가

(2) npm install --save-dev : devdependencies 속성에 라이브러리 이름이 추가된다.

 

  // package.json 
 "dependencies": {
    "vue": "^2.5.11"
  },
...
 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

# 전역 설치와 지역 설치

​

-global : 라이브러리를 시스템 레벨에 설치하는 옵션이다. (전역 설치)

--save-dev : 프로젝트에 설치하는 옵션이다. (지역 설치)

​

# npm run build : 웹팩으로 프로젝트를 빌드할 때

# npm run dev : 프로젝트를 웹팩 데브 서버로 구동할 때

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

dev 속성과 build 속성이 npm run 으로 명령어를 실행할 때의 대상 속성이다.

따라서 npm run dev 를 하면 webpack-dev-server --open --hot 을 실행한 것과 같은 효과이다.

​

→ scripts 속성에 원하는 명령어 추가, 해당 명령어를 실행했을 때 동작하는 옵션들을 정의할 수 있다.