package.json의 scripts에 대해서

3줄 정리

1. scripts의 key에 해당하는 것을 입력하면 value에 해당하는 것을 CLI에서 실행시켜준다.

2. scripts는 시스템 환경 변수부터 참조하여 node_modules/.bin의 명령어까지 참조하여 실행시킨다.

3. concurrently 모듈을 통해서 편하게 한 터미널에서 실행시킬 수 있다.

// package.json

...
  "scripts": {
    "dev": "concurrently \"yarn vite\" \"npx tailwindcss -i ./src/index.css -o ./src/output.css --watch\"",
    "build": "vite build",
    "preview": "vite preview"
  },
...

---

tailwind css를 도입하니까 css 쪽 관리하기는 편한데 개발 서버를 킬 때마다

npx tailwindcss -i ./src/index.css -o ./src/output.css --watch

를 따로 해줘야했다.

 

package.json의 scripts의 형태는

...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
...

같이 생겼다.

npm 또는 yarn을 사용하여 실행할 수 있는 스크립트로써, KEY에 해당하는 명령어를 입력하면 해당하는 값이 실행된다.

 

실제로 yarn dev를 실행하던 yarn vite를 실행하던 같다.

 

이를 통해서, node 명령어를 활용하여 일반 js 파일도 실행할 수 있다.

// test.js

console.log("hi");

// package.json
...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "normal": "node test.js"
  },
...

 

그렇다면, 프롬프트를 실행하는 start 같은 것도 되지 않을까? 싶어서 해봤다.

// package.json

...
  "scripts": {
    "dev": "start vite",
    "build": "vite build",
    "preview": "vite preview"
  },
...

wow

git도 되나??

// package.json

...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "git": "git push origin chore/automate-execution"
  },
...

WOW

---

갑자기 의문이 생겼다. git은 yarn git이나, git push ...으로 실행되지만,

yarn vite는 vite만 하면 안된다??

 

그렇다면, package.json의 scripts의 기본 디렉토리는 어떻게 될까? 싶었다.

이럴때는 docs지

https://docs.npmjs.com/cli/v9/commands/npm-run-script

npm-run-script | npm Docs

 

보니까 node_modules/.bin에 뭔가가 있다.

WOW

 

또 읽다보면, 시스템 환경 변수를 참조한다. 나는 vite를 전역적으로 설치하지 않았고, 환경 변수로 설정하지 않았다.

때문에 vite하나로는 실행할 수 없고, node_modules/.bin으로 실행할 수 있다.

 

scripts는 시스템 환경 변수를 참조하고 없다면 node_modules/.bin의 명령어를 실행한다.

 

그럼 이제, tailwind css랑 리액트 서버 구동을 같이하는 것을 할 차례

 

https://pimpdevelop.tistory.com/8

npm concurrently (여러개의 명령어를 동시에 실행)

 

concurrently를 설치하고 같이 실행할 명령어를 아마 정규식을 통해서 하나씩 하는 것 같다.

 

// package.json

...
  "scripts": {
    "dev": "concurrently \"yarn vite\" \"npx tailwindcss -i ./src/index.css -o ./src/output.css --watch\"",
    "build": "vite build",
    "preview": "vite preview"
  },
...

 

 

reference

https://docs.npmjs.com/cli/v9/commands/npm-run-script

https://pimpdevelop.tistory.com/8