Question

我正在使用由gulp（browserify / babel）编译的ES6 js文件，ES6文件的示例是：

我有一个正常的App.js用于设置主窗口等。然后html页面将使用main.min.js文件，该文件基本上由编译成一个文件的所有ES6类组成：

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 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' } }

Answer 1

在我的情况下，如果我尝试的话，我正在browserify使用babelify：

var remote = require('remote')

我会收到错误：

错误：无法从xxx
中找到模块'remote'

但如果我试过

var remote = window.require('remote')

有效。

import remote from 'remote'不起作用，似乎浏览器无法找到package.json中未定义的原生模块。

Answer 2

一直在玩，我设法以某种方式让它工作：

基本上我在html页面中设置了远程和ipc模块，然后将这些模块传入我的课程页面。

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');

   .....

可以在此Branch中查看文件：

Answer 3

老实说，解决这个问题的最简单方法是不要缩小二进制文件或使用browserify。电子在全球范围内已经require - 您需要做的就是通过Babel运行您的文件到ES6 =＆gt; ES5编译它们（electron-compile使得这也很简单）。您的import语句将转换为require，Electron将自动处理该问题。

一般来说，您在网络上习惯的许多优化策略（如缩小或连接）是不必要的，或者在Electron中没有意义，您大多数情况下都不会这样做！

电子与电子ES6如何在使用gulp和ES6模块时实现require remote / ipc

3 个答案: