Ecmascript 6 在Electron 1.5中导出/导入自定义JSX组件（ES6模块）

我有一个Electron 1.5应用程序，其中包含我编写的一些JSX组件。我想在一个单独的文件（模块）的组成部分

考虑到Electron支持Node 7.4和Chromium 54，我想我可以使用ES6模块语法和export。但是我在使用export命令时出错

此注释表明ES6在电子方面可能存在问题：

我目前正在为我的IDE使用VSCODE，我有一个Babel watch进程正在运行，其中react和es2016预设正在运行。我尝试了es2015预设，但Electron对babel使用的require语法不满意

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

更新

我试过使用babel-presets-es2016-node5

它仍然抱怨：

未捕获引用错误：未定义导出（…）

它在Counter.js文件的末尾生成了这个消息，这是它抱怨的地方

出口。欢迎=欢迎；

---

exports.CountWidget=CountWidget

需要做一些修改，但阿鲁安·哈达德基本上是正确的。您不能使用es2015预设，您需要es2015-node5预设。或者我尝试了babel-preset-node6和babel-preset-node7，它们对我的电子工作有效

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

---

尝试添加babel-preset-es2016-nodenpm ERR！404注册表返回404以获取npm ERR！404 npm ERR！404“babel-preset-es2016-node”不在npm注册表中。npm ERR！404您应该对作者设置bug以发布它（或自己使用名称！）npm ERR！404 npm ERR！404请注意，您也可以从npm ERR！404 tarball、文件夹、http url或git url安装。看起来我的名称搞错了，它的后缀是节点版本，即babel-preset-es2016-node6babel-preset-es2016-node6'不在npm注册表中。我使用了node5并报告了上述结果

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

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

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