ما سبب خطأ require is not defined عند تشغيل مشروع Electrone.js

Abdelrahman Mostafa10 · 4 يناير

قمت بالبحث وتبين لي أنه لم يعد يتم دعم nodeIntegration بعد إصدار 12 من Electrone.js، لدي الكود التالي في ملف index.js:

const electron = require("electron");
const Ffmpeg = require("fluent-ffmpeg");
const CmdExec = require('child_process');
const {
    app,
    BrowserWindow,
    ipcMain
} = electron;

function createWindow() {
//If I put the main window ini into here, and then call app.on("ready", createWindow()); app says
//"Cant create window before ready", even though I just moved the funcion from inside ready to here..
}

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL(`${__dirname}/index.html`);
});
ipcMain.on("video:submit", (event, path) =>{
    CmdExec.exec("echo hello", (value)=>{console.log(value)});
});

كيف أٌقوم بتحديث الكود ليتناسب مع أحدث إصدار من electron؟

Kamel Mecheri · 19 يوليو

في أحدث إصدارات Electron (12 وما بعدها)، تم إيقاف دعم nodeIntegration في المتصفح بشكل افتراضي لأسباب تتعلق بالأمان. بدلاً من ذلك، يمكنك استخدام خاصية contextBridge وpreload لتمكين الاتصال بين واجهة المستخدم و Node.js بطريقة آمنة.

إليك كيفية تحديث الكود الخاص بك:

1. تحديث ملف index.js

لا تحتاج إلى استخدام nodeIntegration في webPreferences بعد الآن. بدلاً من ذلك، قم بإعداد preload وcontextBridge في ملف preload.js لتمكين الاتصال بين المتصفح و Node.js.

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const CmdExec = require('child_process');

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            enableRemoteModule: false
        }
    });

    mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

ipcMain.on('video:submit', (event, path) => {
    CmdExec.exec("echo hello", (error, stdout, stderr) => {
        if (error) {
            console.error(`exec error: ${error}`);
            return;
        }
        console.log(`stdout: ${stdout}`);
        console.error(`stderr: ${stderr}`);
    });
});

2. إنشاء ملف preload.js

هذا الملف يتم تحميله قبل تحميل واجهة المستخدم، ويمكنك استخدامه لعرض وظائف Node.js للواجهة الأمامية بشكل آمن.

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

contextBridge.exposeInMainWorld('electron', {
    submitVideo: (path) => ipcRenderer.send('video:submit', path),
});

3. تحديث ملف index.html

يمكنك الآن استخدام window.electron للوصول إلى واجهات Node.js من جافا سكريبت في المتصفح.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
    <h1>Hello Electron</h1>
    <button id="submitBtn">Submit Video</button>
    <script>
        document.getElementById('submitBtn').addEventListener('click', () => {
            window.electron.submitVideo('path/to/video');
        });
    </script>
</body>
</html>

ما سبب خطأ require is not defined عند تشغيل مشروع Electrone.js

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

Kamel Mecheri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية