[英]Cannot find module 'electron'
I'm working on a Node.js app that's using the "0.34.3" version of Electron. 我正在使用使用Electron的“ 0.34.3”版本的Node.js应用程序。
The problem that I'm having is that when I try to include the 'electron' module in a renderer process as follows require('electron').remote;
我遇到的问题是,当我尝试在渲染器过程中包括以下“ electron”模块时,
require('electron').remote;
and when I npm start
--I get the following error: 当我
npm start
-出现以下错误:
{ [Error: Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect']
stream:
Labeled {
_readableState:
ReadableState {
objectMode: true,
highWaterMark: 16,
buffer: [],
length: 0,
pipes: [Object],
pipesCount: 1,
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
defaultEncoding: 'utf8',
ranOut: false,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null,
resumeScheduled: false },
readable: true,
domain: null,
_events:
{ end: [Object],
error: [Object],
data: [Function: ondata],
_mutate: [Object] },
_eventsCount: 4,
_maxListeners: undefined,
_writableState:
WritableState {
objectMode: true,
highWaterMark: 16,
needDrain: false,
ending: true,
ended: true,
finished: true,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
bufferedRequest: null,
lastBufferedRequest: null,
pendingcb: 0,
prefinished: true,
errorEmitted: false },
writable: true,
allowHalfOpen: true,
_options: { objectMode: true },
_wrapOptions: { objectMode: true },
_streams: [ [Object] ],
length: 1,
label: 'deps' } }
[11:36:40] js error Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect
Any idea what's up? 知道发生了什么吗? Thanks!
谢谢!
there are a few ways to resolve electron modules import regarding to API Changes Coming in Electron 1.0 . 关于Electron 1.0中即将出现的API更改,有一些解决电子模块导入的方法。
Please notice this usually occurs with bundler like webpack who override the require
function. 请注意,这种情况通常发生在捆绑包(如webpack)中,后者会覆盖
require
函数。
target
property target
属性 If you are using a recent version of Webpack as a bundler, adding 如果您将最新版本的Webpack用作捆绑程序,请添加
target: 'electron-renderer'
to your config should let you use: 到您的配置应该让您使用:
import 'electron' from electron;
electron
outside of your build electron
<!-- electron declaration -->
<script>
const electron = require('electron');
</script>
<!-- your app build -->
<script src="dist/bundle.js"></script>
This way, I can access electron
from anywhere. 这样,我可以从任何地方访问
electron
。
window.require
window.require
Electron extended the window
object so that you could use: Electron扩展了
window
对象,因此您可以使用:
const electron = window.require('electron');
var remote = require('remote');
var app = remote.app; // to import the app module, for example
Run this command: 运行以下命令:
npm install --save-dev electron
for more details click here 有关更多详细信息, 请单击此处
I got this error when I forgot to add "main": "./main.js",
to package.json
somewhere before scripts. 当我忘记在脚本之前的某个位置将
"main": "./main.js",
添加到package.json
时,出现了此错误。 For complete setup follow this great tutorial 有关完整的设置,请遵循此出色的教程
Edit: 编辑:
Here's a summery of that link: 这是该链接的总结:
Install Electron 安装电子
npm install electron --save-dev
Update index.html 更新index.html
The generated root page in Angular points the base href to / - this will cause problems with Electron later on, so let's update it now. 在Angular中生成的根页面将基本href指向/-稍后将导致Electron出现问题,所以让我们现在对其进行更新。 Just add a period in front of the slash in src/index.html.
只需在src / index.html中的斜杠前添加一个句点即可。
<base href="./">
Configure Electron 配置电子
Create a new file named main.js
in the root of your project (at the same level as package.json
) - this is the Electron NodeJS backend. 在项目的根目录(与
package.json
处于同一级别)中创建一个名为main.js
的新文件-这是Electron NodeJS后端。 This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system. 这是Electron的切入点,它定义了我们的桌面应用程序如何响应通过桌面操作系统执行的各种事件。
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})
win.loadURL(`file://${__dirname}/dist/index.html`)
//// uncomment below to open the DevTools.
// win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
Add main.js
and custom scripts to package.json
. 将
main.js
和自定义脚本添加到package.json
。 Your package.json
should look something like this: 您的
package.json
应该看起来像这样:
{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js", // <-- update here
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .", // <-- run electron
"electron-build": "ng build --prod && electron ." // <-- build app, then run electron
},
// ...omitted
}
Run the command to build and launch electron 运行命令以构建并发射电子
npm run electron-build
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.