라이브러리를 배포하면서 이해되지 못했던것을 작성

node.js

node.js는 모듈 시스템을 읽을 때 외부라이브러리와 내부 모듈(파일)을 읽는데 각기 다르다.

node.js 방식 - nodejs가 모듈을 찾고 불러오는 방법을 의미

compilerOptions

{
  "compilerOptions": {
    "target": "ES2017",
    "strict": true, //
    "strictNullChecks": true,
    "checkJs": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "...",
    "module": "..."
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"],
  "exclude": ["node_modules", "dist"]
}

"moduleResolution"

moduleResolution은 내가 현재 작성하는 프로젝트에서 모듈시스템 처리방식

"nodeNext" vs "node"

공통적으로 외부 라이브러리는 node_modules에서 자동으로 추론하여 가져온다.

차이점은 내부 모듈은 "nodeNext"는 확장자명까지 명시, "node"는 자동으로 가져온다.

"node"

{ "moduleResolution": "node"}

import { loading } from "./util/spinner";// O
import { highligter } from "./util/color";// O
import { Command } from "commander"; // 문제 없음 외부라이브러리

외부라이브러리는 자동으로 node_modules 에서 자동 추론

"nodeNext"

 {"moduleResolution": "NodeNext"}

import { loading } from "./util/spinner.js";// O
import { highlighter } from "./util/color.js";// O
import { Command } from "commander"; // 문제 없음 외부라이브러리

외부라이브러리는 자동으로 node_modules 에서 자동 추론

"moduleResolution"

{//"moduleResolution": "NodeNext"} 

import { execa } from "@/node_modules/execa/index";// O
import { Command } from "@/node_modules/commander/typings/index"; // O
import { loading } from "./util/spinner"; // 문제 없음
import { highligter } from "./util/color"; //문제 없음

moduleResolution을 꺼놓으면 compilerOption의 "module"의 값에 따라 모듈을 읽어드림

moduleResolution을 꺼놓기 -> compilerOption의 "module"의 명시된 value에 따라 모듈을 읽어드림 (module이 명시 안되어있으면 default "node"임)

"module" vs "moduleResolution"

moduleResolution은 내가 현재 작성하는 프로젝트에서 모듈시스템 처리방식인거고

module은 compiling 될 때 내가 작성한 import export 구문을 처리할 것을 결정

"target" vs "module"

• "module" : 브라우저 또는 node에서 module 시스템을 결정, 처리방식 결정
• "target" : 컴파일할 버전

번외

"type":module - package.json

// package.json
{
  //...
  "type":"module";
  "main" : "dist/index.js"
}

Node.js는 해당 프로젝트 내에서 모든 .js를 ESM으로 처리한다.

type 명시 안하면 기본적으로 commonJs 이다.

해석

{
  "compilerOptions": {
    "module": "ESNext",
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": false,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"],
  "exclude": ["node_modules"]
}

파일은 ESNEXT 최신 ESM으로 컴파일을 하라는 의미
esModuleInterop : true는 cjs 모듈을 ESM방식으로 사용할 수 있게 도와주는 설정
moduleResolution:node는 내부, 외부 모듈을 불러올때는 node.js 방식으로 불러오는거

따라서, 최신 ESM 방식으로 코드를 작성하되, CJS 모듈도 호환되도록 하며, Node.js 모듈 해석 방식을 따르는 프로젝트 구성

모듈 시스템

모듈은 특정 기능을 가진 코드의 묶음이고, 모듈 시스템은 이 모듈들을 불러오고 내보내는 방식을 규정하는 구조

1. Node.js 모듈 시스템 (CommonJS, CJS):
2. ES6 모듈 시스템 (ESM, ECMAScript Modules): Node.js에서는 package.json에 "type": "module"을 설정하거나 .mjs 확장자를 사용하여 ESM을 사용