라이브러리 만들때 package.json

https://letsreact.org/package-json-explained/#google_vignette

  "type": "module"
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.umd.cjs",
      "import": "./dist/index.js"
    }
  },
  "types": "./dist/index.d.ts",
  "main": "./dist/index.umd.cjs",

 

위와 같이 적게 되는데,

  "type": "module"

type

명시하지 않으면 CommonJS이다.

commonjs

CJS 방식을 사용한다는 뜻. 

기본적으로 .js는 commonJS 모듈로 해석되며 ESM 모듈은 .mjs 확장자를 명시적으로 지정해줘야 한다.

require()와 module.exports를 사용할 수 있으며 import와 export는 사용할 수 없다.

module

ESM을 사용하겠다는 뜻

기본적으로 .js가 ESM으로 해석된다.

import, export를 사용할 수 있으며 require, module.exports는 기본적으로 사용할 수 없다.

Webpack, Babel 등 모듈번들러도 ESM을 지원한다.

CJS를 사용하려면 .cjs 확장자를 사용해야 한다.

"export": {
  ".": {
    "types": "./dist/index.d.ts",
    "require": "./dist/index.umd.cjs",
    "import": "./dist/index.js"
  }
}

exports

exports항목은 CommonJS와 ESM모듈 환경에서 사용 할 수 있도록 여러 포맷으로 패키지의 엔트리파일을 제공하는 설정이다.

(흔히 말아주는 방식)

types

TypeScript에서 사용할 타입 정의 파일을 지정한다. 이 파일을 통해 TypeScript가 이 모듈의 타입 정보를 참조할 수 있게 한다.

./dist/index.d.ts는 빌드된 타입 정의 파일의 경로이다.

require

CommonJS환경에서 사용될 엔트리 파일을 지정한다. require 구문으로 이 모듈을 가져올 때 사용된다.

index.umd.cjs는 CommonJS로 빌드된 파일이며 Node.js나 기타 CommonJS 환경에서 호환된다.

import

ESM 환경에서 사용될 엔트리 파일을 지정한다. import 구문으로 모듈을 가져올 때 사용된다.

index.js는 ESM 형식으로 빌드된 파일이다.

 

"types": "./dist/index.d.ts",
"main": "./dist/index.umd.cjs"

types

TypeScript 전용 필드로 TypeScript 프로젝트가 이 패키지를 참조할 때 사용할 타입 정의 파일을 지정한다.

./dist/index.d.ts는 이 패키지의 타입 정보를 제공하는 파일로, TypeScript에서 이 패키지를 사용할 때 자동으로 타입을 인식할 수 있게 한다.

main

CommonJS 환경에서 기본 엔트리 파일을 설정하는 필드이다. require()를 통해 ./dist/index.umd.cjs를 기본 엔트리로 참조하게 된다.

대부분의 ESM 환경에서는 main 대신 exports나 module을 사용한다. 이 경우 main은 기본적으로 무시된다.

따라서 프로젝트가 ESM과 혼용된다면 exports를 함께 설정해주는 것이 좋다.