Webpack

Comment concaténer un fichier JS à ses dépendances ?

Éléments du problème :

Je dispose d'un fichier JS (Main.js).
Ce fichier importe d'autres fichiers JS via le mot-clef require de TypeScript / ES6.
Ces fichiers JS importent eux-mêmes d'autres fichiers et ainsi de suite à N niveaux de profondeur.
Potentiellement, un fichier est importé plusieurs fois, à plusieurs niveaux de profondeur.

Que souhaitons-nous faire ?

Avoir un seul fichier JS en sortie où tous les fichiers sont concaténés (nous appelons cela un bundle).
Que l'ensemble des fichiers JS soit inclus le bon ordre dans ce bundle.
Éviter toute duplication de code dans ce bundle.
Si certains fichiers ne sont jamais utilisés / importés par le fichier Main.js ou par l'une de ses dépendances, alors ne pas les inclure dans le bundle.
- Ce procédé s'appelle du tree-shaking et il permet d'éliminer le code mort.

Comment faire ?

Utiliser Webpack.
Créer un fichier webpack.conf.js à la racine de votre projet et y déposer le code suivant :

module.exports = {
    entry: {
        Car : './src/Main.js'   // Charge ce fichier ainsi que toutes ces dépendances (mot-clef _require_)
    },

    output: {
        path: './target',       // Le répertoire où sera produit le bundle
        filename: 'bundle.js'   // Le nom du fichier bundle à générer
    }
};

Voilà, vous venez de concaténer des classes JS en parcourant leurs dépendances avec Webpack.

ITAMETIS

Université

Webpack

Comment concaténer un fichier JS à ses dépendances ?

Éléments du problème :

Que souhaitons-nous faire ?

Comment faire ?

ITAMETIS

Qui nous sommes

ITAMETIS

Université

Webpack

Comment concaténer un fichier JS à ses dépendances ?

Éléments du problème :

Que souhaitons-nous faire ?

Comment faire ?

Sélection d'articles :

ITAMETIS

Qui nous sommes