Browserify with require('fs')

Question

I was trying to use browserify on a file that uses the fs object. When I browserify it, the call to require('fs') doesn't get transformed and require returns {}.

Is there any workaround for this? I've seen some suggestions on stackoverlow and elsewhere, but none seem to be fully realized.

I actually hoped to create a google web packaged app using browserify for a class I teach.

Thanks in advance.

Answer 1

Which filesystem should the browser use then? The HTML5 filesystem is not really comparable to a traditional filesystem. It doesn't have symlinks, and it is only accessible asynchronously outside Web Workers.

So the answer is: Write an abstraction layer yourself that can rely on the fs module when running in Node.js, and the HTML5 FS API when running in the browser. The differences are too large to have browserify translate for you.

Answer 2

If you want to inline file contents from fs.readFileSync() calls, you can use brfs:

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

then do:

browserify -t brfs main.js > bundle.js

and src will be set to the contents of file.txt at compile time.

Answer 3

If you want to run file system with browserify you can install npm.

npm install browserify-fs 

and you can access fs object on client side.
Thanks

Answer 4

Is it necessary for you to use require (fs) , you could always use html5 file reader api to read files in 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);                    
            } 
        });
    }
}

you will also have to insert a input file in the html side.

Answer 5

For anyone on teh Google's I had much better luck with the stringify transform.

https://github.com/JohnPostlethwait/stringify

The answers here were frustrating (though not unwelcome) I'm importing templates as strings into my components to save on the HTTP requests bought about by templateUrl and keep them out of the Javascript files.

For some reason brfs does not play nicely with babel and has a lot of caveats to get working at all.

I couldn't get browserify-fs to work at all.

However, after finding the stringify transform it was as simple as.

import template from '../template.html'

const definition = { template }

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

Translated for ES5 users:

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

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