Introdução ao exports

No desenvolvimento de scripts para FiveM, a comunicação entre diferentes recursos (resources) é essencial. O exports é uma ferramenta poderosa que permite que funções de um script sejam acessíveis a outros scripts, facilitando a integração e reutilização de funcionalidades. Isso torna o desenvolvimento modular e eficiente, promovendo boas práticas.

Em JavaScript, o conceito de exports no FiveM é semelhante à exportação de módulos em outros contextos, mas é adaptado ao ambiente do FiveM. Ele possibilita a interação entre scripts escritos em JavaScript e outros em Lua, permitindo, por exemplo, usar frameworks como ox_lib e QbCore diretamente em um código JavaScript.

O que é um export?

Um export é uma função ou método disponibilizado por um resource para que outros resources possam utilizá-lo. Com isso, você pode:

• Centralizar funcionalidades comuns (como salvar dados, realizar validações, etc.);
• Evitar duplicação de código;
• Facilitar a integração de scripts em diferentes linguagens.

Como funciona no FiveM?

No FiveM, os exports podem ser usados tanto no servidor (server-side) quanto no cliente (client-side). Vamos explorar a diferença:

• Server-side: As funções exportadas no servidor são acessíveis apenas por outros scripts do lado do servidor.
• Client-side: As funções exportadas no cliente são acessíveis apenas por outros scripts do lado do cliente.

Importante: Não é possível chamar diretamente um export do servidor no cliente, ou vice-versa. Essa separação respeita o modelo de segurança e performance do FiveM.

Criando e Usando exports no Client (JavaScript)

1. Exportando uma função em um resource chamado "resourceA"

// client.js
global.exports('showNotification', (message) => {
    console.log(message)
});

        

2. Consumindo a função exportada em um segundo resource chamado "resourceB"

Para utilizar uma função com exports, basta utilizar o nome do resource que a função pertence.

Ex: resourceA

// client.js
exports['resourceA'].showNotification('Olá, este é um export no cliente!');

ou 

exports.resourceA.showNotification('Olá, este é um export no cliente!');

        

Criando e Usando exports no Server (JavaScript)

1. Exportando uma função

// server.js
global.exports('getPlayerData', (playerId) => {
    const playerName = GetPlayerName(playerId);
    return { id: playerId, name: playerName };
});

        

2. Consumindo a função exportada

// server.js
const playerData = exports['resourceA'].getPlayerData(1); // 1 é o ID do jogador
console.log(playerData); // { id: 1, name: 'Jogador1' }

        

Integração com frameworks LUA como ox_lib e QbCore

Se você utiliza Lua frameworks como ox_lib, pode chamar seus métodos exportados diretamente em JavaScript.

OBS: é OBRIGATÓRIO o uso da palavrinha global antes do export ao realizar chamadas a código LUA

Exemplo: usando export no Javascript (ox_lib)

    global.exports.ox_target.addGlobalPed({
        {
            name = 'debug_ped_teste',
            event = 'ox_target:debug',
            icon = 'fa-solid fa-male',
            label = 'Teste Ox Lib',
            distance = 2
        }
    })

        

Feito isso, agora você verá uma noma opção ao passar o target(olhinho) sobre qualquer NPC, caso utilize ox_target na sua base.

Exemplo QbCore no JavaScript

// client.js
global.exports['qb-core'].DrawText('Testando o Draw Text QbCore via exports')

        

Diferenças entre Server e Client

Conclusão

Os exports são essenciais para o desenvolvimento modular no FiveM. Eles permitem integrar funcionalidades em diferentes linguagens, como JavaScript e Lua, aumentando a flexibilidade e reutilização de código.

Com uma compreensão clara de como utilizá-los no servidor e no cliente, você poderá criar scripts mais organizados e profissionais, otimizando o fluxo de trabalho em projetos complexos.