Whitigol SoftwareWhitigol Software

JavaScript

Manual installation of the fivem-compiler with JavaScript

Installing Dependencies

npm install @whitigol/fivem-compiler @citizenfx/client @citizenfx/server @types/node --save-dev

Creating Configuration Files

Compiler Configuration

Create a new file named wfm.config.js in the root of your project. This file defines how the compiler behaves.

wfm.config.js
import { defineConfig } from "@whitigol/fivem-compiler";

export default defineConfig({
	// Watch for file changes in the specified directories and subdirectories.
	// This configuration allows targeted builds by specifying different scopes: server, client, or all files.
	// Use these options with build flags such as --skip-server or --skip-client for more control.
	watch: {
		server: ["src/server/**/*.{lua,ts,js}"], // Files specific to the server-side codebase
		client: ["src/client/**/*.{lua,ts,js}"], // Files specific to the client-side codebase
		all: ["src/data/**/*", "src/stream/**/*"], // Shared files, including assets and data
	},

	// Define files or folders to copy from the project source to the output destination.
	// Each entry specifies a source path (from) and a destination path (to), relative to the project and output roots.
	//! DO NOT USE A LEADING SLASH — IT WILL BREAK THE BUILD!
	copy: [
		{
			from: "src/stream/**/*", // Directory containing files for FiveM's streaming functionality (e.g., models, textures)
			to: "stream", // Target location in the root of the output directory
		},
		{
			from: "src/data/**/*", // Directory for configuration or supplemental data files
			to: "data", // Target location in the root of the output directory
		},
		/*
        {
            * Single File Example

            from: "src/nested/single-file.txt", // Specify the exact file to copy
            to: "into/any/path/from/resource/root/filename.txt", // Target path including filename

            ? Note: If you change the filename in the "to" path, it will rename the file after moving it.
        },
        */
	],

	// Skips moving files defined in the "copy" option during watch mode.
	// This helps speed up build times in development, especially for large files
	// (e.g., assets in the "stream" folder) that you only want to move during a build.
	skipCopyDuringWatch: true,

	//! WARNING: Minification is discouraged and may violate FiveM's Terms of Service. Use at your own risk.
	//* Note: Minification is not supported for Lua files.
	minify: false,

	//! WARNING: Obfuscation is discouraged and may violate FiveM's Terms of Service. Use at your own risk.
	//* Note: Obfuscation is not supported for Lua files.
	obfuscate: false, //? Enabling this option may significantly increase build times.

	// Configuration for the output resource directory.
	resource: {
		// Specify the root output directory for the final built resource.
		//* NOTE: If the "OUTPUT_DIR" environment variable is defined, it will override this value.
		//! DO NOT USE A LEADING SLASH — IT WILL BREAK THE BUILD!
		directory: "resource",
	},
});

Language Definition

Create a new file called js.wfm in the root of your project. This lets the compiler know you're using JavaScript.


Project Structure

Project Source Folder

Create a src folder in the root of your project. This will be the base for organizing your code.

You can name it something else if you prefer, but make sure to update the paths in your configuration file accordingly.

Client and Server Folders

Inside the src folder, create two subfolders named client and server. These folders will contain your client-side and server-side logic, respectively.

JavaScript Configuration

While you’re using JavaScript, you should still create a jsconfig.json file in both the client and server folders. This helps with type checking, editor tooling, and code assistance.

Index Files

In both the client and server folders, create an index.js file. These will act as the main entry points for your logic.

Edit on GitHub

Last updated: Unknown