问题
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"
}
}<!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\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.回答1:
If you instead declare const window: any; before you require electron then you can add "window." to your require aka const {...} = window.require('electron')...;
回答2:
The issue has something to do with the require method. To fix it, you should use window.require.
回答3:
alright the command
npm install browserify-fs
and then the
browserify -fs main.js >main.bundle.js
solved the "fs.existsSnc not a function", yet not the problem. probably just removing the fs from the problem. (the reason to present this : that reply appeared in question about fs and browserify)
回答4:
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
回答5:
*** the technical solution is to link files one after the others from the index.html file, where in each there are js files that work with require
*** the error "fs.existsSync is not a function" is general error. appearing where there are problems with require() in files that are not connected directly to the main files (index.html and main.js)
*** all the other solutions failed (many appear in the internet from browserify, webpack, webview, requirejs, and others)
回答6:
Browserify is ignoring the 'fs' import and returning a empty object in their place (see here: https://github.com/browserify/browserify-handbook#ignoring-and-excluding).
You have to exclude the node_modules modules from the browserify bundle, like this:
gulp.task('default', () => {
var b = browserify('src/electron.js', {
debug: true,
ignoreMissing: true,
builtins: false,
commondir: false,
detectGlobals: false
});
b.exclude('fs'); // HERE
b.exclude('electron');
b.exclude('electron-updater');
b.exclude('electron-settings');
b.exclude('path');
b.exclude('url');
b.exclude('sqlite3');
b.exclude('express');
b.exclude('net');
b.exclude('body-parser');
b.bundle()
.pipe(source('electron.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./src'));
});
Now your application will get the modules directely from node_modules instead of a empty object.
来源：https://stackoverflow.com/questions/43103587/electron-after-browserify-fs-existssync-is-not-a-function