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

我有一个Electron 1.5应用程序，包含一些我编写的JSX组件。我想在单独的文件（模块）中的组件。Electron 1.5导出/导入自定义JSX组件（ES6模块）1.5

鉴于Electron支持节点7.4和Chromium 54，我想我可以使用ES6模块语法和导出。但是我收到导出命令的错误。

这说明指出，ES6可能在电子问题：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对babel使用的require语法不满意。

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

UPDATE

我用巴贝尔-预设-es2016-节点5试图

它仍然抱怨的：

未捕获的ReferenceError：出口没有定义（...）

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

exports.Welcome = Welcome; exports.CountWidget = CountWidget;

来源

2017-01-27 Dr.YSG

尝试增加巴别预置-es2016 -node –

npm ERR！404注册表返回404 GET for http://registry.npmjs.org/babel-preset-es2016-node npm ERR！404 npm ERR！404'babel-preset-es2016-node'i不在npm注册表中。 npm ERR！ 404你应该让作者发布它（或者自己使用这个名字！） npm ERR！ 404 npm ERR！ 404请注意，您也可以从 npm ERR！ 404 tarball，文件夹，http url或者git url。 –

看起来我错了，它的后缀是节点版本，即babel-preset-es2016-node6 –

需要做一些改变，但阿an哈达德基本上是正确的。您不能使用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); 
}

来源

2017-02-01 19:39:09

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

回答

相关问题