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

【问题标题】：fs module fails when integrating Electron into Angular project将 Electron 集成到 Angular 项目中时 fs 模块失败
【发布时间】：2017-06-06 17:16:52
【问题描述】：

我在集成 Electron 时遇到了一些麻烦。当我按照this blog post 中的描述使用它时，一切正常。当我想使用 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在同一段代码中没有问题。当我查看电子应用程序的开发工具时，我可以看到预期的 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中安装了typings，然后安装了dt~node和dt~electron（在typings/global/ electron/index.d.ts 存在一些问题， tsc 它无法识别 Promise 我必须手动替换为 any 使电子主文件的编译成为可能）。

只要我不想使用电子 API (electron.remote)，一切正常，在角度上有一些小怪癖，与本主题无关。但是一旦我尝试导入电子，我就会收到这个奇怪的错误。

知道如何克服这个问题或在哪里寻找原因吗？为什么一个内置的 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。

【问题讨论】：

我也有同样的问题，你发现了什么吗？
@EdoB 我们刚刚开始了一些大项目，我没有太多时间玩它。但是，我使用了一个适用于不同 angular 2 配置（开发服务器、产品服务器、电子应用程序）的启动器，它可以工作。尚未检查electron.remote API。 github.com/JonnyBGod/angular2-webpack-advance-starter
@EdoB 测试并失败：当我添加 import remote from 'electron' ; 时出现同样的问题 - 显然，电子包中有一些错误导致模块解析器在 fs 上失败。
也有同样的问题。有谁知道问题出在哪里？
` __webpack_require__(...) is not a function` when using babel 6的可能重复

标签： angular electron angular-cli webpack-2

【解决方案1】：

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

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

我建议使用ngx-electron，它似乎没有得到维护（上次提交是一年前），但仍然可以作为一种魅力，让您在 Angular 中使用很多电子功能（如在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！

希望对你有帮助

【讨论】：