web-dev-qa-db-fra.com

Comment charger tous les fichiers d'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 prends tous et les compile dans un seul fichier. Ces fichiers n'ont pas de fonction module.exports.

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

Je souhaite créer un plug-in qui, lors de la compilation, parcourt les arborescences de répertoires, puis saisit tous les noms de fichiers .js et leurs chemins, requiert ensuite 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 demander à mon fichier de point d’entrée ou que je l’inclus dans les actifs que http://webpack.github.io/docs/plugins.html mentions.

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

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

javascriptbuildwebpack
83
ChickenFur

Voici ce que j'ai fait pour y parvenir:

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

Dans mon fichier d'application, j'ai fini par mettre l'exigence 

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

courtoisie de ce post: https://github.com/webpack/webpack/issues/118

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

38
ChickenFur

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

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

Faire 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, /.*/));
3
Steven de Salas

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 les sous-répertoires de ./js/ récursivement.

0
jack long

Exemple montrant comment obtenir une carte de toutes les images du 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));
0
Alex K