(6) JavaScript Module - package.json

반응형

▼ mjs 파일

더보기
// main.mjs

import { format }  from 'date-fns'

const dateString = format(new Date(2024,12,24), 'MM/dd/yyyy')

console.log(dateString);
//calculator.mjs

export const PI = 3.14;

export function add (a,b) {
  return a + b;
}

export function subtract (a,b) {
  return a - b;
}

export function multiply (a,b) {
  return a * b;
}

export function divide (a,b) {
  return a / b;
}

const calculator = {
  PI,
  add,
  subtract,
  multiply,
  divide,
};

export default calculator;

지난 글에서 서드파티 모듈인 date-fns를 설치했는데

서드파티 모듈을 설치하면 package.json과 함께 설치된다.

Node.js에서는 pakage.json이라는 파일을 가진 디렉토리를 패키지라고 한다.

즉 모든 서드파티 모듈이 하나의 패키지라는 뜻인데

04.npm 디렉토리도 패키지라고 볼 수 있다.

 

서드파티 모듈을 설치할 때 사용했던 npm은 node package manager의 줄임말이라고 했을 때

모든 서드파티 모듈은 결국 패키지이기 때문에 이런 이름이 붙은 것이다.

04.npm 안에서 서드파티 모듈을 설치함으로써 

이 디렉토리도 패키지로 만들어 준 것이라고 볼 수 있다.

 

그렇다면 package.json 파일은 어떤 역할을 하는지 자세히 알아보자

package.json - dependencies

package.json은 현재 패키지에 대한 정보가 기록되어 있는 곳이다.

04.npm 디렉토리 안에 있는 package.json 파일을 열어보면

 

 

dependencies 필드는 패키지에 필요한 서드파티 모듈의 목록이며

본인이 설치한 서드파티 모듈이 여기에 기록된다고 볼 수 있다.

지난 글에 설치했던 date-fns와 버전 정보가 적혀있는 것을 확인할 수 있는데

버전에 따라 문법과 기능이 바뀔 수 있기 때문에 기록되어 있는 것이다.

그리고 버전 앞에 " ^ " 문자가 있는 것은 버전의 범위를 뜻하며

그 말은 꼭 4.1.0 버전이 아니어도 "특정 범위에 들어가는 버전이어도 상관없다" 라는 의미로 해석할 수 있다.


package.json - type 필드

dependencies 필드 말고도 typescript 라는 필드가 있다.

type 필드는 패키지 안에서 사용할 모듈 시스템을 정한다

{
  "type": "module"
}

commonjs(기본 값)와 module 중 하나를 사용할 수 있으며

type 필드가 정의되어 있지 않다면 기본 값으로 처리된다.

그래서 import, export 같은 ES 모듈 문법을 사용하기 위해서

자바스크립트 파일의 확장자를 mjs로 설정해야만 했는데

{
  "dependencies": {
    "date-fns": "^4.1.0"
  },
  "type": "module"
}

type 필드를 위와 같이 module로 설정하면

패키지 안에서 기본적으로 ES 모듈 문법을 사용할 수 있다.

 

type 필드를 module로 설정하였으니 

이제 mjs 확장자를 모두 js 로 바꿔줄 수 있다.

 

테스트 해보기위해 main 파일에서 add 함수를 사용하는 코드를 추가해보면

정상적으로 출력 되는 것을 확인할 수 있다.

// main.mjs

import { format }  from 'date-fns';
import { add } from './calculator.js';

const dateString = format(new Date(2024,12,24), 'MM/dd/yyyy')

console.log(dateString);
console.log(add(1,2));


package.json - scripts 필드

scripts 필드는 실행 명령어를 저장하는 필드이며. 아래와 같이 사용할 수 있다.

{
  "dependencies": {
    "date-fns": "^4.1.0"
  },
  "type": "module",
  "scripts": {
    "start": "node main.js",
    "test": "node test.js"
  }
}

 

이렇게 scripts 필드 안에 이름을 key로 주고 실제로 실행할 커맨드으로 주면

main파일과 test 파일을 실행하는 커맨드를 만들 수 있으며

"npm run start" 또는 "npm run test" 로 실행할 수 있다.

실제로 터미널창에 "npm run stat"를 입력하면 

main.js파일이 실행 되는 것을 확인할 수 있다.


위와 같이 파일을 실행하는 이유는

보통 프로젝트에는 프로그램을 시작하기 위해서 실행하는 메인 파일이 존재한다.

메인 파일이 main.js 이거나 app.js이거나 server.js이거나 등등등..

이렇게 다양한 이름을 가질 수 있다.

 

그래서 Node.js 환경에서 프로그램을 시작할 때는 

항상 npm run start라는 커맨드로 시작할 수 있도록 하는 것이다.

 

특정 프레임워크들을 활용하면 scripts 필드가 자동으로 설정되는 경우도 있지만

개발자가 직접 설정해야하는 경우도 있기 때문에 꼭 확인하는 것이 좋다.

 

이 외에도 수많은 필드가 있지만

처음으로 서드파티 모듈을 활용해서 개발을 할 때는

이 정도만 알아도 충분하지만

node_moduels 안에 있는 패키지들의 package.json 파일을 살펴보거나

npm문서를 참고하자.

https://docs.npmjs.com/cli/v9/configuring-npm/package-json

 

package.json | npm Docs

Specifics of npm's package.json handling

docs.npmjs.com

반응형