在browserify之后,fs.existsSync不是函数

时间:2017-03-29 20:31:46

标签: javascript html5 browserify electron require

我读了很多关于browserify和电子以及gui浏览器的问题 但是浏览器仍然存在问题,说“fs.existsSync不是函数”,“必需未定义”

*全文* 我用电子创造了简单的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,with,(在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.

6 个答案:

答案 0 :(得分:3)

如果您在需要电子之前代替declare const window: any;,那么您可以添加&#34;窗口。&#34;到你的要求又名const {...} = window.require('electron')...;

答案 1 :(得分:2)

该问题与require方法有关。要解决此问题,您应该使用window.require

答案 2 :(得分:1)

改变命令

npm install browserify-fs 

然后

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

解决了&#34; fs.existsSnc不是函数&#34;,但不是问题。可能只是从问题中删除了fs。 (提出此问题的原因:该回复出现在question about fs and browserify

答案 3 :(得分:1)

此问题的概念解决方案:  在“电子”中,
“{dialog} = require(electron)”(例如) 在标签中,将无法正常工作

这是他们建造电子的方式。 可能是为了增加稳定性或仅仅是基于chrome的问题的一部分

在主要过程中,我们可以要求(电子),在标签中,我们要求使用带浏览器的npm模块 ***检查例如 what modules work where in electron

答案 4 :(得分:0)

***技术解决方案是从index.html文件中逐个链接文件,其中每个文件都有与require一起使用的js文件

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

***所有其他解决方案都失败了(很多都出现在浏览器中,来自browserify,webpack,webview,requirejs等)

答案 5 :(得分:0)

Browserify忽略了'fs'导入并在其位置返回一个空对象(请参阅此处:https://github.com/browserify/browserify-handbook#ignoring-and-excluding)。

您必须从browserify包中排除 node_modules模块,如下所示:

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'));
});

现在,您的应用程序将直接从node_modules获取模块而不是空对象。