Экспорт/импорт пользовательских компонентов JSX (модулей ES6) в Electron 1.5

Question

У меня есть приложение Electron 1.5 с некоторыми компонентами JSX, которые я написал. Я хочу, чтобы компоненты были в отдельном файле (модуле).

Учитывая, что Electron поддерживает Node 7.4 и Chromium 54, я решил, что могу использовать синтаксис модуля ES6 с экспортом. Но я получаю ошибки с командой export.

Это примечание указывает на то, что ES6 могут возникнуть проблемы в Electron: ES6 syntax import Electron (require..)

export class Welcome extends React.Component { 
    render() { 
    return <h1>Hello Again, {this.props.name}</h1>; 
    } 
} 

export class CountWidget extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>{this.props.value}</h1> 
     <button onClick={this.props.onIncrement}>+</button> 
     <button onClick={this.props.onDecrement}>-</button> 
     </div>); 
    } 
} 

ли я требую, или импортировать в основной программе:

import {Welcome} from 'componenets\widgets' 

настоящее время я использую VSCODE для моего IDE, и у меня есть работа с часами Babel, работающая с запрограммированными и предварительными настройками es2016. Я попробовал предустановку es2015, но Electron недовольна синтаксисом require, который использует babel.

"babel": { 
    "sourceMaps": "inline", 
    "presets": [ 
     "react", 
     "es2016" 
    ] 
    } 

UPDATE

Я попытался с помощью Babel-пресеты-es2016-node5

Он по-прежнему жалуется:

неперехваченным ReferenceError: экспорт не определен (...)

Он сгенерировал это в конце файла Counter.js, в котором он жалуется.

export.Welcome = Добро пожаловать; export.CountWidget = CountWidget;

Answer 1

Необходимо сделать несколько изменений, но Aluan Haddad в основном правильный. Вы не можете использовать предустановку es2015, вам нужен предварительный набор es2015-node5. Или я попробовал как babel-preset-node6, так и babel-preset-node7, и они работали для моей работы Electron.

Counter.jsx (выход будет в ./jsx/Counter.js

const React = require('react'); 
const ReactDOM = require('react-dom') 

export class Welcome extends React.Component { 
    render() { 
    return <h1>Hello Again, {this.props.name}</h1>; 
    } 
} 

export class CountWidget extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>{this.props.value}</h1> 
     <button onClick={this.props.onIncrement}>+</button> 
     <button onClick={this.props.onDecrement}>-</button> 
     </div>); 
    } 
} 

Window.js (который импортирует)

const {ipcRenderer, remote} = require('electron') 
const {createStore} = require('redux') 
const { composeWithDevTools } = require('redux-devtools-extension') 
const {Welcome, CountWidget} = require('./jsx/Counter.js') 
const React = require('react'); 
const ReactDOM = require('react-dom') 


document.addEventListener("DOMContentLoaded", render) 
//$.ready(creator); 

const reducer = (state = 0, action) => { 
    switch (action.type) { 
     case 'INCREMENT': 
      return state + 1; 
     case 'DECREMENT': 
      return state - 1; 
     default: 
      return state; 
    } 
} 

const store = createStore(reducer, composeWithDevTools()) 
store.subscribe(render) 

function welcome() { 
    return React.createElement(Welcome, { name: 'Sara' }) 
} 
function widget() { 
    var state = store.getState() 
    return (
     React.createElement(CountWidget, { 
      value: state, 
      onIncrement:() => store.dispatch({ 
       type: 'INCREMENT' 
      }), 
      onDecrement:() => store.dispatch({ 
       type: 'DECREMENT' 
      }) 
     })) 
} 

function render() { 
    version() 
    ReactDOM.render(welcome(), document.getElementById('root')) 
    ReactDOM.render(widget(), document.getElementById('reduxer')) 
} 

function version() { 
    let ver = remote.getGlobal('MAIN').nodeVersion; 
    $('#status span').text(ver); 
}