Comment charger tous les fichiers dans un répertoire à l'aide de Webpack sans instructions require

J'ai une grande quantité de fichiers javascript divisés en 4 sous-répertoires dans mon application. En grognant, je les attrape tous et les compile dans un seul fichier. Ces fichiers n'ont pas de fonction module.exports.

Je veux utiliser webpack et le diviser en 4 parties. Je ne veux pas entrer manuellement et exiger tous mes fichiers.

Je voudrais créer un plugin qui, lors de la compilation, parcourt les arborescences de répertoires, puis saisit tous les noms et chemins de fichiers .js, puis requiert tous les fichiers des sous-répertoires et les ajoute à la sortie.

Je veux que tous les fichiers de chaque répertoire soient compilés dans un module que je pourrais ensuite exiger de mon fichier de point d'entrée, ou inclure dans les actifs mentionnés par http://webpack.github.io/docs/plugins.html .

Lors de l'ajout d'un nouveau fichier, je veux simplement le déposer dans le bon répertoire et savoir qu'il sera inclus.

Existe-t-il un moyen de faire cela avec webpack ou un plugin que quelqu'un a écrit pour le faire?

Voici ce que j'ai fait pour y parvenir:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

Dans mon fichier d'application, j'ai fini par mettre le require

require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")

avec l'aimable autorisation de cet article: https://github.com/webpack/webpack/issues/118

Il ajoute maintenant tous mes fichiers. J'ai un chargeur pour html et css et il semble fonctionner très bien.

Que diriez-vous d'une carte de tous les fichiers dans un dossier?

// { 
//   './image1.png':  'data:image/png;base64,iVBORw0KGgoAAAANS',
//   './image2.png':  'data:image/png;base64,iVBP7aCASUUASf892',
// }

Faites ceci:

const allFiles = (ctx => {
    let keys = ctx.keys();
    let values = keys.map(ctx);
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context('./path/to/folder', true, /.*/));

Exemple de la façon d'obtenir une carte de toutes les images dans le dossier actuel.

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));

Tous les mérites à @splintor (merci).

Mais ici, c'est ma propre version dérivée.

Avantages:

• Les modules exportés sont regroupés sous un {module_name: exports_obj}objet.
  • module_name est construit à partir de son nom de fichier.
  • ... sans extension et en remplaçant les barres obliques par des traits de soulignement (en cas d'analyse de sous-répertoires).
• Ajout de commentaires pour faciliter la personnalisation.
  • Par exemple, vous voudrez peut-être ne pas inclure de fichiers dans les sous-répertoires si, par exemple, ils sont là pour être requis manuellement pour les modules de niveau racine .

EDIT: Si, comme moi, vous êtes sûr que vos modules ne renverront rien d'autre que (au moins au niveau racine) un objet javascript normal, vous pouvez également les «monter» en répliquant leur structure de répertoire d'origine (voir Code (version profonde ) à la fin).

Code (version originale):

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

Exemple:

Exemple de sortie pour éventuel console.log(allModules);:

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

Arborescence des répertoires:

models
├── main.js
└── views
    └── home.js

Code (version profonde):

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

Exemple:

Résultat de l'exemple précédent utilisant cette version:

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

cela fonctionne pour moi:

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

REMARQUE: cela peut nécessiter des fichiers .js dans des sous-répertoires de ./js/ de manière récursive.