SDK simples com Node e Typescript

drigomartins

Rodrigo Martins

Posted on July 24, 2023

SDK simples com Node e Typescript

Olá pessoal, nos últimos meses precisei construir um sdk para uma demanda interna do trabalho e percebi que havia pouco conteúdo a respeito em português, então resolvi criar este tutorial para ajudar a disseminar conteúdo, espero que gostem 🤗.

Iniciando o projeto node

Para iniciar o projeto, execute o comando abaixo dentro do repositório onde deseja iniciar o projeto.

npm init -y
Enter fullscreen mode Exit fullscreen mode

Após a execução do comando ele deve gerar um arquivo package.json, fique a vontade para complementar o arquivo com as informações que precisar, mas abaixo deixo um exemplo de como deixei o meu

{
  "name": "sdk-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prepare": "npm run build",
    "build": "tsc"
  },
  "keywords": [
    "typescript",
    "sdk"
  ],
  "author": "Rodrigo Martins",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

Instalando as dependências

Como utilizaremos o typescript no projeto, precisamos instalar o mesmo

npm install -D typescript
Enter fullscreen mode Exit fullscreen mode

Com a utilização do typescript, e necessário um arquivo chamamo tsconfig.json no mesmo caminho do package.json, para gerar um você pode executar o comando abaixo.

./node_modules/.bin/tsc --init
Enter fullscreen mode Exit fullscreen mode

ou então pode copiar o exemplo abaixo que estou utilizando no meu projeto.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "outDir": "./dist",
    "resolveJsonModule": true
  }
  "include": ["./*"],
  "exclude": ["node_modules", "dist"]
}
Enter fullscreen mode Exit fullscreen mode

Configurando o package.json

Como definimos no tsconfig.json que o outDir será a pasta dist precisamos ajustar algumas informações no package.json

{
  "name": "sdk-node",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "npm run build",
    "build": "tsc"
  },
  "keywords": [
    "typescript",
    "sdk"
  ],
  "author": "Rodrigo Martins",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}
Enter fullscreen mode Exit fullscreen mode

Pronto, tendo tudo configurado, já podemos partir para o desenvolvimento.

criando uma função do SDK

Precisamos de um arquivo chamado index.ts na raiz do projeto, e iremos criar uma função que retorna um simples Hello, World! no console.
Deixarei o exemplo abaixo:

export function getMessage(): string {
    const message: string = 'Hello, World!'
    console.log(message)
}

export default { getMessage };
Enter fullscreen mode Exit fullscreen mode

Pronto! Com isto já e possível compilar e testar o nosso SDK.

Testando a aplicação

Após todas as configurações feitas no nosso SDK, tentaremos usá-lo em um outro projeto, também simples, para isto podemos criar um novo projeto dentro deste projeto atual, abaixo vou deixar a lista de comandos necessários.

npm run build
mkdir node-test
cd node-test
npm init -y
npm install ..
Enter fullscreen mode Exit fullscreen mode

Pronto! Por fim, basta realizar o import da dependência e executar a função. Meu teste ficou exatamente assim:

const sdkNode = require('sdk-node');

sdkNode.getMessage();
// deve mostrar no console a frase 'Hello, World!'
Enter fullscreen mode Exit fullscreen mode

Realizando a Publicação

Precisaremos de um novo arquivo chamado .npmignore para impedir que a pasta de teste "node-test" seja enviada junto com o SDK

// .npmignore
node-test/
Enter fullscreen mode Exit fullscreen mode

Os comandos para publicação são ligeiramente simples.

npm login 
npm publish
Enter fullscreen mode Exit fullscreen mode

Isto e tudo ❤️.

Conteúdo bônus

Caso queira um único arquivo sdk, que pode ser adicionado via tag script <script type="module"></script> em qualquer projeto html.

Instale as dependencias ts-loader, webpack-cli.
Crie um arquivo webpack.config.js

const path = require('path');

module.exports = {
  mode: "production",
  devtool: "inline-source-map",
  entry: {
    main: "./index.ts",
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "sdk-node-file.js",
    library: 'sdk-node',
    libraryTarget: "umd",
    libraryExport: "default"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

E por fim adicione o script para build no seu package.json:

  "scripts": {
    "prepare": "npm run build",
    "build": "tsc",
    "build:script": "webpack--config webpack.config.js"
  },
Enter fullscreen mode Exit fullscreen mode

Pronto! com isto você será capaz de criar um SDK que seja compativel com praticamente qualquer projeto.

Espero que eu tenha contribuido de alguma forma para o seu trabalho e até o proximo tutorial 🤯

💖 💪 🙅 🚩
drigomartins
Rodrigo Martins

Posted on July 24, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related