加载应用程序时,我收到以下错误,包含在webpack包中的electron / index.js中：
Uncaught TypeError: fs.existsSync is not a function (index.js:6)
该文件看起来很简单：
var fs = require('fs')
var path = require('path')
var pathFile = path.join(__dirname,'path.txt')
if (fs.existsSync(pathFile)) {
module.exports = path.join(__dirname,fs.readFileSync(pathFile,'utf-8'))
} else {
throw new Error('Electron Failed to install correctly,please delete node_modules/' + path.basename(__dirname) + ' and try installing again')
}
//////////////////
// WEBPACK FOOTER
// ./~/electron/index.js
// module id = 609
// module chunks = 2
这里有趣的是,另一个内置模块路径在同一段代码中没有问题.当我查看电子应用程序的开发工具时,我可以看到预期的路径方法以及两个静态属性(分隔符).但当我看到fs对象是什么时,我可以看到它只是一个空对象,原型与NodeJS 6对应.
我在Angular服务文件service.ts中导入电子API,这非常简单：
import * as electron from 'electron' ;
import {Injectable} from '@angular/core' ;
@Injectable()
export class Electron {
getRemote(): any { return electron.remote ; }
但它永远不会被调用,只能在app.module.ts中导入.我创建它只是为了查看可能的编译错误.
至于环境,我在devDependencies中安装了typings然后安装了dt~node和dt~electron(在typings / global / electron / index.d.ts中有一些问题,因为tsc它不能识别Promise< any>哪个我不得不手动替换任何人来编译电子主文件).
只要我不想使用电子API(electron.remote),一切都运行正常,有一些小角度的怪癖,与这个话题无关.但是一旦我尝试导入电子,我就会发现这个奇怪的错误.
知道如何克服这个或在哪里寻找原因？为什么一个内置的nodejs模块,路径,导入没有问题但是,在同一个文件中,另一个内置模块的require()fs,返回的东西不是fs？
版本(渲染器进程中的process.versions)：
ares:"1.10.1-DEV" atom-shell:"1.4.14" chrome:"53.0.2785.143" electron:"1.4.14" http_parser:"2.7.0" modules:"50" node:"6.5.0" openssl:"1.0.2h" uv:"1.9.1" v8:"5.3.332.47" zlib:"1.2.8"
我运行编译的NodeJS版本是6.9.3 x64 Windows.
解决方法
Webpack brings its own require which clobbers node.js’ require,so when you require a node.js core module that webpack can’t resolve to one of your files or dependencies,it throws. (You can see in your stack trace that it includes webpack_require. That’s because webpack rewrites all requires to webpack_require so that it uses it’s own internal node.js-esque system). Webpack is built for the web/browsers so it doesn’t play well with node out of the Box.
我建议使用看起来有点没有维护的ngx-electron(最后一次提交是一年前),但仍然可以作为魅力,让你在Angular中使用很多Electron技能(如this answer’s comment).
您也可以在Vjekoslav Ratkajec之前尝试this workaround：
在你的index.html中
<script> const electron = require('electron'); </script>
然后在任何Typescript文件中：
declare const electron: any;
缺点是你不会喜欢Typescript support.
您也可以使用webpack-target-electron-renderer来告诉需要使用电子或webpack导入,但是如果您想从头开始项目,我还没有尝试过或this boilerplate！
希望它会有所帮助
