webpack est sans doute devenu le bundler de module JavaScript de facto, mais il a la réputation d'être déroutant et difficile à apprendre. Dans cet article, je souhaite présenter une alternative webpack plus rapide et plus simple – FuseBox .

Dans le paysage frontal en évolution rapide d'aujourd'hui, il est essentiel d'avoir une bonne compréhension du système de module JavaScript. Les modules peuvent aider à organiser votre code, le rendre plus maintenable et augmenter sa réutilisabilité. Malheureusement, le support du navigateur pour les modules ES n'est pas encore là, donc vous aurez invariablement besoin d'un bundler de module pour les assembler en un seul fichier qui peut être livré au navigateur

FuseBox est un écosystème d'outils de nouvelle génération qui couvre toutes les exigences du cycle de développement. Il permet aux développeurs de regrouper n'importe quel format de fichier, c'est un chargeur de module, un transpiler, un coureur de tâches et bien plus encore.

Dans cet article, nous allons utiliser FuseBox pour vous guider dans les tâches courantes impliquées dans le développement d'un JavaScript application. Ce sont les suivantes:

Une fois que vous avez fini de lire, vous pourrez déposer FuseBox dans votre prochain projet et bénéficier de sa vitesse, de sa simplicité et de sa flexibilité.

Regroupement – un exemple basique

Je suis l'un des principaux contributeurs au projet.

Les projets prennent de plus en plus d'ampleur – c'est un fait. Si nous devions inclure un à un tous les fichiers requis par la page, cela ralentirait considérablement les choses, car le navigateur devrait faire beaucoup de requêtes HTTP bloquantes. Bundling résout ce problème et réduit le nombre de fichiers demandés et FuseBox rend ce processus aussi simple que possible.

Pour commencer le bundling, nous devons enseigner à FuseBox ce que nous voulons. FuseBox ne nécessite pas beaucoup de configuration pour regrouper des projets lourds. En fait, dix lignes de configuration sont généralement suffisantes pour la plupart des cas d'utilisation. Cependant, avant de commencer à entrer dans des exemples du monde réel, créons quelque chose de simple.

Tout d'abord, créez un nouveau dossier. Puis, à partir de votre ligne de commande, naviguez jusqu'à celui-ci et entrez ce qui suit: npm init -y . Cela va initialiser votre projet. Puis tapez npm install fuse-box -D qui va installer FuseBox en tant que dépendance de développement.

Ensuite, créez un dossier appelé src qui sera votre code. Créez également un fichier index.js dans votre dossier src et ajoutez le contenu suivant:

 console.log ('Hello world');

Ensuite, créez un fichier fuse.js à la racine de votre projet. Ce fichier contiendra toute votre configuration de FuseBox.

A ce stade, notre structure de dossiers devrait ressembler à ceci:

 MyProject
├── node_modules
├── src
Index └── index.js
├── f fuse.js
Package── package.json

Ajoutez le code ci-dessous à fuse.js :

 const {FuseBox} = require ("fuse-box");

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js"
});

fuse.bundle ("app")
  .instructions ("> index.js");

fusible.run ();

Brisons ce code section par section.

Tout d'abord, nous avons besoin de FuseBox. Ensuite, nous initialisons une nouvelle instance de FuseBox avec la méthode init . On l'appelle aussi Producteur en termes de FuseBox. C'est ici que nous définissons la configuration globale pour tous les bundles.

L'option homeDir pointe FuseBox vers le répertoire personnel de nos fichiers. C'est parce que FuseBox crée une structure de fichier virtuelle qui imite la structure physique. L'option de sortie indique à FuseBox où notre ensemble de sortie doit résider. Notez le $ name.js : il s'agit d'un espace réservé qui sera remplacé par le nom que vous fournissez à votre bundle.

La commande fuse.bundle ("app") est où nous disons FuseBox sur notre paquet. Nous demandons à FuseBox de créer un paquet avec le nom app.js qui se trouvera dans le dossier dist de votre projet. Le fichier de fin sera project / dist / app.js .

