Running in client-side browser via browserify

[gil--]

I'm having trouble getting this to work in the browser. Works fine when run via the cli but can't get this to work in the browser for the life of me. I'm using browserify to compile the JS via gulpJS.

gulp.task('scripts', function() {
  return gulp.src('./js/src/index.js')
      .pipe(browserify({
          insertGlobals : true
        }))
      .pipe(uglify())
      .pipe(gulp.dest('./js/dist/'));
});

The error I get is Uncaught TypeError: fs.readFile is not a function which I tried to solve with https://github.com/mafintosh/browserify-fs to no avail. Any ideas on how I might get this working?

[gil--]

Minor update, manually patched aiml-high.js using browserify-fs but I'm hoping there is a better way...

//fs = require('fs');
fs = require('browserify-fs');
require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"browserify-fs":[function(require,module,exports){

},{}]},{},[]);

By running browserify -r fs:browserify-fs as specified in https://github.com/mafintosh/browserify-fs#usage

New Error

The new error is now I'm having trouble with the JS finding the aiml file:

interpreter.loadFiles(['./test.aiml.xml']);

This is inside index.js which is /js/src/index.js

Where does the file need to be residing? I tried both root of the application and inside /js/src and neither loaded the file with the following browser warning:

Error: ENOENT, no such file or directory '/test.aiml.xml'

Loading from string via the interpreter.loadFromString(aimlString); method works fine but not really scalable or realistic imo.

[gil--]

Ok too follow up and close the loop for others that may have a similar issue. I ended up resorting to using stringify so that browserify would allow me to import the aiml.xml files as strings.

var aimlString = require('../test.aiml.xml');
 interpreter.loadFromString(aimlString);

with my gulpfilejs looking like:

var browserify    = require('browserify');
var uglify        = require('gulp-uglify');
var source        = require('vinyl-source-stream');
var buffer        = require('vinyl-buffer');
var stringify     = require('stringify');
 gulp.task('scripts', function() {
  return browserify({ 'entries': ['./js/index.js'] })
    .transform(stringify, {
        appliesTo: { includeExtensions: ['.xml'] },
        minify: true
    })
    .bundle()
    .pipe(source('./js/index.js')) // gives streaming vinyl file object
    .pipe(gulp.dest('./dist'));
});