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

Question

我在将Electron集成到项目中时遇到了一些问题。当我按照这篇博客文章中所述的方法使用它时，一切正常。但是，当我想要在Angular2服务中使用import Electron（electron.remote）来让应用程序使用桌面功能，例如系统对话框和文件系统访问时，问题就开始出现了。

当加载应用程序时，在webpack捆绑包中包含的< strong > 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 在同一段代码中没有问题。当我查看电子应用程序的开发工具时，我可以看到预期的 path 方法以及两个静态属性（分隔符）。但是当我查看 fs 对象时，我发现它只是一个空的 Object，其原型对应于 NodeJS 6。

我在 Angular 服务文件 service.ts 中导入了 electron 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>，我不得不手动替换为any才能使electron主文件的编译成为可能）。

只要我不想使用electron API（electron.remote），一切都正常，angular中有一些小问题与此无关。但是，一旦我尝试导入electron，就会出现奇怪的错误。

有什么办法可以克服这个问题或者在哪里寻找原因？为什么一个内置的nodejs模块path可以无问题导入，但是在同一个文件中，另一个内置模块fs的require()返回了不是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。

- Jindrich Vavruska

---

我也遇到了同样的问题，你解决了吗？ - EdoB

@EdoB 我们刚开始一个大项目，我没有太多时间去玩它。不过，我使用了一个适用于不同angular 2配置（开发服务器、生产服务器、电子应用程序）的启动器，并且它可以工作。还没有检查electron.remote API。https://github.com/JonnyBGod/angular2-webpack-advance-starter - Jindrich Vavruska

@EdoB 进行了测试并失败了：当我添加 import remote from 'electron'; 时出现了相同的问题 - 显然，electron 包中存在一些错误导致模块解析器在 fs 上失败。 - Jindrich Vavruska

也遇到了同样的问题。有人找出了问题是什么吗？ - Karel-Jan

当使用babel 6时，可能会出现[` __webpack_require__(...) is not a function`]的重复问题。请参考此链接：https://dev59.com/yOk6XIcBkEYKwwoYEPzw - Matthias Sommer

Answer 1

正如@ccnokes在this answer中指出的：

Webpack带有自己的require，它会覆盖node.js的require，因此当您需要一个webpack无法解析为您的文件或依赖项之一的node.js核心模块时，它会抛出异常。（您可以在堆栈跟踪中看到它包括webpack_require。这是因为webpack将所有requires重写为webpack_require，以便使用其自己的内部类似于node.js的系统）。Webpack是为Web /浏览器构建的，因此默认情况下与node不兼容。

我建议使用ngx-electron，虽然它似乎已经没有维护（最后一次提交是一年前），但仍然像魅力一样工作，并且让您在Angular中使用许多Electron功能（就像在this answer's comment中一样）。

你也可以尝试这个解决方法，由Vjekoslav Ratkajec提供：

在你的index.html中

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

然后在你的任何一个Typescript文件中：

declare const electron: any;

缺点是你将无法享受Typescript支持。

你也可以使用webpack-target-electron-renderer 来告诉 electron 或 webpack 要导入哪个 require，但我还没有尝试过，或者如果你想从头开始启动项目，可以使用this boilerplate！

希望能有所帮助。

- PaulCo