npm - package.json 분석하기

Mr. toolbox를 만드는 데, 패키지 로드하는데 문제가 생겨서 확인해보려고 뜯어보려고 한다.

오늘도 공식문서님이 함께한다.

package.json | npm Docs

---

간단한 설정값들

한번에 정리 갑니다.

{
  // 이름. npm에 등록되는 이름이다. import할 때도 사용됨.
  // 대문자를 쓰면 안 된다. node나 js도 포함하지 말자..
  "name": "mr-toolbox", 
      
  // 버전. 모든 버전은 겹치지 않아야 한다.
  "version": "1.0.0", 
  
  // 프로젝트를 설명하는 문구. npm 사이트에 노출된다. npm list로 사람들이 찾을 때 유용함.
  "description": "simple toolbox for web develop",    
  
  // 패키지를 설명하는 키워드들.
  "keywords": ["react", "css", "tool"], 
  
  // 홈페이지 주소
  "homepage": "https://github.com/ImInnocent/mr-toolbox#readme", 
  
  //버그를 트래킹 할 수 있는 주소와 이메일
  "bugs": {
    "url": "https://github.com/ImInnocent/mr-toolbox/issues",
  	"email": "dev.inho.song@gmail.com"
  },
      
  // 라이센스. ISC는 무료 배포, 사용이 가능하다.
  "license": "ISC", 
  
  // 제작자. 1명에 대한 정보를 넣어야 한다.
  "author": "Inho Song <dev.inho.song@gmail.com> (https://goldfishdiary.tistory.com/)",
  // 또는 
  "author": {
    "name": "Inho Song",
    "email": "dev.inho.song@gmail.com",
    "url": "https://goldfishdiary.tistory.com/"
  },
  
  // 참가자들. 위의 author객체의 배열이다.
  "contributors": [],
  
  // 코드가 있는 위치. 다른 참가자들이 참여할 수 있게 한다.
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ImInnocent/mr-toolbox.git"
  }
  
  // 필요 엔진 버전. 노드나 npm의 필요 요구사항을 적을 수 있다.
  "engines": {
    "node": ">=0.10.3 <15"
    "npm": "~1.0.20"
  },
  
  // OS. 특정 OS에서 작동할 때 쓴다. 특정 OS를 제한하고 싶다면 앞에 !를 붙인다.
  "os": [
    "linux",
    "!win32",
  ],
  
  // cpu. 특정 CPU에서 돌아갈 때 쓴다. 특정 cpu를 제한하고 싶다면 앞에 !를 붙인다.
  "cpu": [
    "x64",
    "!arm"
  ],
  
  // 배포 제한. true면 배포가 제외된다. 보안이 중요하면 2중 안전장치라 생각하고 걸어두자.
  "private": true
}

---

main

main은 프로그램의 기본 진입점이다.
예를 들어 우리가 react를 사용할때, 다음과 같이 코드를 작성한다.

import react from "react";

이렇게 루트 패키지("react")를 호출했을 때 반환되는 모듈을 정하는 것이다.

실제 react 패키지의 코드를 가져와 보겠다.
react의 package.json은 이렇게 되어있다.

{
  ...
  "main": "index.js",
  ...
}

그렇다면 index.js는 어떻게 구성되어 있을까?

...

export {
  Children,
  Component,
  cloneElement,
  createContext,
  createElement,
  useTransition,
  version,
} from './src/React';

길어서 좀 잘랐다.
이렇게 모듈을 export한다.

---

bin

bin은 실행파일들을 등록할 수 있다.

말이 좀 그런데, 이런 걸 생각해보면 된다.

tailwind init
git init

우리가 cmd창에서 실행하는 이런 명령어들을 등록하는 것이다.

다음과 같이 등록할 수 있다.

{
  ...
  "bin": {
    "myapp": "./cli.js"
  }
  ...
}

이러면 cli.js파일을 /usr/local/bin/myapp에 심링크를 생성한다.
그래서 PATH에 등록되어 우리가 cmd창에서 "myapp" 명령어를 쓸 수 있게 된다.

cli.js에서 'init'명령어를 처리한다면 다음과 같이 실행하면 된다.

myapp init

---

files

우리가 npm install mr-toolbox를 했을 때,
node_modules에 추가가 된다.

이 때 node_modules에 들어갈 파일들의 목록을 작성하는 거다.
예를 들어 dist폴더만 넣고싶다고 하면 이렇게 된다.

{
  ...
  "files": [
    /dist/*
  ],

단, 몇몇 요소는 항상 포함된다.

package.json, README, LICENSE, LICENCE,
package.json에서 main이 가리키는 파일

반대로 몇몇 요소는 항상 제외된다.

.git, node_modules, package-lock.json, .svn 등

---

config

우리가 npm 커맨드를 사용할 때 자동으로 입력되는 값들이다.

예를들어 다음과 같은 커맨드로 서버를 켠다고 생각해보자.

npm start npm_package_config_port=8080 npm_package_config_name=proxy

이걸 언제 치고 있나. 이렇게 설정해보자.

{
  ...
  "config": {
    "port": "8080",
    "name": "proxy"
  },
  ...
}

그 다음 이렇게 실행하면 같은 효과를 가질 수 있다.

npm start

보다시피 'npm_package_config_'의 prefix가 붙는다.

---

scripts

scripts에서는 npm 명령어를 이용해 실행할 수 있는 단축어를 설정할 수 있다.

예를 들어 다음과 같이 실행을 한다고 해보자.

react-app-rewired start
react-app-rewired build

이렇게 package.json에 추가해주자.

{
  ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
  },
  ...
}

이제 이렇게 실행해보자.

npm start
npm build

---

dependencies

이 프로젝트의 종속성이다.
이 프로젝트를 실행할 때 필요한 요소들이다.

예를들어 내가 react와 mui를 사용한다고 하면,
이 두가지가 설치가 되어있어야 실행이 가능하겠다.
이런 실행 요구사항을 적어놓는다고 보면 된다.

보통 우리가 npm install ~를 하면 dependencies에 자동으로 추가된다.

dependencies는 세 종류가 있다.

- dependencies: 필요사항
- devDependencies: 개발에는 필요하지만 실행에는 필요하지 않음
- peerDependencies: 특정 라이브러리나 툴을 실행할 때 필요함

---

사실 내가 찾고자 했던 이슈는 여기에 없다.
package.json의 문제는 아닌 것 같고, 다른 부분을 살펴봐야겠다.