6

私は ES6 js ファイルを使用しており、これは gulp (browserify/babel) によってコンパイルされます。ES6 ファイルの例は次のとおりです。

メインウィンドウなどを設定するために使用される通常の App.js があります。次に、html ページは、基本的にすべての ES6 クラスが 1 つのファイルにコンパイルされた main.min.js ファイルを使用します。

loader.es6 ファイル

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

new Main()

Main.es6 ファイル

 import Vue from 'vue';

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

コンパイルして実行すると、これはすべて正常に動作し、すべて問題ありません...しかし、「IPC」、「リモート」モジュールを実装したい場合は、コンパイルに問題があります。require()または import..私のクラス内のメソッド。

そのため、次のことを行うと失敗します。

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

 new Main()

また

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

new Main()

これを実行または達成することは可能ですか、それとももっと考えて通常の js に戻す必要がありますか。

どんなアイデア/アドバイスもありがとう

編集：エラーの詳細を追加

問題のサンプル ファイルMain.es6

上部に追加された変数を参照してvar Remote = require('remote')ください。これにより、次のエラーが発生します。

使っても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' } }
4

3 に答える 3

4

正直なところ、これを解決する最も簡単な方法は、バイナリを縮小したり、browserify を使用したりしないことです。Electron は既にrequireグローバル スコープに含まれています。Babel を介してファイルを実行し、ES6 => ES5 でコンパイルするだけです ( electron-compileを使用すると、これも簡単になります)。ステートメントimportは に変換され、requireElectron はすぐに自動的に処理します。

一般に、縮小や連結など、Web で慣れ親しんでいる多くの最適化戦略は不要であるか、Electron では意味がありません。

于 2015-07-07T04:14:20.330 に答える
4

よく遊んでいて、これをある意味で機能させることができました：

基本的に、html ページ内にリモート モジュールと ipc モジュールを設定し、それらをそのページのクラスに渡します。

main.html

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

Main.js - クラスファイル

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

   .....

ファイルは、このBranch内で表示できます。

于 2015-07-06T21:18:24.153 に答える