找不到模块“电子”

Posted 2023-03-07

【中文标题】找不到模块“电子”

【英文标题】：Cannot find module 'electron'

【发布时间】：2016-02-28 13:45:38

【问题描述】：

我正在开发一个使用“0.34.3”版 Electron 的 Node.js 应用程序。

我遇到的问题是，当我尝试在渲染器进程中包含“电子”模块时，如下require('electron').remote; 和当我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     

知道发生了什么吗？ 谢谢！

【参考方案1】：

运行这个命令：

npm install --save-dev electron

更多详情click here

【参考方案2】：

当我忘记在脚本之前的某处将"main": "./main.js", 添加到package.json 时出现此错误。 要完成设置，请按照这个伟大的tutorial

编辑：

这是该链接的摘要：

安装 Electron

npm install electron --save-dev

更新 index.html

在 Angular 中生成的根页面将基本 href 指向 / - 这将在以后导致 Electron 出现问题，所以现在让我们更新它。只需在 src/index.html 中的斜线前添加一个句点即可。

<base href="./">

配置电子

在项目的根目录中创建一个名为 main.js 的新文件（与 package.json 处于同一级别） - 这是 Electron NodeJS 后端。这是 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()
  
)

将main.js 和自定义脚本添加到package.json。 你的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

运行命令来构建和启动电子

npm run electron-build

【参考方案3】：

有几种方法可以解决与API Changes Coming in Electron 1.0 相关的电子模块导入问题。

请注意，这通常发生在像 webpack 这样覆盖 require 函数的捆绑程序中。

利用 Webpack 的 target 属性

如果你使用最新版本的 Webpack 作为打包器，添加

target: 'electron-renderer'

你的配置应该让你使用：

import 'electron' from electron;

在构建之外声明 electron

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

<!-- your app build -->
<script src="dist/bundle.js"></script>

这样，我可以从任何地方访问electron。

使用window.require

Electron 扩展了 window 对象，以便您可以使用：

const electron = window.require('electron');

使用旧方式（仍然支持）

var remote = require('remote');
var app    = remote.app; // to import the app module, for example

【讨论】：

我删除了这个解决方案，因为它似乎不适用于所有人。而且imo这不是一个好习惯。查看我给出的新解决方案。

这对我有用： const electron = window.require('electron');我可以直接在我的模块中使用而不使其成为全局

感谢@CatalinEnache，我在答案中添加了这个解决方案！