Klient na węźle.js: Uncaught ReferenceError: require nie jest zdefiniowane

Pochodzę ze środowiska Electron , gdzie potrzebuję IPC komunikacji pomiędzy procesem renderującym a procesem głównym. Proces renderujący znajduje się w pliku HTML między znacznikami skryptu i generuje ten sam błąd.

Linia

const {ipcRenderer} = require('electron')

Rzuca Uncaught ReferenceError: require nie jest zdefiniowane

Udało mi się to obejść, określając węzeł.integracja js jako prawdziwa, gdy okno przeglądarki (w którym osadzony jest ten plik HTML) było pierwotnie utworzony w procesie głównym.

function createAddItemWindow() {

    // Create a new window
    addItemWindown = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add Item',

        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true
        }
})}

ES6: W HTML Dołącz główny plik JavaScript za pomocą atrybutu type="module" (obsługa przeglądarek):

<script type="module" src="script.js"></script>

I w pliku script.js Dołącz inny plik, taki jak ten:

import { hello } from './module.js';
...
// alert(hello());

Wewnątrz dołączonego pliku (module.js), musisz wyeksportować funkcję / klasę , którą zaimportujesz:

export function hello() {
    return "Hello World";
}

Działa przykład jest tutaj . Więcej informacji jest tutaj .

Zamień wszystkie require na import. Przykład:

// Before:
const Web3 = require('web3');

// After:
import Web3 from 'web3';

W moim przypadku użyłem innego rozwiązania.

Ponieważ projekt nie wymaga CommonJS i musi mieć kompatybilność z ES3 (Moduły nie są obsługiwane), wystarczy usunąć wszystkie export i import z twojego kodu, ponieważ tsconfig nie zawiera

"module": "commonjs"

Ale używaj instrukcji importu i eksportu w plikach, do których się odwołujesz

import { Utils } from "./utils"
export interface Actions {}

Końcowy wygenerowany kod będzie zawsze miał (przynajmniej dla TypeScript 3.0) takie linie

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

Nawet używanie tego nie zadziała. Myślę, że najlepszym rozwiązaniem jest Browserify :

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

Potwierdzam. Musimy dodać:

webPreferences: {
    nodeIntegration: true
}

Na przykład:

mainWindow = new BrowserWindow({webPreferences: {
    nodeIntegration: true
}});

Dla mnie problem został rozwiązany z tym.

This worked for me

1. Zapisz plik https://requirejs.org/docs/release/2.3.5/minified/require.js . jest to plik dla RequestJS, którego będziemy używać.
2. załaduj go do swojej zawartości HTML w następujący sposób: <script data-main="your-script.js" src="require.js"></script>
   

Uwaga!

Użycie require(['moudle-name']) in your-script.js, nie require('moudle-name')

Use const {ipcRenderer} = require(['electron']), nie const {ipcRenderer} = require('electron')