Debuter avec Bun

Débuter avec Bun : Un Tutoriel Complet en Français

Pourquoi Bun ?

Bun est une plateforme de développement JavaScript et TypeScript qui a été lancée récemment en 2023. Son objectif principal est d'offrir un environnement de développement plus rapide, plus sûr et plus efficace pour les développeurs. Avec Bun, vous pouvez créer des applications web, des API, des scripts automatisés et même des outils CLI.

Un cas d'utilisation concret de Bun est son utilisation pour développer des bots Discord. Les bots sont souvent basés sur Node.js, mais le démarrage rapide et les meilleures performances offertes par Bun peuvent rendre le développement plus efficace et fun.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Un système d'exploitation récent (Windows, macOS, Linux)
• Une connexion Internet
• Un éditeur de texte ou un IDE (Visual Studio Code recommandé)

Outils à installer :

• Node.js : Version 16.0.0 ou supérieure
• Bun : Version la plus récente

Vous pouvez installer Node.js et Bun en suivant les instructions officielles sur leurs sites web respectifs.

Concepts fondamentaux

Création d'un nouveau projet

Pour commencer un nouveau projet avec Bun, vous devez d'abord créer une nouvelle application. Voici comment le faire :

## Créez un nouveau répertoire pour votre projet
mkdir mon_projet_bun

## Naviguez dans le répertoire
cd mon_projet_bun

## Initialisez un nouveau projet Bun
bun init

Cette commande va vous guider à travers les étapes de création d'un nouveau projet, en demandant des informations comme le nom du package et la version.

Importation de modules

Bun utilise l'importation ES6 standard pour importer des modules. Voici un exemple simple :

// index.bun
import { log } from "std:log";

log.info("Bienvenue dans mon projet Bun !");

Création d'une fonction

Voici comment créer une fonction simple en Bun :

// utils.bun
export function addition(a, b) {
  return a + b;
}

Puis l'utiliser dans un autre fichier :

// index.bun
import { addition } from "./utils.bun";

const result = addition(5, 3);
console.log(result); // Affiche: 8

Création d'un serveur HTTP

Pour créer un simple serveur HTTP avec Bun, vous pouvez utiliser la bibliothèque http standard :

// server.bun
import { serve } from "std:http";

serve({
  fetch(req) {
    return new Response("Bonjour, world!");
  },
});

Vous pouvez ensuite lancer le serveur en exécutant :

bun run server.bun

Mise en pratique : Projet fil rouge

Création d'un gestionnaire de tâches simple

Dans ce projet, nous allons créer un gestionnaire de tâches simple. Voici comment le faire étape par étape.

Étape 1 : Initialisation du projet

mkdir task-manager
cd task-manager
bun init

Étape 2 : Création des fichiers

Créez les fichiers suivants :

• task_manager.bun : Le fichier principal de l'application.
• models/task.js : Le modèle pour les tâches.

Étape 3 : Modèle de données

// models/task.js
class Task {
  constructor(id, title, completed) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  markAsCompleted() {
    this.completed = true;
  }
}

module.exports = Task;

Étape 4 : Gestionnaire de tâches

// task_manager.bun
import { serve } from "std:http";
import Task from "./models/task.js";

const tasks = [];

serve({
  fetch(req) {
    const url = new URL(req.url);

    if (url.pathname === "/tasks" && req.method === "GET") {
      return new Response(JSON.stringify(tasks), {
        headers: { "Content-Type": "application/json" },
      });
    }

    if (url.pathname === "/tasks" && req.method === "POST") {
      const body = await req.json();
      const task = new Task(Date.now(), body.title, false);
      tasks.push(task);
      return new Response(JSON.stringify(task), {
        headers: { "Content-Type": "application/json" },
        status: 201,
      });
    }

    if (url.pathname.startsWith("/tasks/") && req.method === "PUT") {
      const taskId = parseInt(url.pathname.split("/")[2]);
      const body = await req.json();
      const task = tasks.find(t => t.id === taskId);
      if (task) {
        task.title = body.title;
        task.completed = body.completed;
        return new Response(JSON.stringify(task), {
          headers: { "Content-Type": "application/json" },
        });
      } else {
        return new Response("Tâche non trouvée", { status: 404 });
      }
    }

    if (url.pathname.startsWith("/tasks/") && req.method === "DELETE") {
      const taskId = parseInt(url.pathname.split("/")[2]);
      tasks.splice(tasks.findIndex(t => t.id === taskId), 1);
      return new Response("Tâche supprimée", { status: 204 });
    }

    return new Response("Non autorisé", { status: 405 });
  },
});

Étape 5 : Lancement du serveur

bun run task_manager.bun

Vous pouvez maintenant interagir avec votre gestionnaire de tâches via les endpoints /tasks (GET, POST, PUT, DELETE).

Erreurs frequentes et debugging

Erreur 1 : Syntaxe incorrecte

Message d'erreur :

SyntaxError: Unexpected token 'const'

Code incorrect :

// index.bun
const { log } from "std:log";

log.info("Bienvenue dans mon projet Bun !");

Code correct :

// index.bun
import { log } from "std:log";

log.info("Bienvenue dans mon projet Bun !");

Erreur 2 : Fichier non trouvé

Message d'erreur :

Module not found: ./utils.js

Code incorrect :

// index.bun
import { addition } from "./utils.js";

const result = addition(5, 3);
console.log(result); // Affiche: 8

Code correct :

// index.bun
import { addition } from "./utils.bun";

const result = addition(5, 3);
console.log(result); // Affiche: 8

Erreur 3 : Serveur ne démarre pas

Message d'erreur :

Unhandled Runtime Error
Error: listen EADDRINUSE: address already in use :::3000

Code incorrect :

// server.bun
import { serve } from "std:http";

serve({
  fetch(req) {
    return new Response("Bonjour, world!");
  },
});

Code correct :

## Choisissez un autre port disponible
bun run server.bun --port 3001

Pour aller plus loin

1. Ajouter une base de données

Vous pouvez utiliser une base de données comme MongoDB ou SQLite pour stocker les tâches au lieu d'un tableau en mémoire.

2. Utiliser TypeScript

TypeScript est un super-set de JavaScript qui ajoute des types statiques. Vous pouvez le configurer avec Bun pour bénéficier de la vérification de type.

3. Ajouter des tests

Utilisez une bibliothèque comme Jest pour écrire des tests unitaires et d'intégration pour votre application.

Un défi pratique à réaliser seul : Créez un petit CLI tool qui prend en charge les commandes add, list, done et delete pour gérer vos tâches.