393 판독값

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

~에 의해 Syed Muhammad Yaseen4m2024/07/08

너무 오래; 읽다

이것은 반응, 브라우저, 노드 및 레거시 노드를 위한 테스트 앱을 만드는 방법을 알아보는 SDK 개발 시리즈의 3부입니다.

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

안녕하세요오오오오오!

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

이것은 반응, 브라우저, 노드 및 레거시 노드를 위한 테스트 앱을 만드는 방법을 알아보는 SDK 개발 시리즈 의 3부입니다.

내용물:

⚡ 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 - 각 빌드 전에 출력 디렉터리를 정리합니다.

dts - TypeScript에 대한 유형 정의입니다.

entry - 진입점을 지정합니다.

format - 레거시용 cjs , 최신 노드 프로젝트용 esm , 브라우저용 iife .

minify - 코드를 최소화하고 번들 크기를 줄입니다.

tsup 자동으로 이 파일을 찾아 모든 것을 처리하므로 추가 구성이 필요하지 않습니다. :)

이제 build 명령을 종료하고 다시 실행하십시오.

 npm run build

dist 폴더에 다음 출력이 표시됩니다.

index.cjs - CJS 출력용

index.js - ESM용

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

example-apps 에서 예를 들어 vite를 사용하여 반응 앱을 만듭니다.

 npm create vite@latest

React 앱을 성공적으로 생성한 후 React 루트 폴더에서 다음 명령을 실행하여 SDK를 연결하세요.

 npm link ts-lib

ts-lib 대신 package.json의 SDK/라이브러리 이름이어야 합니다.

React 앱을 생성한 후 App.jsx 와 같은 컴포넌트 파일을 열고 다음과 같이 SDK를 통합합니다.

 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;

반응 앱을 실행하고 콘솔로 이동하세요. 다음과 같아야 합니다.