2017-03-29 39 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')...;