From 100f7c7c278937e50eb308f477af039c323f149a Mon Sep 17 00:00:00 2001 From: junghyeonsu Date: Tue, 19 Mar 2024 19:07:34 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=ED=95=98=EC=A7=80=EB=A7=8C=20=EC=9D=B4?= =?UTF-8?q?=EC=A0=9C=20=EA=B3=A7=20CJS=20=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=EC=84=9C=EB=8F=84=20ESM=EC=9D=84=20`require()`=20=ED=95=A0=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../deploy-simple-npm-library/content.mdx | 24 +++++++++++++++---- src/__generated__/gatsby-types.d.ts | 4 ++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/content/development/deploy-simple-npm-library/content.mdx b/content/development/deploy-simple-npm-library/content.mdx index ef97d3a..8321b04 100644 --- a/content/development/deploy-simple-npm-library/content.mdx +++ b/content/development/deploy-simple-npm-library/content.mdx @@ -5,8 +5,8 @@ description: ESM, CJS, TS를 모두 지원하는 라이브러리를 만들어보 thumbnail: ./cover.png tags: ["development", "npm"] createdAt: 2024/03/18 -updatedAt: -feature: true +updatedAt: 2024/03/19 +featured: true --- ## 간단 소개 @@ -24,11 +24,13 @@ feature: true 해당 발표를 하고 1년이 지나고 다시 한번 발표 요청을 주셔서 내용 고칠 것이 있으면 고치고, 추가적으로 CLI 라이브러리를 만들어보는 내용을 추가하면 좋지 않을까 해서 이 글을 작성하게 되었습니다. -해당 내용은 발표 대본 용도로 작성된 글이라서 상세한 설명이 부족할 수 있습니다. + 해당 내용은 발표 대본 용도로 작성된 글이라서 상세한 설명이 부족할 수 있습니다. -조금 더 적극적으로 참여하고 싶으시다면 [해당 레파지토리 (npm-deploy-step-by-step)](https://github.com/junghyeonsu/npm-deploy-step-by-step/pulls)의 PR을 하나씩 확인하면서 직접 따라해보시는 것을 추천드립니다. + 조금 더 적극적으로 참여하고 싶으시다면 [해당 레파지토리 + (npm-deploy-step-by-step)](https://github.com/junghyeonsu/npm-deploy-step-by-step/pulls)의 + PR을 하나씩 확인하면서 직접 따라해보시는 것을 추천드립니다. @@ -36,6 +38,7 @@ feature: true - ESM, CJS, TS를 모두 지원하는 라이브러리를 만들어보자. - CLI를 간단하게 만들어보자. + ## ESM, CJS, TS를 모두 지원하는 라이브러리를 만들어보기 @@ -64,12 +67,20 @@ Node 생태계에서 ESM이라는 새로운 기술이 나왔지만, CJS가 없 위와 같은 이유로 ESM, CJS 모두 지원하는 라이브러리를 만들어야 합니다. 어느 한 기술만 사용하는게 아니라 환경에 따라서 사용하는 모듈 시스템이 다릅니다. + +**하지만 이제 곧 CJS 환경에서도 ESM을 `require()` 할 수 있습니다.** + +[module: support require()ing synchronous ESM graphs](https://github.com/nodejs/node/pull/51977) + + + ### STEP 1: 프로젝트 생성 프로젝트 생성 [브랜치에서 확인하기](https://github.com/junghyeonsu/npm-deploy-step-by-step/pull/1/files) + ```bash @@ -87,6 +98,7 @@ yarn init -y CJS으로 라이브러리를 배포해보고 ESM, CJS 환경에서 사용해보고 차이점 느껴보기: 라이브 코딩 (이전 포스트 참고) [브랜치에서 확인하기](https://github.com/junghyeonsu/npm-deploy-step-by-step/pull/2/files) + - src/index.js 작성하기 @@ -104,6 +116,7 @@ CJS으로 라이브러리를 배포해보고 ESM, CJS 환경에서 사용해보 ESM으로 라이브러리를 배포해보고 ESM, CJS 환경에서 사용해보고 차이점 느껴보기: 라이브 코딩 (이전 포스트 참고) [브랜치에서 확인하기](https://github.com/junghyeonsu/npm-deploy-step-by-step/pull/3/files) + - `type: module`, src/index.js ESM으로 변경 @@ -127,6 +140,7 @@ ESM으로 라이브러리를 배포해보고 ESM, CJS 환경에서 사용해보 esbuild 빌드 결과물로 나온 걸 배포하고 테스트 환경에서 console.log 찍어가면서 확인해보기 [브랜치에서 확인하기](https://github.com/junghyeonsu/npm-deploy-step-by-step/pull/4/files) + - `lib`에서 esbuild 설치 @@ -140,6 +154,7 @@ esbuild 빌드 결과물로 나온 걸 배포하고 테스트 환경에서 conso TypeScript로 코드 작성하고 tsc, esbuild로 빌드해서 ESM, CJS, TS 모두 지원하는 라이브러리 만들기 [브랜치에서 확인하기](https://github.com/junghyeonsu/npm-deploy-step-by-step/pull/5/files) + - 테스트 환경에서 `TypeScript`, `ts-node` (TypeScript 코드를 Node에서 바로 실행할 수 있는 라이브러리) 설치 후 테스트해보기 @@ -162,6 +177,7 @@ TypeScript로 코드 작성하고 tsc, esbuild로 빌드해서 ESM, CJS, TS 모 CLI (Command Line Interface) [cli-library-starter](https://github.com/junghyeonsu/cli-library-starter)에서 코드를 확인하실 수 있습니다. + CLI 도구는 일반적인 유틸성 자바스크립트 라이브러리와는 조금 다릅니다. diff --git a/src/__generated__/gatsby-types.d.ts b/src/__generated__/gatsby-types.d.ts index b17480e..12575d2 100644 --- a/src/__generated__/gatsby-types.d.ts +++ b/src/__generated__/gatsby-types.d.ts @@ -1339,6 +1339,7 @@ type MdxFilterListInput = { type MdxFrontmatter = { readonly createdAt: Maybe; readonly description: Maybe; + readonly feature: Maybe; readonly featured: Maybe; readonly locale: Maybe; readonly slug: Maybe; @@ -1351,6 +1352,7 @@ type MdxFrontmatter = { type MdxFrontmatterFieldSelector = { readonly createdAt: InputMaybe; readonly description: InputMaybe; + readonly feature: InputMaybe; readonly featured: InputMaybe; readonly locale: InputMaybe; readonly slug: InputMaybe; @@ -1363,6 +1365,7 @@ type MdxFrontmatterFieldSelector = { type MdxFrontmatterFilterInput = { readonly createdAt: InputMaybe; readonly description: InputMaybe; + readonly feature: InputMaybe; readonly featured: InputMaybe; readonly locale: InputMaybe; readonly slug: InputMaybe; @@ -1375,6 +1378,7 @@ type MdxFrontmatterFilterInput = { type MdxFrontmatterSortInput = { readonly createdAt: InputMaybe; readonly description: InputMaybe; + readonly feature: InputMaybe; readonly featured: InputMaybe; readonly locale: InputMaybe; readonly slug: InputMaybe;