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

回答

相關問題