2015-07-05 12 views
6

używam pliki ES6 js, które następnie są kompilowane przez haustem (browserify/Babel), przykład pliku ES6 jest:Electron & ES6 sposobu wdrożenia wymagają zdalnego/IPC podczas korzystania haustem i ES6 moduły

mam zwykły App.js, który jest używany do konfiguracji głównego okna itd. Wtedy strony html będą używać pliku main.min.js, który jest zasadniczo skomponowany ze wszystkimi moimi klasami ES6 skompilowanymi w jeden plik:

program ładujący .es6 złożyć

import Main from './pages/Main.es6' 

new Main() 

Main.es6 złożyć

import Vue from 'vue'; 

export default class Main extends Vue{ 
    constructor() {...} 
    ..... 
} 

Po skompilowaniu i uruchomieniu tego wszystko działa dobrze i wszystko jest dobre ... Ale jak pomyślałem, jeśli chcę wdrożyć moduły "IPC", "Remote", mam problemy z kompilacją, ponieważ nie mogą znaleźć te moduły za pomocą metod dostępnych w ramach moich klas.

Czyniąc następujących awarii:

import Remote from 'remote' 
import Main from './pages/Main.es6' 

new Main() 

lub

var Remote = require('remote') 
import Main from './pages/Main.es6' 

new Main() 

Czy to możliwe, aby zrobić lub osiągnąć, lub nope potrzebuje więcej myśli i wraca do normalnej js proszę.

Wszelkie pomysły/rady byłoby wielkie dzięki

EDIT: dodawać szczegóły błędu

Przykładowy plik w pytaniu Main.es6

oglądnąć dodany var var Remote = require('remote') na górze to powoduje następujący błąd.

nawet przy użyciu import Remote from 'remote'

{ [Error: Cannot find module 'remote' from '/Volumes/DAVIES/ElectronApps/electron-vuejs-starter/resources/js/pages'] 
stream: 
    { _readableState: 
    { 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, 
    objectMode: true, 
    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] }, 
    _maxListeners: undefined, 
    _writableState: 
    { highWaterMark: 16, 
    objectMode: true, 
    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, 
    buffer: [], 
    pendingcb: 0, 
    prefinished: true, 
    errorEmitted: false }, 
    writable: true, 
    allowHalfOpen: true, 
    _options: { objectMode: true }, 
    _wrapOptions: { objectMode: true }, 
    _streams: [ [Object] ], 
    length: 1, 
    label: 'deps' } } 
+0

* W jaki sposób * nie działa? Jak wygląda składnia eksportu tego 'zdalnego' modułu? Wskaż nam dokładnie te pliki (jeśli musisz je połączyć) zamiast całego projektu. – Bergi

+0

Więc gdzie znajduje się ten moduł 'remote'? Czy chodziło Ci o './Remote'? – Bergi

+0

jego część (jak sądzę) konfiguracji modułu elektronicznego. Ass uruchamia je w macierzystych plikach js, ponieważ wszystko by działało ... umożliwia dostęp do głównego procesu elektronowego i modułów, takich jak 'var ipc = remote.require ('ipc)', może nie być możliwe jak dotąd, więc będzie musiał użyć normalnych sposobów ES5. –

Odpowiedz

4

Dobrze gra i udało mi się uzyskać to do pracy w taki sposób:

Zasadniczo ustawić zdalne i IPC modułów w obrębie strony HTML, a następnie przechodzą w tych, do mojej klasy na tę stronę.

main.html

<script> 
    var remote = require('remote'); 
    var ipc = require('ipc'); 
    new Main(ipc); 
</script> 

Main.js - Class File

export default class Main extends Vue{ 
    constructor(ipc) { 
    .... 
    ipc.send('listener here','message here'); 

    ..... 

pliki mogą być przeglądane w tym Branch:

4

szczerze, najprostszym sposobem rozwiązania tego celu jest nie minify pliki binarne lub użyj browserify . Electron ma już require w zasięgu globalnym - wszystko, co musisz zrobić, to uruchomić swoje pliki przez Babel na ES6 => ES5 je skompiluj (electron-compile czyni to banalnie łatwym). Twoja instrukcja import zostanie przetłumaczona na require, którą Electron automatycznie obsłuży po wyjęciu z pudełka.

Ogólnie rzecz biorąc, wiele strategii optymalizacji, do których jesteś przyzwyczajony w sieci, takich jak zminimalizowanie lub konkatenacja, jest zbędne lub nie ma sensu w Electron, w większości przypadków po prostu nie możesz ich zrobić!

+0

dziękuję za komentarz, zgadzam się całkowicie, ale po prostu staram się używać rzeczy robię codziennie itp., Jestem w zgodzie z tobą na wiele sposobów szczególnie i był dokładnie tym, co miałem/mam zamiar zrobić prawdopodobnie w końcu., Jeszcze raz dziękuję. +1 –

6

w moim przypadku używam browserify z babelify, gdybym spróbował:

var remote = require('remote')

bym dostał błąd:

Error: Cannot find module 'remote' from xxx

Ale gdybym próbował

var remote = window.require('remote')

To działa.

import remote from 'remote' nie działa, wygląda na to, że przeglądarka nie może znaleźć tych natywnych modułów, które nie zostały zdefiniowane w package.json.