Question

我在整合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方法以及两个静态属性（分隔符）。但是，当我查看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~electronic （在typings / global /中）电子/ index.d.ts有一些问题， tsc 它不识别 Promise＆lt; any＆gt; 我必须由任何可以编辑电子主文件。）

只要我不想使用电子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在this answer中指出的那样：

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

我建议使用ngx-electron似乎有点不能维护（最后一次提交是一年前），但仍然可以作为魅力使用，并且可以让你在Angular中使用很多电子技能（比如{{ 3}}）。

您还可以this answer's comment尝试this workaround：

在 index.html

中

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

然后在任何打字稿文件：

中

declare const electron: any;

缺点是你不会喜欢Vjekoslav Ratkajec。

您还可以使用Typescript support告诉要求使用电子或网络包导入，但我还没有尝试过，或者webpack-target-electron-renderer如果您想从头开始创建项目！

希望它会有所帮助

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

1 个答案: