Desarrollo del SDK de TypeScript: un niño de 5 años podría seguir este paso a paso ~ Parte 1: Nuestro primer MVP

¡Holaaaaaa!

¡Espero que estés muy bien! ¡Esto es SMY! 👋 Saltemos directamente 🚀

Contenido:

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

1️⃣ ¿Qué?

El SDK (a veces también conocido como biblioteca) sirve como complemento de aplicaciones para obtener funciones adicionales de la tecnología.

2️⃣ Por qué -

El desarrollo de SDK con TypeScript ofrece confiabilidad durante mucho tiempo debido a la seguridad de tipos y el mantenimiento a largo plazo.

3️⃣ Cómo -

Los pasos fundamentales necesarios para construir el SDK son los siguientes:

1. Inicializando el proyecto con la configuración de flujo de trabajo adecuada.
2. Elegir Bundler y comprender su propósito.
3. Comprensión de ESM, CJS, IIFE UMD para ejecutar SDK en diferentes entornos.
4. Publicación como biblioteca sobre NPM, versionado semántico y Licencia.
5. NPM para SPA y CDN para navegadores.

En la Parte 1, crearemos nuestro primer SDK básico para obtener una comprensión básica.

Paso 1: inicializar el proyecto

Ejecute el siguiente comando para configurar el proyecto en una nueva carpeta:

 npm init -y

"-y" por defecto es sí en todas las indicaciones de seguimiento. Puede cambiarlo más adelante en Package.json como el autor, la licencia, la versión, etc.

Dirígete a package.json y agrega type: module para trabajar con el último sistema de módulos EcmaScript (ESM).

Su package.json debería verse como el siguiente:

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

Paso 2: Instale las bibliotecas de desarrollo fundamentales

1. Mecanografiado
2. @types/node - para trabajar TypeScript con NodeJS.
3. tsup : la forma más sencilla y rápida de agrupar sus bibliotecas de TypeScript.

COPIAR

 npm i typescript @types/node tsup -D

Paso 3: Configurar tsconfig para la configuración de TypeScript

Cree un archivo tsconfig.json en la raíz del proyecto.

COPIAR

 touch tsconfig.json

Dirígete al archivo y pega la siguiente configuración:

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

Puede pasar el cursor sobre cada propiedad para obtener más información sobre ella.

Lo fundamental a entender aquí es:

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

1. " NodeNext es la opción correcta para crear bibliotecas porque le impide emitir ESM con especificadores de módulos que solo funcionan en paquetes pero que fallarán en Node.js. Al escribir código convencional, usar el sentido común y confiar en dependencias de alta calidad, es La salida suele ser altamente compatible con paquetes y otros tiempos de ejecución". Puedes aprender más acerca de esto aquí: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap : permite la generación de archivos fuente. Estos archivos permiten a los depuradores y otras herramientas mostrar el código fuente original de TypeScript cuando trabajan con los archivos JavaScript emitidos. Puede desactivarlo para producción.

   
   

3. outDir : especifique una carpeta de salida para todos los archivos emitidos.

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration : genere archivos .d.ts a partir de archivos TypeScript y JavaScript en su proyecto.

   
   

2. lib : especifica un conjunto de archivos de declaración de biblioteca incluidos que describen el entorno de ejecución de destino. es2022 es para aplicaciones de nodo como React y dom & dom.iterable para ejecutar la biblioteca en el navegador.

Paso 4: escriba nuestro primer código

Cree un archivo index.ts y escriba el siguiente código básico:

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

Construya nuestro primer código:

COPIAR

 tsup ./index.ts

Ahora puede ver que tenemos una carpeta dist con un archivo de salida index.cjs

¡Integremos y ejecutemos nuestro primer SDK!

Cree un archivo app.js y pegue el siguiente código:

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

Como no hemos publicado nuestro SDK, lo estamos vinculando directamente con la compilación local.

Ahora, ejecuta nuestra primera aplicación.

 node app.js

Deberías ver el siguiente resultado:

 3 1

Felicitaciones 🎉🥳 🚀🚀🚀 ¡Acabamos de crear y ejecutar nuestro primer SDK!

Terminando:

Acabamos de completar los pasos básicos para crear y ejecutar nuestro primer SDK. Dirígete a la Parte 2, donde crearemos una estructura de carpetas básica e integraremos un punto final API externo 🚀

.....

Ahora, está equipado con el conocimiento para crear su propio SDK. ¡Feliz codificación! 🚀

¡Eso es todo, amigos! Espero que haya sido una buena lectura para ti. ¡Gracias! ✨

👉 Sígueme

GitHub

LinkedIn