web-dev-qa-db-fra.com

Browserify avec require ('fs')

J'essayais d'utiliser browserify sur un fichier qui utilise l'objet fs. Lorsque je navigue dans la liste, l'appel à require('fs') ne se transforme pas et require renvoie {}. 

Y at-il une solution de contournement pour cela? J'ai vu des suggestions sur stackoverlow et ailleurs, mais aucune ne semble être pleinement réalisée.

J'espérais en fait créer une application Web google en utilisant browserify pour un cours que j'enseignerais.

Merci d'avance.

html5node.jsrequirehtml5-filesystembrowserify
24
Fred Finkle

Quel système de fichiers le navigateur doit-il utiliser alors? Le système de fichiers HTML5 n'est pas vraiment comparable à un système de fichiers traditionnel. Il n'a pas de liens symboliques et n'est accessible que de manière asynchrone en dehors de Web Workers.

La réponse est donc: écrivez vous-même une couche d’abstraction pouvant compter sur le module fs lorsqu’elle est exécutée dans Node.js et l’API HTML5 FS lorsqu’elle est exécutée dans le navigateur. Les différences sont trop grandes pour que browserify traduise pour vous.

8
Janus Troelsen

Si vous souhaitez insérer le contenu d'un fichier à partir d'appels fs.readFileSync(), vous pouvez utiliser brfs :

var fs = require('fs');
var src = fs.readFileSync(__dirname + '/file.txt');

alors fais:

browserify -t brfs main.js > bundle.js

et src sera défini sur le contenu de file.txt au moment de la compilation.

43
substack

Si vous souhaitez exécuter le système de fichiers avec browserify, vous pouvez installer npm.

npm install browserify-fs

et vous pouvez accéder à l'objet fs côté client.
Merci

15
Anish Agarwal

Pour tous les utilisateurs de Google, j'ai eu beaucoup plus de chance avec la transformation stringify.

https://github.com/JohnPostlethwait/stringify

Les réponses ici ont été frustrantes (bien que non négligeables). J'importe des modèles sous forme de chaînes dans mes composants pour enregistrer les requêtes HTTP achetées par templateUrl et les conserver en dehors des fichiers Javascript.

Pour une raison quelconque, brfs ne joue pas bien avec babel et a de nombreuses mises en garde à prendre pour travailler.

Je ne pouvais pas obtenir browserify-fs du tout.

Cependant, après avoir trouvé la transformation stringify, c'était aussi simple que.

import template from '../template.html'

const definition = { template }

component.directive('myDirective', () => definition)

Traduit pour les utilisateurs ES5:

var template = require('../template.html')

component.directive('myDirective', function() {
    return {
        template: template
    }
})
0
Richard Vanbergen

Est-il nécessaire que vous utilisiez require (fs), vous pouvez toujours utiliser l'API de lecteur de fichiers html5 pour lire les fichiers en JavaScript.

window.onload = function() {
    var fileInput1 = document.getElementById('fileInput');
    if (fileInput1){
        fileInput1.addEventListener('change', function(e) {
            var file = fileInput1.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log(reader.result);
                  }    
                reader.readAsText(file);                    
            } 
        });
    }
}

vous devrez également insérer un fichier d'entrée dans le côté html.

0
Akash