2016-03-21 5 views
1

Ich mache folgendes zu dieser require machen in <app></app>Wie exportiert man eine Anforderung, die einer Variablen zugewiesen ist?

index.html sichtbar werden:

<script> 
    var electron = require('electron') 
</script> 
<app></app> 
<script src="bundle.js"></script> 

App.vue:

const ipc = electron.ipcRenderer 
console.log(ipc) 

Aber ich un-used und un-defined var Fehler mit ESLint, also habe ich beschlossen, dies zu tun:

requires.js:

var electron = require('electron') 

exports.electron = electron 

index.html:

<script src="requires.js"></script> 
</head> 

<body> 
    <app></app> 
    <script src="bundle.js"></script> 

Aber jetzt bekomme ich diesen Fehler: requires.js:3 Uncaught ReferenceError: exports is not defined.

Was ist der richtige Weg, um das Elektron require zu exportieren und zu importieren?

Hinweis: erfordert electron direkt in App.vue funktioniert nicht. Sie können nur electron in index.html

Voll Beispiel benötigen:https://github.com/alexcheninfo/vue-electron-simple

+1

Vielleicht 'module.exports' statt' exports'? –

Antwort

1

Was Sie scheinen zu versuchen, hier zu tun ist, definieren electron als globale Variable; Damit das funktioniert, können Sie window.electron = require('electron') in Ihrem Index.html im ersten Beispiel einstellen. (Es wird in Ihnen bundle.js verfügbar sein)

Allerdings mit Globals für diese schlechte Praxis und nicht notwendig. Was Sie tun sollten, verwenden Sie einfach require in Ihrem Code. Sie sagen, dass dies nicht funktioniert: Der Grund, warum es nicht funktioniert, ist wahrscheinlich, dass Sie Webpack oder etwas Ähnliches verwenden, um bundle.js zu erstellen. Außerdem führen Sie den Bündelprozess wahrscheinlich in Node und nicht in Electron aus, daher funktioniert require('electron') nicht wie erwartet. Beachten Sie, dass es in Ihrem index.html funktioniert, das nicht Teil des Bundles ist.

Wenn Sie dieses Setup weiterhin verwenden möchten, können Sie Electrons require umbenennen, um zwischen der require Auflösung während der Bündelung und der require Auflösung zur Laufzeit zu unterscheiden. Mit anderen Worten, in der Skript-Tag index.html und dann electronRequire('electron') in Ihrem Code verwenden.

Nachdem das gesagt wurde, warum bündeln Sie alles in erster Linie? Electron verfügt über vollständige Knotenintegration, so dass Sie reguläre Knotenmodule verwenden können; Die Dateien werden auch nicht über HTTP gesendet, so dass es wenig Vorteile bietet, alles in einer Datei zu bündeln.

+0

Danke für den Hinweis. Nun, ich benutze Vue.js, die '.vue' Dateien benutzt. Webpack kompiliert sie in JavaScript. Aber ich denke, Sie haben recht, ich werde darüber nachdenken, den Code nicht zu bündeln. – alexchenco