La partie des instructions ('> index.js') est l'endroit où nous disons à FuseBox ce que nous voulons regrouper. Le symbole > est ce que nous appelons une instruction arithmétique : c'est la langue que FuseBox utilise pour apprendre quels fichiers doivent être groupés.

La commande fuse.run () dit à FuseBox de commencer le processus de groupage.

Maintenant, à partir de votre ligne de commande, entrez node fuse.js – et c'est tout, vous avez terminé! FuseBox va maintenant commencer sa magie de bundling et créer le bundle à dist / app.js .

L'exemple complet est disponible ici .

Transpiling TypeScript et ES6

Ce que nous avons fait jusqu'à présent est bien, mais ce n'est pas le nombre de projets JavaScript qui sont développés. Les applications sont aujourd'hui développées en utilisant ES6, qui est la sixième version majeure de la spécification du langage ECMAScript. ES6 est génial: il permet de nouvelles fonctionnalités linguistiques comme les classes les fonctions de flèche et bien plus encore. Le problème, cependant, est que ce n'est pas encore entièrement supporté par toutes les versions du navigateur ou de Node.js. Nous devons donc transposer notre code dans une version prise en charge plus courante de JavaScript, ES5.

Il existe deux outils principaux pour y parvenir: Typescript et Babel. FuseBox prend en charge les deux. En fait, FuseBox est construit avec Typescript, le supportant nativement.

Pour commencer avec FuseBox et Typescript, procédez comme suit:

• créez un nouveau projet
• en utilisant la ligne de commande, naviguez jusqu'à la racine de ce projeter et faire npm init -y
• créer un dossier src
• à l'intérieur du dossier src ajouter index.ts [19659031] créer fuse.js dans la racine du projet
• installer FuseBox et TypeScript comme dépendances: npm installer fuse-box typescript -D .

Dans index.ts ajoutez ce qui suit:

 const name: string = "FuseBox";
console.log (nom);

Vous vous demandez peut-être ce que : chaîne signifie . C'est un exemple de système de type de Typescript, indiquant au compilateur que la variable nom est de type chaîne . Pour en savoir plus sur Typescript, consultez le site officiel .

Ajouter le suivant à fuse.js :

 const {FuseBox} = require ("fusible-box") ;

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js"
});

fuse.bundle ("app")
  .instructions ("> index.ts");

fusible.run ();

Notez que les choses sont toujours les mêmes, la seule différence étant que nous utilisons le format de fichier .ts au lieu de .js dans les instructions ('> index .ts ') . Maintenant que les prérequis sont en place, à partir de votre ligne de commande, entrez node fuse.js et FuseBox commencera à empaqueter.

L'exemple complet est disponible ici .

Note: Lors de l'utilisation de la syntaxe ES6, FuseBox détecte automatiquement le type de module et transpile le code de façon transparente. Pas besoin de Babel. FuseBox rocks

Chargement du module

Jusqu'à présent, nous n'avons fait que de simples exemples console.log . Prenons un peu plus loin et commençons à apprendre sur le chargement des modules. Les modules sont des unités discrètes de code indépendant, réutilisable. En JavaScript, il existe plusieurs façons de créer des modules.

FuseBox Regroupe votre code dans le format de module CommonJS . Malheureusement, cela n'est pas pris en charge dans les navigateurs. Mais ne vous inquiétez pas: FuseBox vous offre une API complète pour faciliter le travail avec les modules du navigateur.

Sur la base de notre exemple de Typescript, créons des modules et commençons à les utiliser. Comme nous utilisons TypeScript, nous utiliserons le système de module ES6.

Dans votre dossier src à côté de index.ts créez bonjour.ts et ajoutez-y:

 export function hello (name: string) {
  renvoie `Hello $ {name}`;
}

Dans index.ts ajoutez ce qui suit:

 import {hello} from "./hello";

const nom: string = `M. Mike`;
console.log (bonjour (nom));

Maintenant, à partir de votre ligne de commande, entrez node fuse.js puis node dist / app.js . Vous devriez voir ce qui suit écrit sur votre console:

 Bonjour M. Mike

Félicitations! Vous venez de créer et de charger votre premier module avec FuseBox, ES6 et Typescript. 🙂

Nous avons appris à charger des modules locaux, mais FuseBox fonctionne aussi avec des paquets Node externes. Donc développons cet exemple et montrons comment nous pouvons inclure Moment.js en tant que module

Depuis la ligne de commande entrez npm install moment -S . Cette commande installe le package Moment.js en tant que dépendance de votre projet. Maintenant ajoutez ce qui suit à votre index .ts :

 import {hello} from "./hello";
importer * comme moment de "moment"

const time = moment (). format ('MMMM Faire YYYY, h: mm: ss a');
const nom: string = `M. Mike`;
console.log (bonjour (nom));
console.log (heure);

Si vous entrez maintenant noeud fuse.js puis noeud dist / index.js vous devriez voir ce qui suit écrit sur votre console (bien que la date soit évidemment différente ):

 Bonjour M. Mike
7 mars 2018, 11:50:48

L'exemple complet est disponible ici .

Travailler avec les plugins

Aucun écosystème d'outils ne peut satisfaire toutes les exigences pour tous les utilisateurs, et FuseBox ne fait pas exception. Bien que FuseBox offre un large éventail de fonctionnalités prêtes à l'emploi, il existe une communauté active de développeurs qui enrichit cet écosystème de nouveaux plugins impressionnants.

Jusqu'à présent, nous travaillions exclusivement avec des fichiers JavaScript et TypeScript. Maintenant, il est temps de creuser plus profondément et commencer à utiliser les plugins FuseBox. Nous allons commencer par utiliser deux plugins importants: CSSPlugin et SassPlugin .

Faisons l'habituel:

• créer un nouveau projet
• en utilisant la ligne de commande, naviguez jusqu'à la racine de ce projet et faites npm init -y
• créez un dossier src
• dans le dossier src ajoutez index. ts
• à l'intérieur src ajouter dossier main.css
• à l'intérieur src ajouter dossier extra.scss [19659031] create fuse.js à la racine du projet
• installez FuseBox, TypeScript et un compilateur Sass en tant que dépendances en entrant les éléments suivants depuis votre ligne de commande: npm install fuse-box sass -D .

Notez le fichier fichier extra.scss : c'est là que nous écrirons notre Sass . Bien sûr, les navigateurs ne supportent pas nativement Sass, c'est pourquoi nous utiliserons le FuseBox SassPlugin . Votre fuse.js devrait ressembler à ceci:

 const {FuseBox, CSSPlugin, SassPlugin} = require ("fuse-box");

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js",
  plugins: [
    [SassPlugin(), CSSPlugin()],
    CSSPlugin ()
  ]
});
fuse.bundle ("app")
  .instructions (`> index.ts`);

fusible.run ();

Notez que nous avons CSSPlugin répété deux fois dans ci-dessus. C'est à cause d'un concept important dans FuseBox appelé plugin chaining . Ce concept est vraiment puissant, car il permet à FuseBox d'alimenter le résultat d'un plugin dans le suivant.

Ensuite, ajoutons du contenu aux fichiers de feuilles de style.

Dans main.css , ajoutez ceci:

 body {
  marge: 0;
  famille de polices: Verdana, Geneva, Tahoma, sans-serif;
  arrière-plan: #ececec;
}

Dans extra.scss ajoutez ceci:

 $ font-stack: Helvetica, sans-serif;
$ primary-color: # 333;

corps {
  police: 100% $ font-stack;
  couleur: $ primary-color;
}

Maintenant, importons ces fichiers de feuille de style pour les traiter et les regrouper. Dans votre index.ts ajoutez ceci:

 import "./main.css";
importer "./extra.scss";

document.body.innerHTML = `

  
 Bienvenue dans FuseBox! 
 `;

Contrairement aux autres solutions disponibles, FuseBox vous permet d'importer des fichiers autres que JavaScript sans aucune solution de contournement . Maintenant, FuseBox lancera le SassPlugin pour compiler le Sass en CSS et regroupera à la fois main.css et extra.scss pour vous. Cependant, comment pouvons-nous prévisualiser le résultat? C'est le bon moment pour introduire un autre plugin intégré appelé WebIndexPlugin .

Voici un autre exemple de la façon dont FuseBox facilite la vie d'un développeur. Ce plugin génère automatiquement un fichier HTML et vous pouvez le passer à tout autre fichier HTML à utiliser comme modèle. Cependant, le point le plus important à propos de ce plugin est qu'il inclut automatiquement les bundles pour vous. Cela signifie que vous n'avez pas besoin de réfléchir à ce que vous devez ajouter manuellement. Nous verrons plus d'avantages de ce comportement une fois que nous parlerons de hachage plus tard

Votre fuse.js devrait ressembler à ceci:

 const {FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin} = require ("boîte à fusibles");

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js",
  plugins: [
    [SassPlugin(), CSSPlugin()],
    CSSPlugin (),
    WebIndexPlugin ({path: "."})
  ]
});

fuse.bundle ("app")
  .instructions ("> index.ts");

fusible.run ();

Depuis votre ligne de commande, exécutez node fuse.js et maintenant FuseBox générera index.html dans le dossier dist . Ouvrez ce fichier et vous verrez votre CSS appliqué à la page.

Maintenant, dans votre main.css essayez de changer l'arrière-plan de la ligne : #ececec; à ] arrière-plan: bleu; . Depuis la ligne de commande, entrez node fuse.js actualisez la page dans votre navigateur et vous verrez que votre page a maintenant un arrière-plan bleu.

Notez que nous devons entrer le noeud fuse.js chaque fois que nous apportons un changement à notre code et que nous voulons voir le résultat. Ce n'est pas une façon sensée de travailler, n'est-ce pas? Pour résoudre ce problème, FuseBox a une méthode de surveillance . La méthode de watch indique à FuseBox de recompiler automatiquement tout changement de fichier.

Ajoutons une surveillance à notre bundle. Maintenant fuse.js devrait ressembler à ceci:

 const {FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin} = require ("boîte à fusibles");

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js",
  plugins: [
    [SassPlugin(), CSSPlugin()],
    CSSPlugin (),
    WebIndexPlugin ({path: "."})
  ]
});

fuse.bundle ("app")
  .regarder()
  .instructions ("> index.ts");

fusible.run ();

Depuis la ligne de commande, entrez node fuse.js puis modifiez n'importe lequel de vos fichiers. Vous verrez FuseBox automatiquement ré-grouper pour vous sans devoir entrer noeud fuse.js manuellement.

L'exemple complet est disponible ici .

Hot Module Reloading ( HMR)

Hot module reloading (HMR) permet à FuseBox de détecter quand les fichiers ont été modifiés et de mettre à jour ces modules en mémoire, ce qui signifie que la vue dans le navigateur est également mise à jour. C'est une fonctionnalité vraiment très puissante! Fini le temps où vous devez basculer entre votre éditeur et le navigateur, en appuyant sur F5 pour voir les changements. Contrairement à d'autres solutions, FuseBox HMR fonctionne avec tous vos fichiers et n'est pas limité aux fichiers JavaScript . En termes simples: changez votre code, sauvegardez, et FuseBox mettra à jour votre projet automatiquement pour vous, montrant l'application mise à jour dans le navigateur.

Alors que nous parlons de FuseBox HMR, c'est le bon moment pour introduire FuseBox intégré serveur de développement . Il s'agit d'une application Express complète, ce qui signifie que vous pouvez créer des routes, ajouter des middlewares, etc …

Sur la base du dernier exemple, mettez à jour votre fichier fuse.js pour ressembler à ceci:

 const {FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin} = require ("fusible-boîte");

const fuse = FuseBox.init ({
  homeDir: "src",
  sortie: "dist / $ name.js",
  plugins: [
    [SassPlugin(), CSSPlugin()],
    CSSPlugin (),
    WebIndexPlugin ({path: "."})
  ]
});

fuse.dev ();

fuse.bundle ("app")
  .instructions ("> index.ts")
  .regarder()
  .hmr ();

fusible.run ();

Notez que nous avons ajouté deux commandes supplémentaires: fuse.dev () et .hmr () . C'est tout ce dont vous avez besoin pour activer HMR avec FuseBox. De votre ligne de commande entrez noeud fuse.js et vous verrez le message suivant dans la console: serveur exécutant http: // localhost: 4444 .

Ceci est le URL FuseBox vous donnera accès à votre projet. Rendez-vous sur http: // localhost: 4444 / et commencez à modifier certains de vos fichiers CSS ou JavaScript. Vous verrez les changements reflétés immédiatement dans le navigateur sans un seul rafraîchissement!

L'exemple complet est disponible ici .

Rencontrez Sparky, le Runner des tâches intégré

Jusqu'à présent, Nous avons traité des fichiers groupés, mais la plupart des projets nécessitent généralement des tâches supplémentaires telles que le nettoyage des dossiers, la copie de fichiers, l'incrémentation de la version de l'application, etc.

Rappelez-vous que FuseBox est le seul outil besoin de vos besoins de développement? Eh bien, nous commençons à voir cette déclaration se réaliser. FuseBox a un runner de tâche intégré appelé Sparky ( vous pouvez en lire plus à ce sujet ici ). Par défaut, il couvre les tâches courantes mentionnées plus haut, mais il peut facilement être étendu en utilisant des plugins pour en couvrir d'autres.

Sur la base du dernier exemple, créons ce qui suit:

