415 leituras

Uma criança de 5 anos poderia seguir este guia de desenvolvimento do SDK TypeScript ~ Parte 3: Criando aplicativos de teste

por Syed Muhammad Yaseen4m2024/07/08

Muito longo; Para ler

Esta é a Parte 3 de nossa série de desenvolvimento de SDK, onde nos aprofundaremos na criação de aplicativos de teste para react, navegador, nó e nó legado.

featured image - Uma criança de 5 anos poderia seguir este guia de desenvolvimento do SDK TypeScript ~ Parte 3: Criando aplicativos de teste

Oláoooo!

Espero que você esteja ótimo! Isso é SMY! 👋 Vamos começar 🚀

Esta é a Parte 3 de nossa série de desenvolvimento de SDK, onde nos aprofundaremos na criação de aplicativos de teste para react, navegador, nó e nó legado.

Conteúdo:

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

Passo 1: Configurando `tsup` para diferentes ambientes

Na raiz do projeto, crie o arquivo tsup.config.ts e cole o seguinte conteúdo:

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

clean - Limpe o diretório de saída antes de cada compilação.

dts - definições de tipo para TypeScript.

entry - especificando o ponto de entrada.

format - cjs para legado, esm para projetos de nós mais recentes e iife para navegadores.

minify - minimiza nosso código e reduz o tamanho do pacote.

Nenhuma configuração extra é necessária, pois tsup procurará automaticamente esse arquivo e cuidará de tudo para nós :)

Agora, saia e execute novamente o comando build .

 npm run build

Você verá a seguinte saída em nossa pasta dist .

index.cjs - para saída CJS

index.js - para ESM

index.global.js - para navegadores

Etapa 2: crie um aplicativo Node

Em example-apps/Node , crie um arquivo index.js . Cole o seguinte conteúdo:

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

Agora, execute o arquivo com um nó em um terminal separado e vá para a pasta:

 node index.js

Você verá a saída no terminal.

Etapa 3: criar um aplicativo Node legado

Em example-apps/Legacy-Node , crie um arquivo index.cjs e cole o seguinte conteúdo:

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

Agora, execute o arquivo com um nó em um terminal separado e vá para a pasta:

 node index.cjs

Você verá a saída no terminal.

Etapa 4: crie um aplicativo de navegador

Em example-apps/Browser , crie um arquivo index.html e cole o seguinte conteúdo:

 <!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 o arquivo no navegador, você verá a seguinte resposta na guia do console do elemento inspecionar:

Etapa 5: crie um aplicativo React

Crie um link para nosso SDK para funcionar como uma biblioteca para projetos sem publicação.

 npm link

Em example-apps , crie um aplicativo react, por exemplo, com vite:

 npm create vite@latest

Depois de criar com sucesso um aplicativo react, execute o seguinte comando na pasta raiz React para vincular nosso SDK.

 npm link ts-lib

No lugar de ts-lib , deve ser o nome do seu SDK/Biblioteca no package.json.

Depois de criar o aplicativo React, abra um arquivo de componente como App.jsx e integre o SDK da seguinte forma:

 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;

Execute o aplicativo react e vá para o console; deve ser parecido com o seguinte: