Desenvolvimento do SDK TypeScript: uma criança de 5 anos poderia seguir este passo a passo ~ Parte 1: Nosso primeiro MVP

Oláoooo!

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

Conteúdo:

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

1️⃣ O que -

SDK (às vezes também conhecido como biblioteca) serve como um plug-in em aplicativos para obter recursos adicionais da tecnologia.

2️⃣ Por que -

O desenvolvimento de SDK com TypeScript oferece confiabilidade por um longo tempo devido à segurança de tipo e manutenção a longo prazo.

3️⃣ Como -

As etapas fundamentais necessárias para construir o SDK são as seguintes:

1. Inicializando o projeto com as configurações corretas de fluxo de trabalho.
2. Escolhendo o Bundler e entendendo seu propósito.
3. Noções básicas sobre ESM, CJS, IIFE UMD para executar SDK em diferentes ambientes.
4. Publicação como biblioteca em NPM, versionamento semântico e licença.
5. NPM para SPAs e CDN para navegadores.

Na Parte 1, construiremos nosso primeiro SDK básico para obter um entendimento básico.

Etapa 1: inicializar o projeto

Execute o seguinte comando para definir o projeto em uma nova pasta:

 npm init -y

O padrão "-y" é sim para todos os prompts de acompanhamento. Você pode alterá-lo posteriormente no Package.json como autor, licença, versão, etc.

Vá para package.json e adicione type: module para funcionar com o sistema EcmaScript Module (ESM) mais recente.

Seu package.json deve ser parecido com o seguinte:

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

Etapa 2: instalar bibliotecas de desenvolvimento fundamentais

1. Texto datilografado
2. @types/node - para trabalhar TypeScript com NodeJS.
3. tsup – A maneira mais simples e rápida de agrupar suas bibliotecas TypeScript.

CÓPIA DE

 npm i typescript @types/node tsup -D

Etapa 3: configurar tsconfig para configurações TypeScript

Crie um arquivo tsconfig.json na raiz do projeto.

CÓPIA DE

 touch tsconfig.json

Vá até o arquivo e cole a seguinte configuração:

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

Você pode passar o mouse sobre cada propriedade para saber mais sobre ela.

O fundamental a entender aqui é:

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

1. " NodeNext é a opção certa para a criação de bibliotecas porque evita que você emita ESM com especificadores de módulo que funcionam apenas em bundlers, mas travarão no Node.js. Ao escrever código convencional, usando o bom senso e contando com dependências de alta qualidade, é a saída geralmente é altamente compatível com empacotadores e outros tempos de execução." Você pode aprender mais sobre isso aqui: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - Permite a geração de arquivos de origem. Esses arquivos permitem que depuradores e outras ferramentas exibam o código-fonte TypeScript original ao trabalhar com os arquivos JavaScript emitidos. Você pode desativá-lo para produção.

   
   

3. outDir – Especifique uma pasta de saída para todos os arquivos 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 - Gere arquivos .d.ts a partir de arquivos TypeScript e JavaScript em seu projeto.

   
   

2. lib - Especifique um conjunto de arquivos de declaração de biblioteca agrupados que descrevem o ambiente de tempo de execução de destino. es2022 é para aplicativos de nó como React e dom & dom.iterable para executar a biblioteca no navegador.

Etapa 4: escreva nosso primeiro código

Crie um arquivo index.ts e escreva o seguinte 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 };

Construa nosso primeiro código:

CÓPIA DE

 tsup ./index.ts

Agora você pode ver que temos uma pasta dist com um arquivo de saída index.cjs

Vamos integrar e executar nosso primeiro SDK!

Crie um arquivo app.js e cole o seguinte código:

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

Como não publicamos nosso SDK, estamos vinculando diretamente ao build local.

Agora, execute nosso primeiro aplicativo

 node app.js

Você deverá ver a seguinte saída:

 3 1

Parabéns 🎉🥳 🚀🚀🚀 Acabamos de construir e executar nosso primeiro SDK!

Empacotando:

Acabamos de concluir as etapas básicas para construir e executar nosso primeiro SDK. Vá para a Parte 2, onde construiremos uma estrutura básica de pastas e integraremos um endpoint de API externo 🚀

.....

Agora você está equipado com conhecimento 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