title: electron, after browserify, fs.existsSync is not a function
body: <p>i read a lot about browserify and electron and the gui browser issue
  yet there is still a problem with  browserify, saying "fs.existsSync is not a function", and "required is not defined"</p>
  
  <p><strong>* The full story*</strong>
  i created simple gui with electron   , 
  there are the package.json file, the main.js and the index.html file + 3,4 html files, where there i want to create simple "load show save window" that work with require</p>
  
  <p>That feature worked in the index.html file yet doesn't work properly in the load.html file, so i browserify the main.js with the commands  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var  fs = require('electron')
  //console.log(require('fs').existsSync);
  var remote = require('electron').remote;
  //  var remote = require('remote');
  var dialog = require('electron').remote </code></pre>
  </div>
  </div>
   </p>
  
  <p>into main.bundle3.js, with, (in the cmd)</p>
  
  <pre><code>browserify main.js &gt; main.bundle3.js 
  </code></pre>
  
  <p>yet then the load.html file shouted that require is not define and    </p>
  
  <pre><code>&gt; main.bundle3.js:6945 Uncaught TypeError: fs.existsSync is not a function
      at Object.&lt;anonymous&gt; (main.bundle3.js:6945)
      at Object.require.36.fs (main.bundle3.js:6951)
      at s (main.bundle3.js:1)
      at main.bundle3.js:1
      at Object.&lt;anonymous&gt; (main.bundle3.js:6794)
      at Object.require.35._process (main.bundle3.js:6937)
      at s (main.bundle3.js:1)
      at e (main.bundle3.js:1)
      at main.bundle3.js:1
  (anonymous) @   main.bundle3.js:6945
  require.36.fs   @   main.bundle3.js:6951
  s   @   main.bundle3.js:1
  (anonymous) @   main.bundle3.js:1
  (anonymous) @   main.bundle3.js:6794
  require.35._process @   main.bundle3.js:6937
  s   @   main.bundle3.js:1
  e   @   main.bundle3.js:1
  (anonymous) @   main.bundle3.js:1  
  </code></pre>
  
  <p>The package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "RDF",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "test": "mocha -u exports -R spec test/index"
    },
    "devDependencies": {
      "electron": "^1.6.2",
      "electron-packager": "^8.6.0",
      "html-browserify": "0.0.6",
      "jquery": "^3.2.1"
    }
  }</code></pre>
  </div>
  </div>
  
   and load.html file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src="main.js"&gt;&lt;/script&gt;--&gt;
      &lt;script src="main.bundle3.js"&gt;&lt;/script&gt;
    &lt;!--    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt; --&gt;
          &lt;script type="text/javascript" src="./lib/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
           &lt;body&gt;
  &lt;h3&gt;LOAD&lt;/h3&gt;
  &lt;p&gt;load the data&lt;/p&gt;
  &lt;!--
  &lt;input type="button" value="Details" onclick="javascript:$('#mainContainer').load('index.html');"/&gt;&lt;br&gt;
  &lt;div id="mainContainer"&gt;  &lt;/div&gt;--&gt;
  
  &lt;div id="tab33"&gt;
    &lt;div&gt;
          &lt;div style="text-align:center;"&gt;
              &lt;input type="text" placeholder="just select a file" id="actual-file" disabled="disabled"/&gt;
              &lt;input type="button" value="Choose a file" id="select-file"/&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;textarea id="content-editor" rows="5"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
          &lt;input type="button" id="save-changes" value="Save changes"/&gt;
          &lt;input type="button" id="delete-file" value="Delete file"/&gt;
      &lt;/div&gt;
      &lt;hr&gt;  &lt;div style="text-align:center;"&gt;
          &lt;p&gt;  he file content will be the same as the editor.  &lt;/p&gt;
          &lt;input type="button" value="Choose a file" id="create-new-file"/&gt;
      &lt;/div&gt;
        &lt;script&gt;
        var  fs = require('fs')
        var {remote} = require('electron').remote  ;
        var {dialog} = require('electron').remote
  
           document.getElementById('select-file').addEventListener('click',function(){
               dialog.showOpenDialog(function (fileNames) {
                   if(fileNames === undefined){
                       console.log("No file selected");
                   }else{
                       document.getElementById('actual-file').value = fileNames[0];
                       readFile(fileNames[0], fileReadComplete);
                   }
               });
           },false);
    //
             document.getElementById('save-changes').addEventListener('click',function(){
               var actualFilePath = document.getElementById("actual-file").value;
  
               if(actualFilePath){
                   saveChanges(actualFilePath,document.getElementById('content-editor').value);
               }else{
                   alert("just select a file first");
               }
           },false);
    //
           document.getElementById('delete-file').addEventListener('click',function(){
               var actualFilePath = document.getElementById("actual-file").value;
  
               if(actualFilePath){
                   deleteFile(actualFilePath);
                   document.getElementById("actual-file").value = "";
                   document.getElementById("content-editor").value = "";
               }else{
                   alert("just select a file first");
               }
           },false);
  
           document.getElementById('create-new-file').addEventListener('click',function(){
               var content = document.getElementById("content-editor").value;
  
               dialog.showSaveDialog(function (fileName) {
                   if (fileName === undefined){
                       console.log("You didn't save the file");
                       return;
                   }
  
                   fs.writeFile(fileName, content, function (err) {
                       if(err){
                           alert("An error ocurred creating the file "+ err.message)
                       }
  
                       alert("The file has been succesfully saved");
                   });
               });
           },false);
              function fileReadComplete(data) {
               myData = data;
               // Do whatever you want
           }
           function readFile(filepath, callback) {
         fs.readFile(filepath, 'utf-8', function (err, data) {
             if(err){
                 alert("An error ocurred reading the file :" + err.message);
                 return;
             }
             callback(data);
             document.getElementById("content-editor").value = data;
         });
     }
  
           function deleteFile(filepath){
               fs.exists(filepath, function(exists) {
                   if(exists) {
                       // File exists deletings
                       fs.unlink(filepath,function(err){
                           if(err){
                               alert("An error ocurred updating the file"+ err.message);
                               console.log(err);
                               return;
                           }
                       });
                   } else {
                       alert("This file doesn't exist, cannot delete");
                   }
               });
           }
  
           function saveChanges(filepath,content){
               fs.writeFile(filepath, content, function (err) {
                   if(err){
                       alert("An error ocurred updating the file"+ err.message);
                       console.log(err);
                       return;
                   }
  
                   alert("The file has been succesfully saved");
               });
           }
       &lt;/script&gt;
    &lt;/div&gt;
  
  &lt;!--   &lt;script data-main="main" src="require.js"&gt;&lt;/script&gt;--&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the the main.js file in full</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//console.log(require('fs'));
  console.log(require('module').globalPaths);
  const {
    electron
  } = require('electron');
  const {
    BrowserWindow
  } = require('electron')
  const {
    app
  } = require('electron');
  //  @show(app)
  const path = require('path')
  //console.log( process.env.PATH);
  // (D:\electron-v1.6.1-win32-x64\resources\default_app.asr\main.js:325:5)
   //const BrowserWindow = require('browser-window')
  const url = require('url')
  var html = require('html-browserify');
  var fs = require('electron')
  //console.log(require('fs').existsSync);
  var remote = require('electron').remote;
  //  var remote = require('remote');
  var dialog = require('electron').remote
  //dialog = require('electron').dialog
  //dialog =remote.require('dialog')
  
  //var load_=require('./load_.js')
  // broserify html
  var through = require('through');
  var htmlclean = require('htmlclean');
  
  module.exports = function(file, options) {
  
    options = options || {};  
    options.htmlclean =
     typeof options.htmlclean !== 'undefined' 
        ?      options.htmlclean : true;
  
    var buffer = '';
  
    if (!/\.(tpl|html)/.test(file)) {
  
      return through();
  
    } else {
  
      return through(function(chunk) {
  
        return buffer += chunk.toString();
  
      }, function() {
  
        var jst = buffer.toString();
  
        if (options.htmlclean) {
          //options.htmlclean is truthy
  
          if (typeof options.htmlclean === 'object') {
            //options.htmlclean is an options object for the htmlclean module
            jst = htmlclean(jst, options.htmlclean);
          } else {
            //otherwise, clean using default options
            jst = htmlclean(jst);
          }
        }
  
        var compiled = 'module.exports = ';
        compiled += JSON.stringify(jst);
        compiled += ';\n';
  
        this.queue(compiled);
        return this.queue(null);
  
      });
  
    }
  
  }
  //requirejs.config({
  //By default load any module IDs from js/lib
  //  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  //paths: {
  //  app: '  '
  //}
  //});
  
  // Start the main app logic.
  //requirejs(['jquery', 'canvas', 'app/sub'],
  //function   ($,        canvas,   sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
  //});
  //const fs = require('fs');
  //const app = require('electron').app.
  //const remote = require('electron').remote;
  
     
  // be closed automatically when the JavaScript object is garbage collected.
  let win
  
  function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({
      width: 1050,
      height: 814
    })
  
    // and load the index.html of the app.
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  
    // Open the DevTools.
    win.webContents.openDevTools()
  
    // Emitted when the window is closed.
    win.on('closed', () =&gt; {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }
  
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow)
  
  // Quit when all windows are closed.
  app.on('window-all-closed', () =&gt; {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () =&gt; {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow()
    }
  })
  
  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.</code></pre>
  </div>
  </div>
  </p>