• une tâche qui nettoie le ] dist dossier chaque fois que vous démarrez le processus de regroupement
• une tâche qui copie les fichiers image de votre dossier src chaque fois que vous ajoutez, modifiez ou supprimez l'une de ces images. le dernier exemple, votre fuse.js devrait ressembler à ceci:

   const {FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin, Sparky} = require ("fuse-box");
  
  const fuse = FuseBox.init ({
    homeDir: "src",
    sortie: "dist / $ name.js",
    plugins: [
      [SassPlugin(), CSSPlugin()],
      CSSPlugin (),
      WebIndexPlugin ({path: "."})
    ]
  });
  
  fuse.dev ();
  
  fuse.bundle ("app")
    .instructions ("> index.ts")
    .regarder()
    .hmr ();
  
  Sparky.task ("clean", () => {
    retourne Sparky.src ("dist"). clean ("dist");
  });
  
  Sparky.task ("watch: images", () => {
    retourner Sparky.watch ("** / *. + (svg | png | jpg | gif)", {base: "./src"})
      .dest ("./ dist");
  });
  
  Sparky.task ("default", ["clean", "watch:images"]() => {
    fusible.run ();
  });
  

  Regardons ce qu'il y a de nouveau ici. Premièrement, nous avons besoin de Sparky, ensuite nous avons créé trois tâches. La tâche par défaut est une convention que Sparky utilise, et elle sera automatiquement exécutée lorsque vous lancerez le noeud fuse.js . Notez que nous avons ["clean", "watch:images"] dans la définition de tâche par défaut . Ceci est un exemple du flux d'exécution de Sparky. Sparky a deux modes: chute d'eau et parallèle modes. Dans le mode waterfall les tâches seront exécutées séquentiellement, ce qui signifie que la tâche watch: images ci-dessus ne sera pas exécutée tant que la tâche clean ne sera pas terminée.

  Notez également que nous avons déplacé fuse.run à la tâche par défaut . Ceci est important, car nous voulons nous assurer que l'empaquetage commencera après que les autres tâches soient terminées.

  La deuxième tâche clean est vraiment simple: nous utilisons la méthode clean pour supprimer le dossier dist .

  La troisième montre: images tâche est responsable de la copie des images. Sparky.watch est une méthode intégrée de surveillance des fichiers qui sera lancée à chaque changement de dossier. Le "** / *. + (Svg | png | jpg | gif)" est un glob de fichier qui dit à Sparky de regarder tous ces formats de fichier image dans notre dossier src . La méthode .dest indique à Sparky de copier l'un des fichiers modifiés dans le dossier dist .

  Ajouter des images à votre dossier src et exécuter noeud fusible.js . Sparky effacera désormais tous les fichiers du dossier dist et copiera toutes les images du dossier src dans le dossier dist . Maintenant, essayez d'éditer n'importe quelle image dans le dossier src et vous verrez que l'observateur du fichier Sparky va lancer et copier ce fichier dans le dossier dist . L'exemple est disponible ici .

  Unit Testing

  Testing est l'outil le plus puissant que nous connaissions pour améliorer la qualité des logiciels. Les tests réduisent les bogues, fournissent une documentation précise et améliorent la conception.

  FuseBox est livré avec un testeur intégré . Il est construit sur le même moteur que Fusebox utilise pour le bundling, ce qui signifie qu'il bénéficie de tout ce que FuseBox a: vitesse, cache, plugins, etc. Deuxièmement, il utilise par défaut Typescript, ce qui signifie que vous n'avez rien à câbler;

  Faisons l'habituel:

  • créez un nouveau projet
  • naviguez dans votre ligne de commande jusqu'à la racine de ce projet et faites npm init
  • créez un ] src dossier
  • dans le dossier src ajoutez index.ts
  • dans le dossier src ajoutez index.test. ts
  • créer fuse.js dans la racine du projet
  • installez FuseBox, babel-runtime et TypeScript comme dépendances en faisant ce qui suit à partir de votre ligne de commande: npm install fuse-box fuse-test-runner babel-runtime tapuscrit -D .

  Votre fuse.js devrait ressembler à ceci:

   const {FuseBox} = require ("fuse-box ");
  
  const fuse = FuseBox.init ({
    homeDir: "src",
    sortie: "dist / $ name.js"
  });
  
  fuse.dev ();
  
  fuse.bundle ("app")
    .instructions ("> index.ts")
    .regarder()
    .hmr ();
  
  fusible.run ();
  fuse.bundle ("app"). test ("[**/**.test.ts]");
  

  La config est toujours la même. Nous venons d'ajouter une ligne supplémentaire: fuse.bundle ("app"). Test ("[**/**.test.ts]"); . Cette ligne indique à FuseBox d'exécuter tous les fichiers de test qui se terminent par .test.ts .

  Dans index.ts ajoutez ceci:

   export const count = 1;
  
  fonction d'exportation calculate (num) {
    return num + 1;
  }
  

  Dans index.test.ts ajoutez ceci:

   import {should} de "fuse-test-runner";
  import {count, calculate} à partir de "./index";
  
  classe d'exportation BarTest {
    "Ça devrait aller" () {
      devrait (compter) .beOkay ();
    }
  
    "Devrait égaler 2" () {
      devrait (calculer (compter))
        .equal (2);
    }
  
    "Ne devrait pas égaler 2" () {
      devrait (calculer (5))
        .equal (2);
    }
  }
  

  Regardons ce que nous faisons ici:

  • nous avons besoin de la bibliothèque d'assertions intégrée
  • nous avons besoin des fonctions nécessaires à partir de index.ts
  • nous créons une classe à Envelopper nos méthodes de test
  • Nous créons les méthodes de test qui vont tester notre code.

  Prenons le premier test Ça devrait aller . Ici, nous voulons simplement valider que la variable count n'est pas vide ou indéfinie. Pour ce faire, nous utilisons should (count) .beOkay (); . Nous commençons toute assertion avec la méthode should qui accepte les variables, les fonctions, les objets et les expressions. Nous utilisons ensuite l'une des assertions intégrées. Dans l'exemple ci-dessus, nous utilisons beOkay qui affirme que la variable compte n'est pas vide ou indéfinie.

  Dans le deuxième test, Devrait être égal à 2 , nous passons compte à la fonction calculons et affirmons que le résultat correct est renvoyé

  Dans le troisième test, Ne doit pas être égal à 2 nous intentionnellement essayez de forcer le test à échouer en transmettant le numéro 5 ce qui donne la valeur 6 ce qui n'est pas égal à la valeur attendue 2 . node fuse.js et vous verrez dans votre console que les deux premiers tests ont réussi et que le troisième a échoué.

  

  L'exemple complet est disponible ici .

  Environnements de développement et de production

  Nous avons traité des concepts majeurs de FuseBox, mais habituellement vous avez des exigences différentes à la fois pour votre d environnements de développement et de production. Par exemple, vous ne livrerez pas votre code groupé avec HMR activé. Pour vous aider avec cela, nous allons passer en revue une configuration recommandée qui répondra aux exigences de développement et de production.

  Faisons l'habituel:

  • créez un nouveau projet
  • naviguez dans votre ligne de commande jusqu'à la racine de ce projet et faire npm init -y
  • créer un dossier src
  • dans le dossier src ajouter index.ts
  • à l'intérieur du dossier src ajoutez calc.ts
  • à l'intérieur du dossier src ajoutez calc.test.ts [19659031] à l'intérieur src dossier, ajouter main.css
  • à l'intérieur src dossier, ajouter extra.scss
  • créer ] fuse.js à la racine du projet
  • installez FuseBox, Sass, UglifyJS, babel-runtime et TypeScript comme dépendances en lançant les commandes suivantes à partir de votre ligne de commande: npm install fuse-box fuse-tes t-runner babel-runtime tapuscrit node-sass uglify-js -D .

  Ajouter les éléments suivants à fuse.js :

   const {FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin, UglifyJSPlugin , Sparky} = require ("boîte à fusibles");
  
  laissez fuser, app, vendeur, isProduction = false;
  
  Sparky.task ("config", () => {
    fusible = FuseBox.init ({
      homeDir: "src",
      sortie: "dist / $ name.js",
      hash: isProduction,
      sourcesMaps:! isProduction,
      plugins: [
        [SassPlugin(), CSSPlugin()],
        CSSPlugin (),
        WebIndexPlugin ({path: "."}),
        isProduction && UglifyJSPlugin ()
      ]
    });
  
    // le fournisseur devrait venir en premier
    fournisseur = fuse.bundle ("vendeur")
      .instructions ("~ index.ts");
  
    // sort le paquet principal
    app = fuse.bundle ("app")
      .instructions (`!> [index.ts]`);
  
    if (! isProduction) {
      fuse.dev ();
    }
  });
  
  // tâche de développement "fusible de noeud" "
  Sparky.task ("default", ["config"]() => {
    vendor.hmr (). watch ();
    app.watch ();
    return fuse.run ();
  });
  
  // Dist tâche "noeud Fusible dist"
  Sparky.task ("dist", ["set-production", "config"]() => {
    return fuse.run ();
  });
  
  Sparky.task ("set-production", () => {
    isProduction = true;
    retourne Sparky.src ("dist /"). clean ("dist /");
  });
  
  Sparky.task ("test", ["config"]() => {
    return app.test ();
  });
  

  Ce qui précède peut sembler beaucoup à digérer, mais ne vous inquiétez pas: une fois que nous l'aurons décomposé, vous vous rendrez compte à quel point c'est puissant et simple.

  Le concept reste le même, mais ce que nous avons ajouté est une nouvelle variable isProduction . Cela définira une condition définissant si Fusebox doit créer un bundle de développement ou de production pour vous.

  Puis il y a une propriété hash sur l'objet que nous passons à FuseBox.init () qui est mis à la valeur de isProduction . C'est la fonction de hachage de FuseBox qui est importante pour la gestion des versions. Cela nous permet d'invalider le cache du navigateur lors de la diffusion d'une nouvelle version de notre application, ce qui garantit en retour que nos utilisateurs auront la dernière version de notre application. Lorsque le hachage est activé, FuseBox génère un nom de hachage de fichier pour chaque groupe à chaque démarrage du processus de regroupement. Par exemple:

   d72d7ad8-app.js
  b841f28-vendor.js
  

  Quand nous entrons en production, nous avons besoin que notre code soit aussi petit et performant que possible. Nous réalisons cela en minimisant l'ensemble avec le UglifyJSPlugin que nous ajoutons.

  Dans la propriété plugins notez la ligne suivante: isProduction && UglifyJSPlugin () C'est une expression JavaScript qui signifie que si la variable isProduction est évaluée à true appliquez UglifyJSPlugin .

  Ensuite, nous créons un vendeur faisceau. L'idée derrière un bundle fournisseur est de séparer votre code local des paquets et dépendances externes. Cela permet une approche modulaire et un code moins répété dans les bundles. Remarquez dans .instructions ("~ index.ts" ), le symbole ~ est un symbole arithmétique de FuseBox qui indique à FuseBox d'extraire toutes les dépendances externes, en ignorant le fichiers de projet réels. Autrement dit, cela regroupera toutes vos dépendances externes (paquets npm) moins votre code local.

  En continuant, nous créons le paquet principal. Remarquez les symboles !> dans .instructions ("!> [index.ts]") . Encore une fois ce sont des symboles arithmétiques. Le ! ordonne à FuseBox de supprimer l'API loader d'un bundle (parce que nous l'avons déjà inclus dans le bundle du fournisseur). Le symbole > indique à FuseBox d'exécuter automatiquement un fichier en chargement

  Les Tâches

  La dernière chose à expliquer est nos tâches. Notez que nous avons même encapsulé notre config dans une tâche de config . Cela nous permet de l'utiliser dans d'autres tâches sans nous répéter ou polluer notre code.

  Commençons par la tâche par défaut . Notez que nous avons activé HMR à l'intérieur avec vendor.hmr (). Watch () . Nous l'avons fait parce que la tâche par défaut va cibler notre environnement de développement, alors isProduction est false ici

  La tâche set-production est l'endroit où nous initialisez la variable isProduction à true .

  La tâche dist d'autre part, va cibler notre environnement de production. Par conséquent, cela dépend des tâches de production-ensemble et config . Cela signifie que la tâche dist ne sera pas exécutée avant la fin de la tâche de set-production qui ne sera pas exécutée tant que la tâche de config ne sera pas terminée.

  Finally is the test task, which simply executes the tests we've defined in our projects.

  Now let's see all of this in action. From your command line, run node fuse.js. You’ll notice that FuseBox does the following:

  • starts the bundling process
  • starts the dev server
  • starts HMR
  • every time we change our code the HMR and bundling process will kick in again.

  But What About Production?

  Never fear! If we run node fuse.js dist (notice the dist parameter), FuseBox does the following:

  • start the bundling process.

  There’s no HMR or dev server running. This is because we’re in production mode. Open your dist folder and you’ll see that FuseBox generated your bundles with random names. Open any of those bundles and you’ll see that your code looks funny. That’s because FuseBox minified your code using the UglifyJSPlugin. If you compare the size of your bundles between development and production mode, you’ll see the difference!

  Finally, if you want to run your tests, from the command line run node fuse.js test.

  The full example is available here.

  A Lightweight Webpack Alternative

  As we’ve seen, we were able to fully cover all the requirements of a modern development workflow — from development to production — by using just FuseBox. There are a lot more advanced options and concepts you’ll discover as you explore the library, but hopefully this article will help you to set your foot on the right path and enjoy using FuseBox.

  Our community on Gitter is growing, we’re very friendly and supportive! If you like the project, don’t forget to star our GitHub repository and follow us on Twitter. Otherwise, if you have any questions or comments, please don’t hesitate to leave them in the comments below.

  This article was peer reviewed by Dominic Myers. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  
  

  Passionate Developer, Entrepreneur, Musician