电子&Angular:fs.​​existsSync 不是函数 [英] Electron & Angular: fs.existsSync is not a function

问题描述

我用 Angular 创建了一个新的电子项目.我使用 Angular CLI 构建我的应用程序.现在，我想从 Renderer-Process 到 Main-Process 进行通信，并在 Dev-Tools 中得到一个错误:

I've created a new Electron-Project with Angular. I build my app with the Angular CLI. Now, I want to communicate from Renderer-Process to Main-Process and get an error in Dev-Tools:

> Uncaught TypeError: fs.existsSync is not a function
    at Object.<anonymous> (vendor.bundle.js:72643)
    at Object.splitPathRe (vendor.bundle.js:72649)
    at __webpack_require__ (inline.bundle.js:53)
    at Object.399 (main.bundle.js:54)
    at __webpack_require__ (inline.bundle.js:53)
    at Object.400 (main.bundle.js:107)
    at __webpack_require__ (inline.bundle.js:53)
    at Object.291 (main.bundle.js:24)
    at __webpack_require__ (inline.bundle.js:53)
    at Object.473 (main.bundle.js:234)
    at __webpack_require__ (inline.bundle.js:53)
    at webpackJsonpCallback (inline.bundle.js:24)
    at main.bundle.js:1

我使用这个项目模板:https://github.com/auth0-blog/角2电子重现此错误的步骤是:

I use this Project-Template: https://github.com/auth0-blog/angular2-electron The steps to reproduce this error are:

git clone https://github.com/auth0-blog/angular2-electron
npm install

3.在 src/app/app.component.ts 中添加以下行

3.Add following line to src/app/app.component.ts

const {ipcRenderer} = require('electron');

没有这条线，应用程序运行没有任何问题.由于电子，我必须以这种方式引用 ipcRenderer... https://github.com/electron/electron/blob/master/docs/api/ipc-main.md

Without that line, the app runs without any problems. Due to electron I have to reference the ipcRenderer that way... https://github.com/electron/electron/blob/master/docs/api/ipc-main.md

我不知道我做错了什么，希望你能帮助我.

I have no idea what I am doing wrong and hope, you can help me.

推荐答案

Webpack 自带的 require 破坏了 node.js 的 require，所以当你 需要 一个 node.js 核心模块，webpack 无法解析到您的文件或依赖项之一，它会抛出.(您可以在堆栈跟踪中看到它包含 __webpack_require__.这是因为 webpack 将所有 require 重写为 __webpack_require__ 以便它使用自己的内部node.js-esque 系统).Webpack 是为 web/浏览器构建的，因此它不能很好地与开箱即用的节点一起使用.要绕过它，你可以使用这个:https://github.com/chentsulin/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. To get around it you can use this: https://github.com/chentsulin/webpack-target-electron-renderer.

但我也会考虑使用 webpack，请参阅:为什么将 webpack 与电子一起使用

But I'd also consider using webpack at all, see: why use webpack with electron

这篇关于电子&Angular:fs.​​existsSync 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！