npm 스크립트 실행, 구성 및 문제 해결 방법

npm 스크립트는 JavaScript 프로젝트에서 작업을 자동화하는 데 사용할 수 있는 일련의 터미널 명령을 번들로 제공합니다. 또한 서로 다른 환경에서 명령을 실행하는 일관된 방법을 제공합니다.

package.json 파일에서 npm 스크립트를 설정하고 명령줄에서 실행하고 다양한 옵션을 사용하여 동작을 구성할 수 있습니다.

package.json 파일에서 npm 스크립트 설정

일반적으로 JavaScript 프로젝트의 루트에 있는 package.json 파일에서 npm 스크립트를 정의합니다. 다른 파일에서 스크립트를 실행할 수 있으므로 필수는 아니지만 package.json을 사용하면 스크립트에 더 쉽게 액세스하고 관리할 수 있습니다.

따라 하려면 개발 환경에 npm 및 Node가 설치되어 있어야 합니다. 다음은 유용한 기사입니다.

• Windows에 Node.js 및 npm을 설치하는 방법.
• Ubuntu에 Node.js 및 npm을 설치하는 방법.

package.json에서 npm 스크립트를 설정하려면 아래 단계를 따르십시오.

1. 프로젝트의 루트로 이동합니다.
2. 터미널에서 npm init를 실행합니다. 이 명령은 프로젝트에 대한 몇 가지 질문을 합니다. 응답하여 적절한 package.json 파일을 생성합니다. npm init

3. package.json 파일에서 scripts 필드를 찾습니다. 여기에서 스크립트의 이름과 키/값 쌍으로 실행해야 하는 명령을 추가할 수 있습니다. 예를 들어 아래의 hello-world라는 스크립트는 실행 시 터미널에 “Hello world”를 출력합니다. {
    "scripts": {
        "hello-world": "echo \\"Hello world\\""
    }
}


다음은 JavaScript 프로젝트에 대한 몇 가지 일반적인 스크립트입니다.

• start : 이 스크립트는 개발 서버를 시작합니다. 예를 들어 Node 프로젝트에서 nodemon을 사용하여 서버를 실행할 수 있습니다.
• build : 애플리케이션의 프로덕션 코드를 생성하고 webpack과 같은 도구를 사용하여 코드를 축소하고 묶을 수 있습니다.
• test : 이 스크립트는 프로젝트에 정의된 테스트를 실행합니다. Jest와 같은 테스트 프레임워크를 실행할 수 있습니다.
• lint : lint 스크립트는 ESLint와 같은 linting 도구를 실행하여 잠재적인 오류가 있는지 코드를 확인합니다.
• watch : 이 스크립트는 소스 코드에서 변경 사항을 감시한 다음 명령을 실행합니다. 테스트를 다시 실행하거나 코드 변경 시 애플리케이션을 다시 빌드하는 데 유용합니다.
• deploy : 프로덕션 또는 스테이징과 같은 지정된 환경에 애플리케이션을 배포하는 명령을 실행합니다.

사전 및 사후 스크립트

npm은 사전 및 사후 스크립트를 지원합니다. 사전 스크립트는 특정 스크립트 이전에 실행되고 사후 스크립트는 이후에 실행됩니다. 모든 스크립트에 대해 사전 및 사후 스크립트를 생성할 수 있습니다. 스크립트 이름에 “pre” 또는 “post” 접두사를 붙이기만 하면 됩니다.

예를 들어, 아래는 각각 테스트 스크립트 전후에 실행되는 사전 테스트 및 사후 테스트 스크립트입니다.

{
    "scripts": {
        "pretest": "npm run lint",
        "test": "jest",
        "posttest": "npm run build"
    }
}


package.json에서 npm 스크립트 실행

package.json에 npm 스크립트를 추가했으면 npm run 명령을 사용하여 실행할 수 있습니다.

구문은 다음과 같습니다.

npm run <script-name>


예를 들어 앞에서 정의한 시작 스크립트를 실행하려면 다음을 사용합니다.

npm run start


npm run 명령을 자체적으로 실행하여 프로젝트에서 사용 가능한 모든 스크립트 목록을 가져올 수 있습니다. 다음은 몇 가지 예시 출력입니다.

Scripts available in npm-scripts-demo@1.0.0 via `npm run-script`:
  hello-world
    echo "Hello world"


여기에는 스크립트의 이름과 스크립트가 실행하는 명령이 나열됩니다.

단축 명령을 사용하여 내장 스크립트 실행

npm은 속기 명령을 사용하여 실행할 수 있는 여러 내장 스크립트를 지원합니다. 예를 들어 start라는 npm 스크립트를 실행하려면 npm run start 대신 npm start를 사용할 수 있습니다.

