html5 - started - Browserify con require(''fs'')

webpack getting started

Question

Estaba intentando usar browserify en un archivo que usa el objeto fs. Cuando lo exploro, la llamada a require(''fs'') no se transforma y require devoluciones {} .

¿Hay alguna solución para esto? He visto algunas sugerencias en stackoverlow y en otros lugares, pero ninguna parece estar plenamente realizada.

De hecho, esperaba crear una aplicación web empaquetada de google usando browserify para una clase que imparto.

Gracias por adelantado.

Answer 1

¿Qué sistema de archivos debería usar el navegador entonces? El sistema de archivos HTML5 no es realmente comparable a un sistema de archivos tradicional. No tiene enlaces simbólicos, y solo se puede acceder de forma asíncrona fuera de los Trabajadores Web.

Entonces, la respuesta es: escriba una capa de abstracción que pueda confiar en el módulo fs cuando se ejecuta en Node.js y en la API de HTML5 FS cuando se ejecuta en el navegador. Las diferencias son demasiado grandes para que browserify traduzca por ti.

Answer 2

Para cualquier persona en el Google, tuve mucha mejor suerte con la transformación de la cadena.

https://github.com/JohnPostlethwait/stringify

Las respuestas aquí fueron frustrantes (aunque no desagradables). Importe plantillas como cadenas en mis componentes para guardar las solicitudes HTTP compradas por templateUrl y mantenerlas fuera de los archivos de Javascript.

Por alguna razón, brfs no juega bien con babel y tiene muchas advertencias para ponerse a trabajar.

No pude conseguir que browserify-fs funcionara.

Sin embargo, después de encontrar la transformada de stringify era tan simple como.

import template from ''../template.html''

const definition = { template }

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

Traducido para los usuarios de ES5:

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

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

Answer 3

Si desea fs.readFileSync() contenido de los fs.readFileSync() llamadas fs.readFileSync() , puede usar brfs :

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

entonces hazlo:

browserify -t brfs main.js > bundle.js

y src se establecerá en el contenido de file.txt en el momento de la compilación.

Answer 4

Si desea ejecutar el sistema de archivos con browserify puede instalar npm.

npm install browserify-fs 

y puede acceder al objeto fs en el lado del cliente.
Gracias

Answer 5

Si es necesario usar require (fs), siempre se puede usar la api del lector de archivos html5 para leer archivos 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);                    
            } 
        });
    }
}

También tendrá que insertar un archivo de entrada en el lado html.