Question

我有一个Electron 1.5应用程序，我写了一些JSX组件。我希望组件在一个单独的文件（模块）中。

鉴于Electron支持Node 7.4和Chromium 54，我想我可以使用ES6模块语法，带导出。但我的导出命令出错了。

本说明指出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'

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

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

更新

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

它仍然抱怨：

未捕获的ReferenceError：未定义导出（...）

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

exports.Welcome =欢迎; exports.CountWidget = CountWidget;

Answer 1

需要做一些改变，但Aluan Haddad基本上是正确的。您无法使用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>);
  }
}

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

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

1 个答案: