将Electron集成到Angular项目时,fs模块失败

Question

我在整合Electron时遇到了一些麻烦.当我按照博客文章中的描述使用它时,一切正常.当我想使用import Electron(electron.remote)在Angular2服务中使用它来让应用程序使用桌面功能(如系统对话框和文件系统访问)时出现问题.

加载应用程序时,我收到以下错误,包含在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

这里有趣的是,另一个内置模块路径在同一段代码中没有问题.当我查看电子应用程序的开发工具时,我可以看到预期的path方法以及两个静态属性(分隔符).但是,当我看到fs对象时,我可以看到它只是一个空的Object,原型与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再装DT〜节点和DT〜电子(在分型/全局/电子/ index.d.ts存在这样一些问题TSC它不识别无极<任何>我不得不手动替换任何人来编译电子主文件).

只要我不想使用电子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.

Answer 1

正如@ccnokes在这个答案中指出的那样：

Webpack 带来了自己的 require，它会破坏 node.js 的 require，因此，当您需要 webpack 无法解析为您的文件或依赖项之一的 Node.js 核心模块时，它会抛出异常。（您可以在堆栈跟踪中看到它包含webpack_require。这是因为 webpack 将所有需求重写为webpack_require，以便它使用自己的内部 node.js 式系统）。Webpack 是为网络/浏览器构建的，因此它不能与开箱即用的节点很好地配合。

我建议使用ngx- Electron，它似乎没有得到维护（上次提交是在一年前），但仍然具有魅力，并且可以让您在 Angular 中使用很多 Electron 功能（就像这个答案的评论中一样）。

您也可以尝试Vjekoslav Ratkajec的解决方法：

在你的index.html中

<script>  const electron = require('electron');  </script>

然后在您的任何Typescript 文件中：

declare const electron: any;

缺点是您不会享受Typescript 支持。

您还可以使用webpack-target-electron-renderer来告诉需要使用 electro 或 webpack 导入，但如果您想从头开始您的项目，我还没有尝试过它或此样板！

希望它会有所帮助