¡Holaaaaaa!  ¡Espero que estés muy bien! ¡Esto es SMY! 👋 Saltemos directamente 🚀  Esta es la Parte 3 de nuestra   , donde nos sumergiremos en la creación de aplicaciones de prueba para reaccionar, navegador, nodo y nodo heredado. serie de desarrollo de SDK  Contenido:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Paso 1: configurar   para diferentes entornos tsup  En la raíz del proyecto, cree el archivo   y pegue el siguiente contenido: tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    : limpia el directorio de salida antes de cada compilación. clean    : definiciones de tipos para TypeScript. dts    : especificando el punto de entrada. entry    :   para versiones heredadas,   para proyectos de nodos más nuevos e   para navegadores. format cjs esm iife    : minimiza nuestro código y reduce el tamaño del paquete. minify  No se necesita ninguna configuración adicional, ya que   buscará automáticamente este archivo y se encargará de todo por nosotros :) tsup  Ahora, salga y vuelva a ejecutar el comando   . build   npm run build  Verá el siguiente resultado en nuestra carpeta   .  dist    - para salida CJS index.cjs    - para ESM index.js    - para navegadores index.global.js  Paso 2: crea una aplicación de nodo  En   , cree un archivo   . Pegue el siguiente contenido: example-apps/Node index.js   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   , cree un archivo   y pegue el siguiente contenido: example-apps/Legacy-Node index.cjs   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   , cree un archivo   y pegue el siguiente contenido: 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>  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   , cree una aplicación de reacción, por ejemplo, con vite: example-apps   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   , debería ser el nombre de su SDK/biblioteca en el archivo package.json. ts-lib  Después de crear la aplicación React, abra un archivo de componente como   e integre el SDK como el siguiente: App.jsx   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:   Terminando:  Acabamos de completar los pasos para construir y ejecutar nuestro SDK en diferentes entornos.  Dirígete a la Parte 4 para publicar nuestro SDK.  .....  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

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

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Telegram: el puente de Crypto Island hacia el continente

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Telegram: el puente de Crypto Island hacia el continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps