모노레포 vite build 결과물이 이상해요?

• 문제 상황

모노레포 프로젝트에서 디자인 시스템 내부 컴포넌트를 앱에서 사용하기 위해서는 빌드 결과물인 dist/*.js 를 export 해야한다고 생각했음

pnpm build 시 .js 파일이 생성되었다가 삭제됨

 

• 해결

packages/ui/src/component/ 경로에 존재하는 배럴 파일 index.ts가

packages/ui/dist/components/index.js로 컴파일되는 것이 아니라 

패키지 내 전체 파일을 빌드한 결과물을 packages/ui/dist/ui.mjs로 생성한다

 

vite 는 단일 엔트리 파일을 기준으로 빌드함 

아래 config를 보면 entry 가 지정되어있다 

//vite.config.ts
export default defineConfig({
  build: {
    outDir: "dist",
    lib: {
      entry: {
        ui: "src/components/index.ts",
        styles: "src/styles/index.ts",
        "global.css": "src/styles/global.css.ts",
      },
      formats: ["es"],
      fileName: (format, entryName) => `${entryName}.mjs`,
    },
      ...

//package.json
{
  "name": "@repo/ui",
  "version": "0.1.0",
  "private": true,
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/ui.mjs",
      "default": "./dist/ui.js"
    },
    "./global.css": "./dist/global.css",
    "./components": "./dist/components/*.mjs"
  },

• gpt : 
• tsc는 보통 폴더 구조를 유지해서 src/component/index.ts → dist/component/index.js로 컴파일되지만,
• tsup, vite, rollup은 폴더 구조 없이 묶어서 하나의 파일(ui.mjs 등)로 번들링함.

"./*": {
"types": "./dist/*.d.ts",
"import": "./dist/*.mjs",
"default": "./dist/*.js"
},

와일드카드 * 는 문자열을 치환하는 역할을 한다. 

확장자를 붙여서 쓸 경우 확장자가 중복되는 문제가 발생할 수 있다고 한다.

• gpt:
• * → 문자열 대체니까, "./dist/*.js" 안의 *가 "components/index"로 들어가면 결과는 ./dist/components/index.js.js가 돼버릴 수도 있어.
• 그래서 일반적으로는 "./*": "./dist/*"처럼 확장자까지 일치하게 지정하거나, 그냥 디렉토리 기준으로 사용하는 걸 추천해.

어차피 하나의 엔트리에서 export하는거니까 "./*" 에서 "."  으로 수정했다

(처음에 gpt가 export 경로로 와일드카드 쓸수없다고 약을 치는데 그럴리가 없어서 닥달하고 node.js 문서 가져와서 보여주니 제대로된 설명을 해줌)

---

• 그렇다면 .mjs와 .js 는 어떻게 다른거지

Node.js 의 모듈 시스템은 commonJS 를 사용했었다. => .cjs 사용 

require(), module.exports 를 사용

 

ECMAscript 모듈 시스템이 표준이 되었고 Node.js가 이를 지원하게 되었다. (버전 12.x 이상) => .mjs 사용 

import, export 문법을 사용

 

.js 확장자는 자바스크립트 파일의 표준 확장자로, commonJS 와 ECMAscript 모두 지원한다.

 

따라서 mjs 확장자를 사용하여 보다 명시적으로 ES 모듈을 따르는 것을 표시하는 것으로 이해했다.

---

Subpath patterns 관련한 공식 문서

https://nodejs.org/api/packages.html#subpath-exports

Modules: Packages | Node.js v23.11.0 Documentation

 

 

https://xionwcfm.tistory.com/464#hELLO

모노레포에서 Internal Packages를 관리하는 3가지 방법