TypeScript SDK 개발: 5세 어린이도 따라할 수 있는 단계별 단계 ~ 1부: 첫 번째 MVP

안녕하세요오오오오오!

당신이 잘하고 있기를 바랍니다! 스미입니다! 👋 바로 뛰어들자 🚀

내용물:

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ 뭐 -

SDK(라이브러리라고도 함)는 기술에서 추가 기능을 파생시키는 애플리케이션의 플러그인 역할을 합니다.

2️⃣ 왜 -

TypeScript를 사용한 SDK 개발은 유형 안전성과 장기적 유지 관리로 인해 오랜 시간 동안 안정성을 제공합니다.

3️⃣ 어떻게 -

SDK를 빌드하는 데 필요한 기본 단계는 다음과 같습니다.

1. 올바른 워크플로 설정으로 프로젝트를 초기화합니다.
2. Bundler를 선택하고 그 목적을 이해합니다.
3. 다양한 환경에서 SDK를 실행하기 위한 ESM, CJS, IIFE UMD를 이해합니다.
4. NPM, 의미론적 버전 관리 및 라이선스에 대한 라이브러리로 게시합니다.
5. SPA용 NPM 및 브라우저용 CDN.

1부에서는 기본적인 이해를 돕기 위해 첫 번째 기본 SDK를 빌드해 보겠습니다.

1단계: 프로젝트 초기화

다음 명령을 실행하여 새 폴더에 프로젝트를 설정합니다.

 npm init -y

"-y" 모든 후속 프롬프트에 대해 기본값이 yes입니다. 작성자, 라이센스, 버전 등과 같이 나중에 Package.json에서 변경할 수 있습니다.

package.json 으로 이동하여 최신 EcmaScript 모듈 시스템(ESM)과 작동하도록 type: module 추가하세요.

package.json 은 다음과 같아야 합니다.

 { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }

2단계: 기본 개발 라이브러리 설치

1. 타입스크립트
2. @types/node - NodeJS에서 TypeScript를 작동합니다.
3. tsup - TypeScript 라이브러리를 번들로 묶는 가장 간단하고 빠른 방법입니다.

복사

 npm i typescript @types/node tsup -D

3단계: TypeScript 설정을 위한 tsconfig 설정

프로젝트 루트에 tsconfig.json 파일을 만듭니다.

복사

 touch tsconfig.json

파일로 이동하여 다음 구성을 붙여넣습니다.

 { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }

각 속성 위로 마우스를 가져가면 해당 속성에 대해 자세히 알아볼 수 있습니다.

여기서 이해해야 할 기본 사항은 다음과 같습니다.

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. " NodeNext 번들러 에서만 작동하지만 Node.js에서는 충돌이 발생하는 모듈 지정자를 사용하여 ESM을 내보내는 것을 방지하므로 라이브러리 작성에 적합한 옵션입니다. 일반적인 코드를 작성하고 상식을 사용하고 고품질 종속성에 의존할 때 출력은 일반적으로 번들러 및 기타 런타임과 매우 호환됩니다." 여기에서 자세한 내용을 알아볼 수 있습니다. https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - 소스 파일 생성을 활성화합니다. 이러한 파일을 사용하면 내보낸 JavaScript 파일로 작업할 때 디버거 및 기타 도구가 원본 TypeScript 소스 코드를 표시할 수 있습니다. 프로덕션에서는 비활성화할 수 있습니다.

   
   

3. outDir - 내보낸 모든 파일의 출력 폴더를 지정합니다.

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - 프로젝트의 TypeScript 및 JavaScript 파일에서 .d.ts 파일을 생성합니다.

   
   

2. lib - 대상 런타임 환경을 설명하는 번들 라이브러리 선언 파일 세트를 지정합니다. es2022 React와 같은 노드 애플리케이션용이고, dom & dom.iterable 브라우저에서 라이브러리를 실행하기 위한 것입니다.

4단계: 첫 번째 코드 작성

index.ts 파일을 만들고 다음 기본 코드를 작성합니다.

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

첫 번째 코드를 작성하세요.

복사

 tsup ./index.ts

이제 출력 파일 index.cjs 가 있는 dist 폴더가 있는 것을 볼 수 있습니다.

첫 번째 SDK를 통합하고 실행해 보겠습니다!

app.js 파일을 만들고 다음 코드를 붙여넣습니다.

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

SDK를 공개하지 않았기 때문에 로컬 빌드와 직접 연결하고 있습니다.

이제 첫 번째 앱을 실행해 보세요.

 node app.js

다음 출력이 표시됩니다.

 3 1

축하합니다 🎉🥳 🚀🚀🚀 방금 첫 번째 SDK를 구축하고 실행했습니다!

마무리:

첫 번째 SDK를 빌드하고 실행하기 위한 기본 단계를 완료했습니다. 기본 폴더 구조를 구축하고 외부 API 엔드포인트를 통합하는 2부로 이동하세요 🚀

.....

이제 자신만의 SDK를 구축할 수 있는 지식을 갖추게 되었습니다. 즐거운 코딩하세요! 🚀

그게 다야, 여러분! 당신에게 좋은 독서가 되었기를 바랍니다. 감사합니다! ✨

👉 나를 팔로우하세요

GitHub

링크드인