Bedrock-UI 분석 D1

Bedrock-UI 깃헙 저장소
https://github.com/Bedrock-UI/bedrock-ui
Bedrock-UI 문서
https://bedrock-ui.github.io/bedrock-ui/

package.json

files

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#files

// package.json
{
  "files": [
    "css",
    "lib"
  ]
}

package.json에서 옵션으로 주어지는 필드로 npm publish를 통하여 노드 패키지를 배포할때 추가될 파일이나 디렉토리들을 노드 패키지에 추가할때 사용한다.

pnpm

pnpm 설명 링크

  "scripts": {
    "build": "pnpm build:css && pnpm build:cjs && pnpm build:esm",

다른 npm 패키지들처럼 npm install을 이용하여 설치가 가능하다.
pnpm은 npm과 다른 방식으로 패키지들을 설치한다.

npm install -g pnpm

예를 들어, 프로젝트1, 프로젝트2 이렇게 프로젝트가 2개 있다고 보면
각 프로젝트마다 npm install express를 이용하여 express 모듈을 설치할 경우
각 프로젝트는 모두 express를 node_modules에 가지게 되며 여타 다른 모듈들도 같이 딸려 설치된다. 그러나 pnpm은 따로 저장소를 두고 여러 프로젝트들이 그 저장소에서 모듈들을 가져다 쓰도록 한다. 그러므로 프로젝트들이 같은 노드 모듈들을 갖고있지 않게되어 용량이 줄고 설치 속도가 빨라진다고 볼 수 있다. Bedrock-UI 프로젝트는 이 pnpm을 이용하여 노드 모듈을 설치하고 있다.

module, main

"module": "lib/esm/index.js",
"main": "lib/cjs/index.js",

"module" 필드는 webpack같은 esm 지원 모듈 번들러들이 entry point를 찾을 때 쓰는 필드이다. 만약 "module"필드가 없다면 디폴트인 "main"을 entry point로 보게된다.
Berock-UI에서는 module과 main이 각각 ES module, commonjs를 위한 서로 다른 entry point다.