Приветооооо!  Надеюсь, у тебя все отлично! Это СМИ! 👋 Давайте сразу приступим 🚀  Это третья часть нашей   , в которой мы углубимся в создание тестовых приложений для реагирования, браузера, узла и устаревшего узла. серии статей по разработке 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. Создайте приложение 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  В   создайте реагирующее приложение, например, с помощью vite: example-apps   npm create vite@latest  После успешного создания приложения React выполните следующую команду в корневой папке React, чтобы связать наш SDK.   npm link ts-lib  Вместо   это должно быть имя вашего SDK/библиотеки в package.json. 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 в различных средах.  Перейдите к части 4, чтобы опубликовать наш SDK.  .....  Теперь у вас есть знания для создания собственного SDK. Приятного кодирования! 🚀  Вот и все, ребята! Надеюсь, это было для вас хорошее чтение. Спасибо! ✨  👉 Следуй за мной   GitHub   LinkedIn

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

Этот звук создан на языке оригинала истории!

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

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps