5가지 고급 npm package.json 구성 팁

Originally published on davidwells.io

Node, npm 및 package.json는 매우 훌륭합니다.

함께 그들은 개발자에게 풍부한 개발 환경을 제공하고 즉시 사용 가능한 시스템을 구축합니다.

노드 개발자로서 몇 년 동안 저는 npm 스크립트 및 package.json 훨씬 더 멋진 것을 만들기 위한 몇 가지 고급 패턴을 수집하여 공유하려고 생각했습니다.

나중에 도움이 되기를 바랍니다. 또한 아래에 의견을 남겨주세요!

1. NPM 스크립트 사전 및 사후 수명 주기 사용

npm 패키지에 대한 수명 주기 메서드가 내장되어 있습니다scripts. 명령과 함께 pre 및 post를 사용하면 지정된 스크립트 전후에 실행됩니다.

예

{
  "name": "npm-lifecycle-example",
  "scripts": {
    "prefoo": "echo prefoo",
    "foo": "echo foo",
    "postfoo": "echo postfoo"
  }
}

실행npm run foo은 이 세 가지 명령을 순서대로 실행합니다.

prefoo ,

foo ,

그럼 postfoo

결과:

echo prefoo
echo foo
echo postfoo

prebuild 및 postbuild (및 기타 🌈)에 이것을 사용하십시오. 이것은 배포 프로세스를 베이킹하고 npm 명령을 함께 연결하는 데 매우 편리합니다.

2. 명령에 인수 전달

값을 npm 스크립트에 동적으로 전달할 수 있습니다.

이렇게 하려면 명령에 $npm_config_{key} 값을 사용해야 합니다.

예시:

{
  "name": "passing-flags-into-command",
  "scripts": {
    "pass-arg": "node scripts/lol.js --name=$npm_config_name",
  }
}

그런 다음 사용하십시오.

npm run pass-arg --name woot

이 예에서 우리는 arg로 lol.js를 실행하고 있습니다.

const argv = require('minimist')(process.argv.slice(2));
console.log(argv.name);
// woot

이것은 프로젝트 내의 임시 CLI 도구에 매우 편리합니다.

3. package.json 구성 키의 값 사용

여러 스크립트에서 구성을 반복하지 않으려면 package.json 파일config 필드에서 값을 참조할 수 있습니다.

{
  "config": {
    "ENDPOINT": "my-value"
  },
  "scripts": {
    "set-env": "REACT_APP_ENDPOINT=$npm_package_config_ENDPOINT react-scripts start"
  }
}

이것은 특정 경우에 유용합니다.

4. 크로스 플랫폼 스크립트에 크로스 환경 사용

스크립트에서 환경 변수를 설정하는 것은 매우 쉽지만 크로스 플랫폼과 호환되지 않습니다(기침 창).

npm의 cross-env pkg를 사용하면 스크립트를 실행하는 모든 사람이 만족할 수 있도록 명령에 대한 ENV 변수를 설정할 수 있습니다.

예시:

{
  "name": "using-cross-env",
  "scripts": {
    "cross-env": "cross-env NODE_ENV=prod OTHERFLAG=xyz webpack --config webpack.js",
  }
}

이것은 NODE_ENV=prod와 OTHERFLAG=xyz를 process.env로 설정하여 웹팩이 (예를 들어) 사용할 변수를 설정합니다.

이 보석을 만들기 위한 소품입니다.

5. 다른 npm 명령에 인수 전달

때로는 기존 npm 스크립트에 추가 인수를 전달해야 합니다.

인수가 필요할 때마다 기존 스크립트를 변경하거나 스크립트를 계속해서 복제하는 대신 -- 구분 기호를 활용할 수 있습니다.

예제 json

{
  "name": "passing-flags-example",
  "scripts": {
    "my-script": "esw src/components",
    "pass-flags-to-other-script": "npm run my-script -- --watch",
  }
}

아래의 이 예는 --watch 플래그를 my-script 명령에 전달합니다.

npm run pass-flags-to-other-script

실행됩니다:

esw src/components --watch

이것은 일반 모드와 test 모드로 watch 스크립트를 설정할 때 매우 편리합니다.

함께 모아서

다음은 MEGA json으로 결합된 모든 방법입니다.

{
  "name": "advanced-package-json",
  "version": "0.1.0",
  "private": true,
  "config": {
    "SESSION_ENDPOINT": "my-value"
  },
  "dependencies": {
    "react": "^15.6.1",
  },
  "scripts": {
    "pass-arg": "node scripts/lol.js --name=$npm_config_name",
    "set-env": "REACT_APP_ENDPOINT=$npm_package_config_ENDPOINT react-scripts start",
    "cross-env": "cross-env NODE_ENV=prod OTHERFLAG=xyz webpack --config webpack.js",
    "my-script": "esw src/components",
    "pass-flags-to-other-script": "npm run my-script -- --watch",
  },
  "devDependencies": {
    "react-scripts": "^1.1.4",
    "cross-env": "^1.1.4"
  }
}

다른 package.json 팁을 알고 있습니까?

아래 의견에 알려주십시오.

앞으로 나아가

npm init