안녕하세요오오오오오!  당신이 잘하고 있기를 바랍니다! 스미입니다! 👋 바로 뛰어들자 🚀  이것은 반응, 브라우저, 노드 및 레거시 노드를 위한 테스트 앱을 만드는 방법을 알아보는   의 3부입니다. SDK 개발 시리즈  내용물:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  1단계: 다양한 환경에 맞게   설정 tsup  프로젝트 루트에   파일을 생성하고 다음 내용을 붙여넣습니다. tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    - 각 빌드 전에 출력 디렉터리를 정리합니다. clean    - TypeScript에 대한 유형 정의입니다. dts    - 진입점을 지정합니다. entry    - 레거시용   , 최신 노드 프로젝트용   , 브라우저용   . format cjs esm iife    - 코드를 최소화하고 번들 크기를 줄입니다. minify    자동으로 이 파일을 찾아 모든 것을 처리하므로 추가 구성이 필요하지 않습니다. :) tsup  이제   명령을 종료하고 다시 실행하십시오. build   npm run build    폴더에 다음 출력이 표시됩니다.  dist    - CJS 출력용 index.cjs    - ESM용 index.js    - 브라우저용 index.global.js  2단계: 노드 앱 생성    에서   파일을 생성합니다. 다음 내용을 붙여넣으세요. example-apps/Node index.js   import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());  이제 별도의 터미널에서 노드가 포함된 파일을 실행하고 해당 폴더로 이동합니다.   node index.js  터미널에 출력이 표시됩니다.  3단계: 레거시 노드 앱 만들기    에서   파일을 생성하고 다음 콘텐츠를 붙여넣습니다. example-apps/Legacy-Node index.cjs   const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));  이제 별도의 터미널에서 노드가 포함된 파일을 실행하고 해당 폴더로 이동합니다.   node index.cjs  터미널에 출력이 표시됩니다.  4단계: 브라우저 앱 만들기    에서   파일을 생성하고 다음 콘텐츠를 붙여넣습니다. example-apps/Browser index.html   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../../dist/index.global.js"></script> </head> <body> This is a Test HTML <script> sdk.fetchUsers().then((users) => console.log(users)); </script> </body> </html>  브라우저에서 파일을 열면 검사 요소의 콘솔 탭에 다음 응답이 표시됩니다.   5단계: React 앱 만들기  게시하지 않고 프로젝트용 라이브러리로 작동하도록 SDK에 대한 링크를 만듭니다.   npm link    에서 예를 들어 vite를 사용하여 반응 앱을 만듭니다. example-apps   npm create vite@latest  React 앱을 성공적으로 생성한 후 React 루트 폴더에서 다음 명령을 실행하여 SDK를 연결하세요.   npm link ts-lib    대신 package.json의 SDK/라이브러리 이름이어야 합니다. ts-lib  React 앱을 생성한 후   와 같은 컴포넌트 파일을 열고 다음과 같이 SDK를 통합합니다. App.jsx   import sdk from "ts-lib"; console.log(await sdk.fetchUsers());  전체 보기:   import { useState } from "react"; import reactLogo from "./assets/react.svg"; import viteLogo from "/vite.svg"; import "./App.css"; import sdk from "ts-lib"; console.log(await sdk.fetchUsers()); function App() { const [count, setCount] = useState(0); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ); } export default App;  반응 앱을 실행하고 콘솔로 이동하세요. 다음과 같아야 합니다.   마무리:  다양한 환경에서 SDK를 빌드하고 실행하는 단계를 완료했습니다.  SDK를 게시하려면 4부로 이동하세요.  .....  이제 자신만의 SDK를 구축할 수 있는 지식을 갖추게 되었습니다. 즐거운 코딩하세요! 🚀  그게 다야, 여러분! 당신에게 좋은 독서가 되었기를 바랍니다. 감사합니다! ✨  👉 나를 팔로우하세요   GitHub   링크드인

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

View my Portfolio

Full Stack Engineer

이 오디오는 이야기의 원래 언어로 제작되었습니다!

5세 어린이도 이 TypeScript SDK 개발 가이드를 따라갈 수 있습니다 ~ 3부: 테스트 앱 만들기

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

볼츠만 뇌 이론에 대한 간략한 소개

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

볼츠만 뇌 이론에 대한 간략한 소개

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps