1
votes

Lire les fichiers du dossier avant de commencer

Je souhaite obtenir un tableau de noms de fichiers à partir du dossier public / logos de mon projet. J'utilise le modèle create-react-app et comme vous le devinez, je ne peux pas utiliser const fs = require ('fs') dans le navigateur après le démarrage du projet.

Alors, y a-t-il un moyen de remplir un tableau juste après la commande npm start et obtenir le tableau des noms de fichiers du dossier ou suis-je hors contexte?

const fs = require('fs')
const path = require('path')
const appRoot = require('app-root-path').path

const getNames = () => {
    fs.readdir(path.join(appRoot, "public", "logos"), (err, files) => {
        return files
    })
}


3 commentaires

vous ne pouvez pas lire les fichiers à partir du navigateur. vous devez utiliser un serveur pour servir ces fichiers.


@ViranMalaka vous voulez dire, dois-je créer une api de nœud et démarrer le projet via ceci?


vous devez avoir un serveur à lire fichier utilisé navigateur express cont pouvoir le faire


3 Réponses :


0
votes

Oui. C'est hors contexte. Impossible dans une application JS basée sur un navigateur. Vous ne pouvez pas accéder au système de fichiers en utilisant Javascript dans le navigateur.

Vous pouvez utiliser un NodeJS (ou tout autre langage pour le même) pour créer une API REST comme vous l'avez mentionné qui renverra la liste des fichiers et pourra ensuite la consommer (API comme fetch ou package - axios) dans le frontend. C'est la manière préférée de faire.


0 commentaires

0
votes

Si vous avez besoin de lire les fichiers du système de fichiers, vous devez démarrer le serveur, comme express, puis lire ces fichiers sur le serveur à la demande du frontend ou par le lien que vous avez collé dans le champ d'adresse de votre navigateur.


0 commentaires

1
votes

Bien que le Sathishkumar soit correct, ce n'est pas le seul moyen: avoir un serveur d'application juste pour lire des images statiques peut être trop dans de nombreuses situations.

Ce que vous pouvez faire est de gérer cela en modifiant la configuration du pack Web (cela nécessite que vous éjecter d'abord alors soyez vraiment prudent ).

Depuis Webpack, vous disposez de toutes les fonctionnalités de Nodejs, mais vous devez rendre ces modifications statiques pour l'application Web.

Une idée:

  • copiez manuellement avec html-copy-plugin chaque image dans le < code> dist dossier
  • lire chaque fichier image de ce dossier à partir du nœud et générer une liste de noms d'image
  • mettez la liste des images en tant que variable globale dans votre bundle en utilisant webpack DefinePlugin

Vous pourrez désormais lire les noms des images à partir de ce nouveau global.

Remarque : il ne s'agira pas d'une lecture dynamique des ressources d'un dossier. Si vous ajoutez / supprimez des images, vous serez obligé de répéter le processus de construction de l'application.


0 commentaires