2017-03-29 41 views
3

我读了很多关于browserify和电子以及gui浏览器问题 还有一个browserify问题,说“fs.existsSync不是函数”,并且“要求没有定义”电子,在browserify后,fs.existsSync不是一个函数

*完整的故事* 我创建了电子简单的GUI, 有该文件的package.json,在main.js和index.html文件+ 3,4 HTML文件,在那里我想创建简单的“加载节目保存窗口”,需要使用

该功能在index.html文件中工作y等不会在load.html文件正常工作,所以我browserify的main.js与命令

var fs = require('electron') 
 
//console.log(require('fs').existsSync); 
 
var remote = require('electron').remote; 
 
// var remote = require('remote'); 
 
var dialog = require('electron').remote

成main.bundle3.js,具有,(在CMD)

browserify main.js > main.bundle3.js 

又那么load.html文件大喊要求没有定义和

> main.bundle3.js:6945 Uncaught TypeError: fs.existsSync is not a function 
    at Object.<anonymous> (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.<anonymous> (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 

的的package.json

{ 
 
    "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" 
 
    } 
 
}
和load.html文件

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<!--<script src="main.js"></script>--> 
 
    <script src="main.bundle3.js"></script> 
 
    <!-- <script type="text/javascript" src="main.js"></script> --> 
 
     <script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script> 
 
</head> 
 
     <body> 
 
<h3>LOAD</h3> 
 
<p>load the data</p> 
 
<!-- 
 
<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('index.html');"/><br> 
 
<div id="mainContainer"> </div>--> 
 

 
<div id="tab33"> 
 
    <div> 
 
     <div style="text-align:center;"> 
 
      <input type="text" placeholder="just select a file" id="actual-file" disabled="disabled"/> 
 
      <input type="button" value="Choose a file" id="select-file"/> 
 
     </div> 
 
     <br><br> 
 
     <textarea id="content-editor" rows="5"></textarea><br><br> 
 
     <input type="button" id="save-changes" value="Save changes"/> 
 
     <input type="button" id="delete-file" value="Delete file"/> 
 
    </div> 
 
    <hr> <div style="text-align:center;"> 
 
     <p> he file content will be the same as the editor. </p> 
 
     <input type="button" value="Choose a file" id="create-new-file"/> 
 
    </div> 
 
     <script> 
 
     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"); 
 
      }); 
 
     } 
 
    </script> 
 
    </div> 
 

 
<!-- <script data-main="main" src="require.js"></script>--> 
 
</body> 
 
</html>

的的main.js完全

//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',() => { 
 
    // 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',() => { 
 
    // 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',() => { 
 
    // 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.
文件

+0

没有答案 - 但是'browserfy'与桌面应用程序相关吗?电子中的 –

+0

,应用程序基于浏览器; “require(模块)”的问题是人们在其他基于浏览器的应用程序,浏览器应用程序(例如网站等)中讨论的问题 –

回答

1

对于这个问题的解决方案的概念:在 “电子” ,
标签中的“{对话框} =要求(电子)”(例如) ,不起作用

这就是他们如何构建电子。 可能以增加稳定性或仅是基于铬

的主要工序中问题的一部分,我们可以要求(电子),其中在标签中,我们都需要与browserify NPM模块***检查例如 what modules work where in electron

1

好起来的命令

npm install browserify-fs 

然后

browserify -fs main.js >main.bundle.js 

解决了 “fs.existsSnc不是一个函数”,但不是问题。可能只是从问题中删除fs。 (原因是:question about fs and browserify

0

***技术方案是将文件一个接一个地从index.html文件中链接出来,其中每个文件都有js文件,需要使用

***错误“fs.existsSync不是函数”是一般错误。出现在没有直接连接到主文件(index.html和main)的文件中存在require()问题的地方。JS)

***所有其他解决方案失败(多出现在从browserify,的WebPack,web视图,requirejs互联网及其他)

1

该问题与require方法有关。要修复它,你应该使用window.require

1

如果您在需要电子之前改为declare const window: any;那么您可以添加“窗口”。根据您的要求aka const {...} = window.require('electron')...;