Structurer son application javascript

Bonjour,

J’ai créer un userscript pour un jeu sur navigateur. Au début le projet était modeste mais avec le temps celui-ci s’est agrandi au point de dépasser les 1.200 lignes de code rendant l’édition plus laborieuse.

Je suis habitué à la structure d’un projet sous Angular 2 que je trouve très pratique et j’aurai souhaité retrouver une structure similaire pour mon projet.

Sauf que je n’y arrive pas, je ne suis pas parvenu à trouver une librairie me permettant d’y arriver aussi facilement que sous Angular.

Concrètement j’aurai bien aimé structurer mon projet ainsi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/
  src
    app
      components
        a
          a.js
          a.html
          a.css
        b
          b.js
          b.html
          b.css

Et à la fin je souhaite me retrouver avec un unique fichier js contenant l’ensemble des composants.

J’ai essayé avec gulp, si j’ai pu arriver à quelque chose avec le javascript à partir du moment où j’ai voulu travaillé avec le html j’ai abandonné.

Je suis tombé sur webpack… mais j’y arrive juste pas.

Bref, quelqu’un aurai-t’il une idée pour structurer un projet js de façon à pouvoir avoir plusieurs fichier sans forcément devoir inclure tout Angular ?

Merci d’avance.
Cordialement, La source

Salut !

Du coup tu utilises angular ou pas ? Où est-ce que tu bloques avec webpack ?

Si tu souhaites rassembler les fichiers en un seul tu as Closure Compiler qui permet en plus de minifier le js.

Ou sinon fait un petit script qui rassemble les fichiers en un seul.

Il s’agit ici d’un userscript. Le but d’un userscript est de s’exécuter sur les pages web existante pour ajouter des fonctionnalités.

Un userscript c’est un fichier javascript qui est interpretté par le navigateur. Autrement dit, le résultat final doit tenir dans un seul et unique fichier javascript.

Le jeu ne tourne pas sous Angular, je ne me vois pas importer Angular pour quelques petites modifications à droite à gauche.

Fusionner les fichiers javascript entre eux pour en avoir un seul à la fin je sais faire grâce à gulp (et même résoudre les dépendances). Le problème se pose au niveau du html.

Concrètement, dans mon script à un moment je souhaite intégrer du html (et pas juste une ligne), du coup j’aimerai bien faire un fichier html séparer. Mais comment l’inclure dans le javascript ensuite ? Puis du coup quel moteur de template utiliser ? Puisque avant je me bornais à faire:

1
2

// ...
$('body').append(`<div>${mavar}</div>`);

La variable étant hors du contexte à présent…

Bref plus j’avance dans l’idée de la découpe plus je trouve sa compliquer car j’ajoute des dépendance dans mon script…

Lorsque mon fichier est en un seul tenant il faut _{35Ko + les dépendances sous forme de librairies externe} 230Ko… soit un poids total de ~265Ko.
Alors qu’avec gulp mon fichier (certes en un seul tenant) est de plus de 450Ko… et faudrai encore ajouter des dépendances