Разработка TypeScript SDK: 5-летний ребенок может выполнить это шаг за шагом ~ Часть 1: Наш первый MVP

Приветоооооо!

Надеюсь, у тебя все отлично! Это СМИ! 👋 Давайте сразу приступим 🚀

Содержание:

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

1️⃣ Что -

SDK (иногда также называемый библиотекой) служит подключаемым модулем приложений для получения дополнительных функций от технологии.

2️⃣ Почему -

Разработка SDK с использованием TypeScript обеспечивает надежность в течение длительного времени благодаря безопасности типов и поддержке в долгосрочной перспективе.

3️⃣ Как -

Основные шаги, необходимые для создания SDK, следующие:

1. Инициализация проекта с правильными настройками рабочего процесса.
2. Выбор Бандлера и понимание его цели.
3. Понимание ESM, CJS, IIFE UMD для запуска SDK в различных средах.
4. Публикация в виде библиотеки на NPM, семантическом управлении версиями и лицензии.
5. NPM для SPA и CDN для браузеров.

В части 1 мы собираемся создать наш первый базовый SDK, чтобы получить базовое понимание.

Шаг 1. Инициализация проекта

Выполните следующую команду, чтобы разместить проект в новой папке:

 npm init -y

"-y" по умолчанию означает «да» для всех последующих запросов. Вы можете изменить его позже в Package.json, например автора, лицензию, версию и т. д.

Перейдите в package.json и добавьте type: module для работы с последней системой модулей EcmaScript (ESM).

Ваш 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 — для работы TypeScript с NodeJS.
3. tsup — Самый простой и быстрый способ объединить библиотеки TypeScript.

КОПИРОВАТЬ

 npm i typescript @types/node tsup -D

Шаг 3. Настройте tsconfig для настроек TypeScript.

Создайте файл 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 — правильный вариант для создания библиотек, поскольку он не позволяет вам создавать ESM со спецификаторами модулей, которые работают только в сборщиках, но приводят к сбою в Node.js. При написании обычного кода, используя здравый смысл и полагаясь на высококачественные зависимости, его выходные данные обычно хорошо совместимы с упаковщиками и другими средами выполнения». Вы можете узнать больше об этом здесь: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap — включает создание исходных файлов. Эти файлы позволяют отладчикам и другим инструментам отображать исходный исходный код TypeScript при работе с созданными файлами JavaScript. Вы можете отключить его для производства.

   
   

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 — создавайте файлы .d.ts из файлов TypeScript и JavaScript в вашем проекте.

   
   

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

Теперь вы можете видеть, что у нас есть папка dist с выходным файлом index.cjs

Давайте интегрируем и запустим наш первый 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. Перейдите к части 2, где мы построим базовую структуру папок и интегрируем конечную точку внешнего API 🚀

.....

Теперь у вас есть знания для создания собственного SDK. Приятного кодирования! 🚀

Вот и все, ребята! Надеюсь, это было для вас хорошее чтение. Спасибо! ✨

👉 Следуй за мной

GitHub

LinkedIn