Electron & ES6 如何在使用 gulp 和 ES6 模块时实现 require remote/ipc答案

【问题标题】：Electron & ES6 how to implement require remote/ipc when using gulp and ES6 modulesElectron & ES6 如何在使用 gulp 和 ES6 模块时实现 require remote/ipc
【发布时间】：2015-09-22 21:31:16
【问题描述】：

我正在使用 ES6 js 文件，然后由 gulp (browserify/babel) 编译，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' } }

【问题讨论】：

如何失败了？ remote 模块的导出语法是什么样的？请向我们指出确切的文件（如果您必须链接它们）而不是整个项目。
那么remote 模块在哪里？你的意思是./remote？
它是电子预建模块设置的一部分（我相信）。 Ass 在本机 js 文件中运行它，因为这一切都可以工作......它使您能够访问主电子进程和模块，如 var ipc = remote.require('ipc)，这可能目前还不可能，因此必须使用正常的 ES5 方式。

标签： ecmascript-6 electron vue.js

【解决方案1】：

玩得很好，我已经设法让它以某种方式工作：

基本上我在 html 页面中设置 remote 和 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内查看：

【讨论】：

【解决方案2】：

老实说，解决此问题的最简单方法是不缩小二进制文件或使用 browserify。 Electron 已经在全局范围内拥有 require - 您需要做的就是通过 Babel 运行文件到 ES6 => ES5 编译它们（electron-compile 也使这变得非常容易）。你的import 语句将被翻译成require，Electron 会自动处理开箱即用。

一般来说，您在网络上习惯的许多优化策略（如缩小或连接）在 Electron 中是不必要的或没有意义的，您大多可以不做！

【讨论】：

感谢您的评论，完全同意，但只是尝试使用我每天做的东西等，我在很多方面都同意你的看法，尤其是我曾经/将来可能会做的事情结束。，再次感谢。 +1

【解决方案3】：

就我而言，如果我尝试过，我会使用 browserify 和 babelify：

var remote = require('remote')

我会得到错误：

错误：无法从 xxx 找到模块“远程”

但如果我尝试过

var remote = window.require('remote')

有效。

import remote from 'remote' 不起作用，好像 browserify 找不到那些未在 package.json 中定义的原生模块。

【讨论】：