Oláoooo!  Espero que você esteja ótimo! Isso é SMY! 👋 Vamos começar 🚀  Esta é a Parte 3 de nossa   onde nos aprofundaremos na criação de aplicativos de teste para react, navegador, nó e nó legado. série de desenvolvimento de SDK,  Conteúdo:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Passo 1: Configurando   para diferentes ambientes tsup  Na raiz do projeto, crie o arquivo   e cole o seguinte conteúdo: tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    - Limpe o diretório de saída antes de cada compilação. clean    - definições de tipo para TypeScript. dts    - especificando o ponto de entrada. entry    -   para legado,   para projetos de nós mais recentes e   para navegadores. format cjs esm iife    - minimiza nosso código e reduz o tamanho do pacote. minify  Nenhuma configuração extra é necessária, pois   procurará automaticamente esse arquivo e cuidará de tudo para nós :) tsup  Agora, saia e execute novamente o comando   . build   npm run build  Você verá a seguinte saída em nossa pasta   .  dist    - para saída CJS index.cjs    - para ESM index.js    - para navegadores index.global.js  Etapa 2: crie um aplicativo Node  Em   , crie um arquivo   . Cole o seguinte conteúdo: example-apps/Node index.js   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   , crie um arquivo   e cole o seguinte conteúdo: example-apps/Legacy-Node index.cjs   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   , crie um arquivo   e cole o seguinte conteúdo: 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 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   , crie um aplicativo react, por exemplo, com vite: example-apps   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   , deve ser o nome do seu SDK/Biblioteca no package.json. ts-lib  Depois de criar o aplicativo React, abra um arquivo de componente como   e integre o SDK da seguinte forma: 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;  Execute o aplicativo react e vá para o console; deve ser parecido com o seguinte:   Empacotando:  Acabamos de concluir as etapas para construir e executar nosso SDK em diferentes ambientes.  Vá para a Parte 4 para publicar nosso SDK.  .....  Agora você está equipado com o conhecimento necessário para criar seu próprio SDK. Boa codificação! 🚀  É isso, pessoal! Espero que tenha sido uma boa leitura para você. Obrigado! ✨  👉 Siga-me   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 áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Uma breve introdução à teoria do cérebro de Boltzmann

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Uma breve introdução à teoria do cérebro de Boltzmann

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps