393 lecturas

Un niño de 5 años podría seguir esta guía de desarrollo del SDK de TypeScript ~ Parte 3: Creación de aplicaciones de prueba

por Syed Muhammad Yaseen4m2024/07/08

Demasiado Largo; Para Leer

Esta es la Parte 3 de nuestra serie de desarrollo de SDK, donde nos sumergiremos en la creación de aplicaciones de prueba para reaccionar, navegador, nodo y nodo heredado.

featured image - Un niño de 5 años podría seguir esta guía de desarrollo del SDK de TypeScript ~ Parte 3: Creación de aplicaciones de prueba

¡Holaaaaaa!

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

Esta es la Parte 3 de nuestra serie de desarrollo de SDK , donde nos sumergiremos en la creación de aplicaciones de prueba para reaccionar, navegador, nodo y nodo heredado.

Contenido:

⚡ Setting up tsup for different execution environments
⚡ Creating our apps

Paso 1: configurar `tsup` para diferentes entornos

En la raíz del proyecto, cree el archivo tsup.config.ts y pegue el siguiente contenido:

 import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });

clean : limpia el directorio de salida antes de cada compilación.

dts : definiciones de tipos para TypeScript.

entry : especificando el punto de entrada.

format : cjs para versiones heredadas, esm para proyectos de nodos más nuevos e iife para navegadores.

minify : minimiza nuestro código y reduce el tamaño del paquete.

No se necesita ninguna configuración adicional, ya que tsup buscará automáticamente este archivo y se encargará de todo por nosotros :)

Ahora, salga y vuelva a ejecutar el comando build .

 npm run build

Verá el siguiente resultado en nuestra carpeta dist .

index.cjs - para salida CJS

index.js - para ESM

index.global.js - para navegadores

Paso 2: crea una aplicación de nodo

En example-apps/Node , cree un archivo index.js . Pegue el siguiente contenido:

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

Ahora, ejecute el archivo con un nodo en una terminal separada y diríjase a la carpeta:

 node index.js

Verá la salida en la terminal.

Paso 3: crear una aplicación de nodo heredado

En example-apps/Legacy-Node , cree un archivo index.cjs y pegue el siguiente contenido:

 const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));

Ahora, ejecute el archivo con un nodo en una terminal separada y diríjase a la carpeta:

 node index.cjs

Verá la salida en la terminal.

Paso 4: crea una aplicación de navegador

En example-apps/Browser , cree un archivo index.html y pegue el siguiente contenido:

 <!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>

Abra el archivo en el navegador, debería ver la siguiente respuesta en la pestaña de la consola del elemento de inspección:

Paso 5: crea una aplicación React

Crea un Enlace a nuestro SDK para que se comporte como una biblioteca para proyectos sin publicar.

 npm link

En example-apps , cree una aplicación de reacción, por ejemplo, con vite:

 npm create vite@latest

Después de crear con éxito una aplicación de reacción, ejecute el siguiente comando en la carpeta raíz de React para vincular nuestro SDK.

 npm link ts-lib

En lugar de ts-lib , debería ser el nombre de su SDK/biblioteca en el archivo package.json.

Después de crear la aplicación React, abra un archivo de componente como App.jsx e integre el SDK como el siguiente:

 import sdk from "ts-lib"; console.log(await sdk.fetchUsers());

Vista completa:

 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;

Ejecute la aplicación de reacción y diríjase a la consola; debería verse como el siguiente: