415 чтения

Пятилетний ребенок может следовать этому руководству по разработке TypeScript SDK ~ Часть 3. Создание тестовых приложений

к Syed Muhammad Yaseen4m2024/07/08

Слишком долго; Читать

Это третья часть нашей серии статей по разработке SDK, в которой мы углубимся в создание тестовых приложений для реагирования, браузера, узла и устаревшего узла.

featured image - Пятилетний ребенок может следовать этому руководству по разработке TypeScript SDK ~ Часть 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 — очищать выходной каталог перед каждой сборкой.

dts — определения типов для TypeScript.

entry - указание точки входа.

format — cjs для устаревших проектов, esm для новых проектов узлов и iife для браузеров.

minify — минимизирует наш код и уменьшает размер пакета.

Никакой дополнительной настройки не требуется, поскольку tsup автоматически найдет этот файл и сделает все за нас :)

Теперь выйдите и повторно запустите команду build .

 npm run build

Вы увидите следующий вывод в нашей папке dist .

index.cjs — для вывода CJS

index.js — для ESM

index.global.js — для браузеров

Шаг 2. Создайте приложение Node

В example-apps/Node создайте файл index.js . Вставьте следующий контент:

 import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());

Теперь запустите файл с узлом в отдельном терминале и перейдите в папку:

 node index.js

Вы увидите вывод в терминале.

Шаг 3. Создайте устаревшее приложение Node.

В 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 это должно быть имя вашего SDK/библиотеки в package.json.

После создания приложения 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;

Запустите приложение реакции и перейдите к консоли; это должно выглядеть следующим образом: