将 Electron 集成到 Angular 项目中时 fs 模块失败 [英] fs module fails when integrating Electron into Angular project

问题描述

我在集成 Electron 时遇到了一些麻烦.当我按照这篇博文中的描述使用它时，一切正常.当我想使用 import Electron (electron.remote) 在 Angular2 服务中使用它以让应用程序使用系统对话框和文件系统访问等桌面功能时，问题就开始了.

I have some trouble integrating Electron. When I use it as described in this blog post, everything works. Problems start when I want to use import Electron (electron.remote) to use it in Angular2 service to let the app using the desktop features like system dialogs and file system access.

加载应用程序时出现以下错误，在 webpack 包中包含的 electron/index.js 中:

I get the following error when loading the app, in electron/index.js which is included in webpack bundle:

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 相对应.

The funny thing here is that another built-in module path has no problem in the same piece of code. When I look in electron app's dev tools I can see the expected path methods as well as the two static properties (delimiters). But when I look what is the fs object I can see it is just an empty Object with the prototype corresponding with NodeJS 6.

我在一个非常简单的 Angular 服务文件 service.ts 中导入电子 API:

I import the electron API in an Angular service file service.ts which is very trivial:

import * as electron from 'electron' ;
import {Injectable} from '@angular/core' ;

@Injectable()
export class Electron {
getRemote(): any { return electron.remote ; }

它永远不会被调用，只是在 app.module.ts 中导入.我创建它只是为了查看可能的编译错误.

It is never called, though, only imported in app.module.ts. I created it just to see possible compilation errors.

至于环境，我在devDependencies中安装了typings，然后安装了dt~node和dt~electron(在typings/global/electron/index.d.ts 存在一些问题， tsc 它无法识别 Promise 我必须手动替换为 any 使电子主文件的编译成为可能).

As for the environment, I installed typings in devDependencies and then installed dt~node and dt~electron (in typings/global/electron/index.d.ts there is some problem in that tsc it does not recognize Promise<any> which I had to replace manually by any to make compilation of the electron main file possible).

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

As long as I do not want to use the electron API (electron.remote) everything works fine, with some minor quirks in angular, irrelevant to this topic. But as soon as I try to import electron, I get this strange error.

知道如何克服这个问题或在哪里寻找原因吗?为什么一个内置的 nodejs 模块 path 被导入没有问题，但在同一个文件中，另一个内置模块 fs 的 require() 返回不是 fs 的东西?

Any idea how to overcome this or where to look for the cause? Why one built-in nodejs module, path, is imported without problems but, in the same file, require() of another built-in module, fs, returns something that is not fs?

版本(渲染器进程中的process.versions):

Versions (process.versions in the renderer process):

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.

The NodeJS version where I run the compilation is 6.9.3 x64 Windows.

推荐答案

正如 @ccnokes 在 中指出的那样href="https://stackoverflow.com/a/43971252/4973023">这个答案:

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

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 中使用很多电子功能(如 this answer's comment).

I would suggest using ngx-electron that appear to be somewhat not maintained (last commit was a year ago) but still works as a charm and will let you use a lot of Electron abilities in Angular (like in this answer's comment).

您也可以尝试Vjekoslav Ratkajec:

在您的 index.html

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

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

declare const electron: any;

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

你也可以使用 webpack-target-electron-renderer 来告诉这需要使用电子或 webpack 导入，但我没有尝试过或 这个样板 如果你想从头开始你的项目！

You also could use webpack-target-electron-renderer to tell wich require to import with electron or webpack but I haven't tried it or this boilerplate if you want to start your project from scratch !

希望对你有帮助

这篇关于将 Electron 集成到 Angular 项目中时 fs 模块失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！