Qu’est-ce-qu’un générateur de code ?

Le principe

1. On lance une commande
2. On répond à quelques questions
3. TADAAA ! Les fichiers sont générés !

Gain de temps au scaffold d’un projet

Gain de temps & moins d'erreurs au quotidien

Exemple de générateur JS #1 : Yeoman

« The WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS »

• Très populaire
• Facile à installer / utiliser
• Language agnostic (Web, Java, Python, C#, etc.)
• De nombreux generators pour scaffold un projet standard : yeoman.io/generators/
• On peut créer et publier son propre générateur

En pratique

Exemple de générateur JS #2 :
Plop

Kezako Plop ?

• Le projet n’est pas forcément standard
• Créer un générateur, le publier et le maintenir dans un dépôt distinct n’a pas forcément de valeur ajoutée
• Au quotidien, ce serait quand même bien pratique

En pratique

Pourquoi plop plutôt que Yeoman ?

Des use cases différents

• scaffold un nouveau projet selon des standards
• bootstrap de nouveaux fichiers dans le cadre de ce projet (standard)

Plop

Yeoman

• bootstrap de nouveaux fichiers selon les standards personnalisés d'un projet

Les templates

C'est du Handlebars !

/**
 * TODO - Describe what your model does.
 *
 * @class         {{pascalCase name}}.Model
 * @module        {{pascalCase name}}
 * @constructor
 */
import {Model} from "backbone";

export default Model.extend( {

  initialize() {
    // Executed on model initialization
  }

} );

On a accès :

• aux variables du prompt
• aux helpers / partials définis

plop.addHelper( name, helper );

plop.addPartial( name, template );

Dans plopfile.js :

Créer un générateur

module.exports = function ( plop ) {

    plop.setGenerator( "module", {
        description: "create a new module",
        prompts: [],
        actions: []
    } );

};

plop.setGenerator( name, config );

Création

Utilisation

générateur − prompts

module.exports = function ( plop ) {

  plop.setGenerator( "module", {
    description: "create a new module",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is your module name?",
        validate: function (value) {
          if ((/.+/).test(value)) { return true; }
          return "name is required";
        }
      }
    ],
    // …
  } );

};

C'est du Inquirer !

générateur − actions

module.exports = function ( plop ) {

  plop.setGenerator( "module", {
    description: "create a new module",
    // …
    actions: [
      {
        type: "add",
        path: "modules/{{camelCase name}}.js",
        templateFile: "templates/module.js"
      }
    ]
  } );

};

3 types d'actions :

• add
• modify
• custom (fonction)

Strings parsées avec Handlebars

générateur − actions

actions: function( data ) {
  var actions = [];

  if( data.wantTacos ) {
    actions.push( {
      type: "add",
      path: "folder/{{dashCase name}}.txt",
      templateFile: "templates/tacos.txt"
    } );
  } else {
    actions.push( {
      type: "add",
      path: "folder/{{dashCase name}}.txt",
      templateFile: "templates/burritos.txt"
    } );
  }

  return actions;
}

actions peut aussi être une fonction qui :

• prend les réponses de prompts en paramètre
• retourne le tableau des actions à effectuer

Permet d'adapter les actions en fonction des réponses données