Un framework de micro-générateur: création de modèle (partie-2) / blogs / perficient

Poursuivant notre voyage Plop.js depuis Last blog

Dans notre discussion précédente, Nous avons exploré une introduction à Plop.js et son installation dans un projet suivant.js. En plus, Nous avons examiné un squelette de base de Plopfile.js.

Comprendre les composants de Plopfile.js

Comme nous l’avons vu plus tôt, Le Plopfile.js se compose d’éléments clés qui définissent le générateur. Brisons-les à nouveau pour plus de clarté:

• 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.

Créer notre premier modèle

Avant de plonger dans la création de modèle, Comprenons d’abord le concept d ‘«actions» à l’intérieur «setGenerator». Après tout, C’est là que se produit la vraie magie!

Écrivons un générateur pour créer un nouveau composant.

plop.setGenerator("component", {
  description: "Create a new React component",
  prompts: [
    {
      type: "input",
      name: "name",
      message: "What is this component’s name?",
    },
  ],
  actions: [
    {
      type: "add",
      path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
      templateFile: "plop-template/component.hbs",
    },
  ],
});

Rompre le code

• Dans l’exemple ci-dessus, Nous utilisons le type d’action «Ajouter», qui crée un fichier au «chemin» spécifié et le remplit d’un squelette défini dans «templatefile».
• Plop s’appuie sur le guidon (Huissiers.js), un moteur de modèles utilisé pour générer du texte structuré comme des fichiers HTML ou JavaScript.
• Noter que Le «templatefile» se termine par une extension .hbs, ce qui signifie un modèle de guidon.

Explorer plus d’actions

En plus de «ajouter», Il existe plusieurs autres actions intégrées comme:

• « Addmany »
• « modifier »
• « ajouter »
• «Custom» (pour des actions entièrement personnalisées)

Vous pouvez explorer la liste complète ici: Actions intégrées de Plop.js.

Organiser des modèles dans un dossier

Maintenant que nous comprenons les actions, Organions nos fichiers de modèle.

1. D’abord, Créez un nouveau dossier appelé Plop-template à la racine de votre projet.
2. À l’intérieur de ce dossier, Créez différents modèles de guidon pour divers types de fichiers tels que:
   • .tsx pour les composants de réaction
   • .SCSS pour les styles
   • .md pour la documentation
   • .test.tsx pour les cas de test

Exemple de syntaxe du guidon

Dans le guidon, Les variables sont enfermées dans des accolades à double boucle {{}}. De plus, Les aides intégrées comme «Pascalcase» permettent la mise en forme de variables.

const {{pascalCase name}} = () => {
  return <div>{{pascalCase name}} Component</div>;
};

export default {{pascalCase name}};

En plus de «Pascalcase», Vous pouvez également utiliser:

• « Camelcase »
• «Snakecase»
• « minuscule »

Consultez la liste complète ici: Aiders intégrés de Plop.js.

Exécution du générateur à l’aide de Plop

Après avoir tout mis en place, Nous sommes maintenant prêts à gérer notre générateur! Il y a deux façons de le faire:

1. Utilisation de la commande CLI
   
2. Utilisation de VS Code Script Runner
   Alternativement, Vous pouvez ouvrir le fichier package.json, survolez le script «Générer», et cliquez sur «Exécuter le script» dans votre éditeur.

Génération de notre premier composant avec Plop

Maintenant, créons notre premier vrai composant « Bouton”Utilisation de la commande Plop Run NPM Générer (avec l’une des deux options mentionnées ci-dessus). Après avoir exécuté la commande, le terminal affichera les invites comme mentionné dans le Plopfile.js

Cela vous invitera avec des questions selon Plopfile.jstel que:

1. Quel est le nom de ce composant? → Bouton
2. Élément html (par défaut est div)? → bouton

Une fois que vous avez fourni les entrées (Référez la capture d’écran ci-dessus pour mieux comprendre), Le composant est créé à l’emplacement spécifié, et vous verrez un message de réussite dans le terminal.

Réflexions finales

Comme vous pouvez le voir, Plop.js simplifie la création de composants en automatisant la génération de fichiers et en réduisant les tâches répétitives. En configurant des modèles structurés, Nous assurons la cohérence et augmentons la productivité à travers le projet.

Quelle est la prochaine étape?

Dans la section à venir, Nous explorerons:

• Autres méthodes clés plop.js (au-delà de «setGenerator»)
• Actions intégrées et personnalisées
• Exemples plus pratiques

Alors, restez à l’écoute! 🚀