이것은 전체 명령을 입력하는 것보다 더 편리하고 빠릅니다. 이와 같이 실행할 수 있는 다른 기본 제공 스크립트에는 “test”, “stop” 및 “restart”가 포함됩니다.

여러 npm 스크립트 실행

두 가지 방법으로 여러 npm 스크립트를 실행할 수 있습니다.

• 순차적으로
• 병행하여

Linux 또는 기타 Unix 계열 시스템을 사용하는 경우 한 번에 여러 명령을 실행하는 표준 방법을 사용할 수 있습니다.

여러 npm 스크립트를 순차적으로 실행하려면 &&를 사용하십시오. 예를 들면 다음과 같습니다.

npm run start && npm test


여러 npm 스크립트를 병렬로 실행하려면 &를 사용하십시오. 예를 들면 다음과 같습니다.

npm run server & npm run client


비 UNIX 환경에서는 npm-run-all 명령 또는 npm 패키지를 동시에 사용할 수 있습니다.

npm-run-all 사용:

npm-run-all --parallel server client


package.json에서 동시에 사용.

"scripts": {
    "dev": "concurrently \\"npm run server\\"\\"npm run client\\"",
}


사용하기 전에 npm-run-all 및 Concurrently 패키지를 설치해야 합니다.

일반적인 Npm 스크립트 오류 문제 해결

다음은 npm 스크립트를 실행할 때 발생할 수 있는 몇 가지 일반적인 오류입니다.

• npm 오류! missing script — 이 오류는 package.json 파일에서 실행하려는 스크립트를 정의하지 않은 경우에 발생합니다. 스크립트 이름의 철자가 정확하고 package.json 파일의 scripts 필드에 정의되어 있는지 확인하십시오.
• 권한 거부 — 이 오류는 스크립트를 실행할 권한이 없을 때 발생하므로 올바른 권한이 있는지 확인하십시오.
• 누락된 종속성 – 이 오류는 스크립트가 설치되지 않은 패키지를 사용할 때 발생합니다. depcheck 와 같은 도구를 사용 하여 package.json에서 누락된 종속성을 확인한 다음 npm install을 사용하여 설치하십시오.
• 알 수 없는 명령 — 이 오류는 일반적으로 사용자 지정 스크립트를 기본 제공 npm 명령으로 실행할 때 발생합니다. 사용자 지정 스크립트를 실행할 때 npm run 또는 npm run-script 를 사용해야 합니다 .

npm 스크립트에서 환경 변수 사용

환경 변수를 사용하면 정보를 하드 코딩하지 않고도 전달할 수 있습니다. npm 스크립트에서 환경 변수를 사용하려면 cross-env npm 패키지 를 사용할 수 있습니다 . 이 도구는 모든 환경에서 환경 변수를 설정하는 데 도움이 됩니다.

터미널에서 이 명령을 실행하여 시작하여 dev 종속성으로 설치합니다.

npm i save -D cross-env


그런 다음 스크립트에서 다음과 같이 사용하십시오.

{
    "scripts": {
        "build": "cross-env NODE_ENV=production webpack"
    }
}


여기에서 cross-env는 NODE_ENV 변수를 “생산”으로 설정합니다.

스크립트에 명령줄 인수 전달

스크립트 이름 뒤에 두 개의 대시 “-“를 사용하여 npm 스크립트에 명령줄 인수를 전달할 수 있습니다. 예를 들어 다음 명령은 watch 인수를 사용하여 테스트 스크립트를 실행합니다.

npm run test -- --watch


다음과 같이 npm 스크립트에 명령줄 인수를 보낼 수도 있습니다.

npm run my-port --PORT=3000


그런 다음 다음과 같이 스크립트에서 액세스합니다.

"scripts": {
    "my-port": "echo \\"Port: $npm_config_PORT\\""
}


Windows 시스템에서는 다음을 사용하십시오.

"scripts": {
    "my-port": "echo \\"Port: %npm_config_PORT%\\""
}


스크립트는 실행할 때 “Port: 3000″을 인쇄해야 합니다.

npm 스크립트를 사용하는 이유는 무엇입니까?

package.json에 스크립트를 추가하고, 명령줄에서 스크립트를 실행하고, 사전 및 사후 후크를 사용하고, 줄 인수와 환경 변수를 스크립트에 전달할 수 있습니다.

npm 스크립트는 JavaScript 프로젝트에서 작업을 자동화하는 강력한 방법입니다. 여러 작업을 실행할 수 있는 일관된 명령을 제공하여 작업 흐름을 개선하고 시간을 절약할 수 있습니다.