Structurer son application javascript

a marqué ce sujet comme résolu.
Auteur du sujet

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

#JeSuisArius

+0 -0
Auteur du sujet

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 :(

#JeSuisArius

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte