React : node package.json scripts 속성 사용하기

1. live-server, babel 같은 범용적으로 많이 사용하는 라이브러리는 npm으로 설치 시에 global로 사용하면 편하다.

  1-1 문제는 이런 실행형 프로그램들은 버전이 자주 바뀌고 이 프로그램이 실행하는 소스와 호환성 문제도 생기기 쉽다.

  1-2 요즘에는 이런 호환성 문제로 global 설치는 권장하지 않고, 1회성 실행형의 경우 npx로 실행을 많이 하고

  1-3 작성한 프로그램과 밀접하게 연관되어 계속 실행해야 하는 webpack, babel같은 프로그램은 내장형으로 설치한다.

  1-4 예를 들면 지난 번까지 실행한 프로젝트의 package.json의 경우 모두 내장형으로 설치되었다.

 

{
  "name": "react-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "live-server": "^1.2.1"
  }
}

 

    1-4-1 이렇게 설치하면 실행코드가 ./node_modules/.bin/ 으로 시작해야 정상적으로 동작하게 된다.

 

./node_modules/.bin/live-server public

./node_modules/.bin/babel src/app.js --out-file public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react --watch

 

  1-5 위와 같이 실행하면 상당히 귀찮다. 그래서 우리는 package.json의 scripts 속성을 사용하여 명령을 지정할 수 있다.

 

{
  "name": "react-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "live-server public/",
    "build-babel": "babel src/app.js --out-file public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "live-server": "^1.2.1"
  }
}

 

    1-5-1 scripts 속성에 원하는 이름으로 실행을 원하는 명령어를 입력하면 npm run + 실행이름으로 기동할 수 있다.