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
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"
}
Instalando as dependências
Como utilizaremos o typescript no projeto, precisamos instalar o mesmo
npm install -D typescript
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
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"]
}
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"
}
}
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 };
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 ..
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!'
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/
Os comandos para publicação são ligeiramente simples.
npm login
npm publish
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"
}
]
}
};
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"
},
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 🤯
Top comments (0)