加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 18:05:50 所属栏目:安全 来源:网络整理
导读:我在整合Electron时遇到了一些麻烦.当我按照 this blog post中的描述使用它时,一切正常.当我想使用import Electron(electron.remote)在Angular2服务中使用它来让应用程序使用桌面功能(如系统对话框和文件系统访问)时出现问题. 加载应用程序时,我收到以下错误
我在整合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

这里有趣的是,另一个内置模块路径在同一段代码中没有问题.当我查看电子应用程序的开发工具时,我可以看到预期的路径方法以及两个静态属性(分隔符).但当我看到fs对象是什么时,我可以看到它只是一个空对象,原型与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模块,路径,导入没有问题但是,在同一个文件中,另一个内置模块的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.

解决方法

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

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中使用很多Electron技能(如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!

希望它会有所帮助

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读