electron，browserify之后，fs.existsSync不是函数 [英] electron, after browserify, fs.existsSync is not a function
本文介绍了electron，browserify之后，fs.existsSync不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我阅读了很多关于 browserify 和 electron 以及 gui 浏览器问题的信息但是browserify还是有问题，说fs.existsSync不是函数"，required没有定义"
* 全文*我用电子创建了简单的 gui，有 package.json 文件、main.js 和 index.html 文件 + 3,4 个 html 文件，我想在其中创建与 require 一起使用的简单加载显示保存窗口"
该功能在 index.html 文件中有效，但在 load.html 文件中无法正常工作，因此我使用命令浏览 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 中)
浏览 main.js >main.bundle3.js然后 load.html 文件大喊 require 没有定义和
<代码>>main.bundle3.js:6945 Uncaught TypeError: fs.existsSync 不是函数在对象.<匿名>(main.bundle3.js:6945)在 Object.require.36.fs (main.bundle3.js:6951)在 s (main.bundle3.js:1)在 main.bundle3.js:1在对象.<匿名>(main.bundle3.js:6794)在 Object.require.35._process (main.bundle3.js:6937)在 s (main.bundle3.js:1)在 e (main.bundle3.js:1)在 main.bundle3.js:1(匿名)@ main.bundle3.js:6945要求.36.fs @ main.bundle3.js:6951s@main.bundle3.js:1(匿名)@ main.bundle3.js:1(匿名)@ main.bundle3.js:6794要求.35._process @ main.bundle3.js:6937s@main.bundle3.js:1e@main.bundle3.js:1(匿名)@ main.bundle3.js:1
package.json
{名称":RDF"，版本":0.1.0"，"main": "main.js",脚本":{测试":摩卡 -u 出口 -R 规格测试/索引"},开发依赖":{电子":^1.6.2"，电子包装器":^8.6.0"，"html-browserify": "0.0.6",jquery":^3.2.1"}}和 load.html 文件
<!DOCTYPE html><html><头><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></头><身体><h3>加载</h3><p>加载数据</p><!--<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('index.html');"/><br><div id="mainContainer"></div>--><div id="tab33"><div style="text-align:center;"><input type="text" placeholder="只选择一个文件" id="actual-file" disabled="disabled"/><input type="button" value="选择一个文件" id="select-file"/></div><br><br><textarea id="content-editor" rows="5"></textarea><br><br><input type="button" id="save-changes" value="保存更改"/><input type="button" id="delete-file" value="删除文件"/></div><小时><div style="text-align:center;"><p>他的文件内容将与编辑器相同.</p><input type="button" value="选择一个文件" id="create-new-file"/></div><脚本>var fs = 要求('fs')var {remote} = require('electron').remote ;var {dialog} = require('electron').remotedocument.getElementById('select-file').addEventListener('click',function(){dialog.showOpenDialog(函数(文件名){如果(文件名 === 未定义){console.log("没有选择文件");}别的{document.getElementById('actual-file').value = fileNames[0];readFile(fileNames[0], fileReadComplete);}});}，错误的);//document.getElementById('save-changes').addEventListener('click',function(){var actualFilePath = document.getElementById("actual-file").value;如果(实际文件路径){saveChanges(actualFilePath,document.getElementById('content-editor').value);}别的{alert("先选择一个文件");}}，错误的);//document.getElementById('delete-file').addEventListener('click',function(){var actualFilePath = document.getElementById("actual-file").value;如果(实际文件路径){删除文件(实际文件路径)；document.getElementById("实际文件").value = "";document.getElementById("content-editor").value = "";}别的{alert("先选择一个文件");}}，错误的);document.getElementById('create-new-file').addEventListener('click',function(){var content = document.getElementById("content-editor").value;dialog.showSaveDialog(函数(文件名){如果(文件名 === 未定义){console.log("你没有保存文件");返回;}fs.writeFile(文件名，内容，功能(错误){如果(错误){alert("创建文件出错"+ err.message)}alert("文件保存成功");});});}，错误的);函数文件读取完成(数据){我的数据 = 数据；//做你想做的}函数读取文件(文件路径，回调){fs.readFile(filepath, 'utf-8', function (err, data) {如果(错误){alert("读取文件出错:" + err.message);返回;}回调(数据)；document.getElementById("content-editor").value = data;});}函数删除文件(文件路径){fs.exists(文件路径，函数(存在){如果(存在){//文件存在删除fs.unlink(文件路径，函数(错误){如果(错误){alert("更新文件出错"+ err.message);控制台日志(错误)；返回;}});} 别的 {alert("此文件不存在，无法删除");}});}函数 saveChanges(文件路径，内容){fs.writeFile(文件路径，内容，功能(错误){如果(错误){alert("更新文件出错"+ err.message);控制台日志(错误)；返回;}alert("文件保存成功");});}</脚本></div><!-- <script data-main="main" src="require.js"></script>--></身体></html>完整的 main.js 文件
//console.log(require('fs'));console.log(require('module').globalPaths);常量 {电子} = 要求('电子');常量 {浏览器窗口} = 要求('电子')常量 {应用程序} = 要求('电子');//@show(应用程序)常量路径 = 要求('路径')//console.log(process.env.PATH);//(D:electron-v1.6.1-win32-x64
esourcesdefault_app.asrmain.js:325:5)//const BrowserWindow = require('browser-window')常量 url = 要求('url')var html = require('html-browserify');var fs = require('电子')//console.log(require('fs').existsSync);var remote = require('electron').remote;//var remote = require('remote');var dialog = require('electron').remote//dialog = require('electron').dialog//对话 =remote.require('对话')//var load_=require('./load_.js')//浏览 htmlvar through = require('through');var htmlclean = 需要('htmlclean');module.exports = 函数(文件，选项){选项 = 选项 ||{};options.htmlclean =typeof options.htmlclean !== '未定义'?options.htmlclean:真；变量缓冲区 = '';if (!/.(tpl|html)/.test(file)) {通过()返回；} 别的 {返回通过(函数(块){返回缓冲区 += chunk.toString();}， 功能() {var jst = buffer.toString();如果(options.htmlclean){//options.htmlclean 是真的if (typeof options.htmlclean === 'object') {//options.htmlclean 是 htmlclean 模块的选项对象jst = htmlclean(jst, options.htmlclean);} 别的 {//否则，使用默认选项清理jst = htmlclean(jst);}}var 编译 = 'module.exports = ';编译 += JSON.stringify(jst);编译 += ';
';this.queue(编译);返回 this.queue(null);});}}//requirejs.config({//默认从js/lib加载任何模块ID//baseUrl: 'js/lib',//除了，如果模块ID以app"开头，//从 js/app 目录加载它.路径//config 是相对于 baseUrl 的，并且//从不包含.js"扩展名，因为//路径配置可以是一个目录.//路径:{// 应用程序: ' '//}//});//启动主应用逻辑.//requirejs(['jquery', 'canvas', 'app/sub'],//函数($，画布，子){//jQuery、canvas和app/sub模块都是//已加载，现在可以在这里使用.//});//const fs = require('fs');//const app = require('electron').app.//const remote = require('electron').remote;//当 JavaScript 对象被垃圾回收时自动关闭.让我们赢函数创建窗口(){//创建浏览器窗口.赢=新浏览器窗口({宽度:1050，身高:814})//并加载应用程序的 index.html.win.loadURL(url.format({路径名:path.join(__dirname, 'index.html'),协议:'文件:'，斜线:真}))//打开开发工具.win.webContents.openDevTools()//当窗口关闭时发出.win.on('关闭', () => {//取消引用窗口对象，通常你会存储窗口//如果您的应用程序支持多窗口，则在数组中，这是时间//什么时候应该删除相应的元素.赢=空})}//这个方法会在 Electron 完成时调用//初始化并准备好创建浏览器窗口.//某些API只有在该事件发生后才能使用.app.on('准备好', createWindow)//当所有窗口都关闭时退出.app.on('window-all-close', () => {//在 macOS 上，应用程序及其菜单栏很常见//在用户使用 Cmd + Q 明确退出之前保持活动状态if (process.platform !== 'darwin') {app.quit()}})app.on('激活', () => {//在 macOS 上，当//停靠图标被单击并且没有其他窗口打开.如果(赢===空){创建窗口()}})//在此文件中，您可以包含应用程序特定主进程的其余部分//代码.您也可以将它们放在单独的文件中并在此处使用它们. 解决方案
这个问题的概念解决方案:在电子"中，
{dialog}=require(electron)"(例如，)在标签中，将不起作用
这就是他们制造电子的方式.可能是为了提高稳定性或只是基于 chrome 的部分问题
在主进程中，我们可以 require(electron)，在 tabs 中，我们需要使用 browserify 的 npm 模块*** 检查例如电子中哪些模块在哪里工作
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"
* The full story* 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
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
var fs = require('electron')
//console.log(require('fs').existsSync);
var remote = require('electron').remote;
// var remote = require('remote');
var dialog = require('electron').remote
into main.bundle3.js, with, (in the cmd)
browserify main.js > main.bundle3.js
yet then the load.html file shouted that require is not define and
> 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
The 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"
}
}
and load.html file
<!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>
the the main.js file in full
//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
esourcesdefault_app.asrmain.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 += ';
';
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.
解决方案
The conceptual solution for this problem:
in "electron",
"{dialog}=require(electron)" (e.g.,)
in tabs, will not work
This is how they built electron. probably to increase stability or just part of the issue that's based on chrome
in the main process, we can require(electron), where in tabs, we are to require npm modules with browserify *** check for example what modules work where in electron
这篇关于electron，browserify之后，fs.existsSync不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
