„TypeScript“ SDK kūrimas: 5 metų vaikas gali sekti šiuo žingsniu ~ 1 dalis: mūsų pirmasis MVP

labasoooooo!

Tikimės, kad jums sekasi puikiai! Tai SMY! 👋 Įšokime iškart 🚀

Pirminis kodas: https://github.com/smyaseen/typescript-sdk-template

Turinys:

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

1️⃣ Kas –

SDK (kartais taip pat žinomas kaip biblioteka) yra programų papildinys, leidžiantis gauti papildomų technologijos funkcijų.

2️⃣ Kodėl –

SDK kūrimas naudojant „TypeScript“ užtikrina patikimumą ilgą laiką dėl tipo saugos ir ilgalaikės priežiūros.

3️⃣ Kaip –

Pagrindiniai žingsniai, kurių reikia norint sukurti SDK, yra šie:

1. Projekto inicijavimas su tinkamais darbo eigos nustatymais.
2. Bundlerio pasirinkimas ir jo paskirties supratimas.
3. ESM, CJS, IIFE UMD supratimas, kaip paleisti SDK įvairiose aplinkose.
4. Paskelbimas kaip biblioteka naudojant NPM, semantinis versijų kūrimas ir licencija.
5. NPM SPA ir CDN naršyklėms.

1 dalyje mes sukursime savo pirmąjį pagrindinį SDK, kad gautume pagrindinį supratimą.

1 veiksmas: inicijuokite projektą

Vykdykite šią komandą, kad nustatytumėte projektą naujame aplanke:

npm init -y

"-y" pagal numatytuosius nustatymus visuose tolesniuose raginimuose yra taip. Vėliau galėsite jį pakeisti Package.json, pvz., autorių, licenciją, versiją ir kt.

Eikite į package.jsonir pridėkite type: module dirbti su naujausia EcmaScript modulio sistema (ESM).

Tavo package.json turėtų atrodyti taip:

 {
  "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 veiksmas: įdiekite pagrindines kūrėjo bibliotekas

1. TypeScript
2. @types/node – dirbti TypeScript su NodeJS.
3. tsup – Paprasčiausias ir greičiausias būdas susieti „TypeScript“ bibliotekas.

KOPIJA

npm i typescript @types/node tsup -D

3 veiksmas: sąranka tsconfig „TypeScript“ nustatymams

Sukurti tsconfig.json failą projekto šaknyje.

KOPIJA

touch tsconfig.json

Eikite į failą ir įklijuokite šią konfigūraciją:

{
  "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"]
}

Užveskite pelės žymeklį ant kiekvienos nuosavybės, kad sužinotumėte apie ją daugiau.

Pagrindinis dalykas, kurį reikia suprasti čia, yra:

    "module": "NodeNext",
    "sourceMap": true,
    "outDir": "dist",

1. “ NodeNext yra tinkama parinktis kuriant bibliotekas, nes ji neleidžia siųsti ESM su modulių specifikacijomis, kurios tik dirbs bundleriuose, bet suges Node.js. Rašant įprastą kodą, naudojant sveiką protą ir pasikliaujant aukštos kokybės priklausomybėmis, jo išvestis paprastai yra labai suderinama su paketais ir kitomis vykdymo sąlygomis.” Daugiau apie tai galite sužinoti čia: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

2. sourceMap – Leidžia generuoti šaltinio failus. Šie failai leidžia derintojams ir kitiems įrankiams rodyti originalų „TypeScript“ šaltinio kodą dirbant su išleidžiamais „JavaScript“ failais. Galite jį išjungti gamybai.

3. outDir – Nurodykite visų siunčiamų failų išvesties aplanką.

  /* AND if you're building for a library: */
    "declaration": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"]

1. declaration – Kurkite .d.ts failus iš „TypeScript“ ir „JavaScript“ failų savo projekte.

2. lib – Nurodykite susietų bibliotekos deklaracijų failų rinkinį, apibūdinantį tikslinę vykdymo aplinką. es2022 skirtas mazgų programoms, tokioms kaip React ir dom & dom.iterable bibliotekai paleisti naršyklėje.

4 veiksmas: parašykite mūsų pirmąjį kodą

Sukurti index.ts failą ir parašykite šį pagrindinį kodą:

const add = (a: number, b: number): number => a + b;
const subtract = (a: number, b: number): number => a - b;

export { add, subtract };

Sukurkite pirmąjį kodą:

KOPIJA

tsup ./index.ts

Dabar galite pamatyti, kad turime a dist aplanką su išvesties failu index.cjs

Integruokime ir paleiskime pirmąjį SDK!

Sukurti app.js failą ir įklijuokite šį kodą:

import { add, subtract } from "./dist/index.cjs";

console.log(add(1, 2));
console.log(subtract(2, 1));

Kadangi savo SDK nepaskelbėme, tiesiogiai susiejame su vietine versija.

Dabar paleiskite mūsų pirmąją programą

node app.js

Turėtumėte pamatyti šią išvestį:

3
1

Sveikiname 🎉🥳 🚀🚀🚀 Ką tik sukūrėme ir paleidome pirmąjį SDK!

Užbaigimas:

Ką tik atlikome pagrindinius pirmojo SDK kūrimo ir vykdymo veiksmus. Pereikite prie 2 dalies, kurioje sukursime pagrindinę aplanko struktūrą ir integruosime išorinį API galinį tašką 🚀

…..

Dabar turite žinių, kad galėtumėte sukurti savo SDK. Laimingas kodavimas! 🚀

Štai ir viskas, žmonės! Tikimės, kad tai buvo geras skaitymas. Ačiū! ✨

👉 Sekite mane

GitHub

LinkedIn