Un cadre de micro-générateurs: introduction et installation (partie 1) / blogs / perficient

Nous avons tous rencontré cette situation d’innombrables fois Dans nos projets – co-co-coller des fichiers juste pour créer un nouveau composant, une nouvelle page ou un nouveau service. Malheureusement, Cela nous ralentit et entrave notre productivité en introduisant des erreurs dans le flux de travail. Cependant, il y a une solution! Plop.js est la réponse à ce problème, car il automatise ces tâches et nous permet de nous concentrer sur l’écriture d’un excellent code.

Qu’est-ce que Plop.js?

Plop.js est un outil d’échafaudage simple mais puissant –autrement dit, Un cadre de micro-générateurs – qui nous aide à automatiser les tâches de codage répétitives pour les projets. Par conséquent, Il fait gagner du temps, réduit les erreurs et standardise les structures de code. De plus, Il assure l’uniformité entre les fichiers, ce qui facilite la vie de toute l’équipe.

Fonctionnalités en surbrillance:

• Avant tout, Génération de fichiers basée sur un modèle.
• En plus, Une CLI interactive permettant une expérience utilisateur plus fluide.
• Dernièrement, réaliser une extensibilité à travers des actions personnalisées.

Installation de Plop.js

Plop.js peut être installé dans l’un de vos projets. Pour illustrer cela, Prenons un exemple de projet Next.js.

Étape 1: Créer un projet suivant.js

Pour commencer, créez un projet Next.js en utilisant la commande suivante:

Par conséquent, La commande CLI ci-dessus vous invitera avec d’autres questions pour configurer votre projet Next.js.
(Sélectionnez des réponses selon vos besoins):

• Comment est votre projet nommé? maymot
• Souhaitez-vous utiliser TypeScript? Non / Oui
• Souhaitez-vous utiliser Eslint? Non / Oui
• Souhaitez-vous utiliser le vent arrière CSS? Non / Oui
• Souhaitez-vous votre code dans un répertoire `src /`? Non / Oui
• Souhaitez-vous utiliser l’application Router? (recommandé) Non / Oui
• Souhaitez-vous utiliser Turbopack pour «Next Dev`? Non / Oui
• Souhaitez-vous personnaliser l’alias d’importation (`@ / *` par défaut)? Non / Oui

Étape 2: Installer plop.js

Une fois votre projet suivant.js mis en place, Accédez au dossier du projet et installez Plop.js en utilisant la commande ci-dessous:

Cette installation génère trois fichiers clés:

1. UN node_modules dossier pour toutes vos bibliothèques, packages et code tiers.
2. UN package.json Fichier qui vous donnera un point de départ pour vos scripts.
3. UN package-lock.json Fichier, qui verrouillera les versions pour chaque package.
   

En plus de cela, L’installation de PLOP à l’échelle mondiale est facultative mais recommandée:

Étape 3: Créer Plopfile.js

Suivant, Créer un Plopfile.js à l’origine de votre projet. Vous trouverez ci-dessous un exemple très basique de Plopfile.js

module.exports = function (plop) {
  plop.setGenerator("basics", {
    description: "My first Plop generator",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is the name of your component?",
      },
    ],
    actions: [
      {
        type: "add",
        path: "./components/{{pascalCase name}}.js",
        templateFile: "templates/component.hbs",
      },
    ],
  });
};

Décomposer le code:

• Le « setGenerator«Crée un générateur du Plop. Ici, ce Plopfile.js a un seul générateur appelé«bases».
• Le « description«Comme son nom l’indique, décrit le but du générateur.
• Le « invite«Est un tableau d’invites. Cela pourrait être ajouté pour votre générateur créé.
• Le « actes« Prend les informations que l’utilisateur a fournies à chaque invite. Il s’agit d’un tableau de l’endroit où chaque action est un objet. Il s’agit d’une étape importante et nécessite de créer des modèles.

Étape 4: Ajouter un script à package.json

Avant d’exécuter Plop, Ajouter le script suivant (mis en évidence dans la capture d’écran ci-dessous) à package.json

Étape 5: Exécutez Plop

Et enfin, exécutez Plop dans la commande CLI « Run NPM Générer« 

À ce point, Plop vous exécutera et vous guidera à travers le processus de création des composants!

Quelle est la prochaine étape?

Jusqu’à présentnous avons couvert le Introduction et installation de Plop.js avec un base squelette pour plopfile.js.
Dans la partie suivantenous plongerons plus profondément Plopfile.jsRemplacez le code squelette par le code de travail et créez notre premier modèle réel. Restez à l’écoute!