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

【问题标题】：export/import custom JSX components (ES6 Modules) in Electron 1.5在 Electron 1.5 中导出/导入自定义 JSX 组件（ES6 模块）
【发布时间】：2017-01-27 15:34:01
【问题描述】：

我有一个 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 watch 进程，该进程正在运行 react 和 es2016 预设。我尝试了一个 es2015 预设，但 Electron 对 babel 使用的 require 语法不满意。

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

更新

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

它仍然抱怨：

Uncaught ReferenceError: exports is not defined(…)

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

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

【问题讨论】：

尝试添加 babel-preset-es2016-node
npm 错误！ 404 注册表在registry.npmjs.org/babel-preset-es2016-node npm ERR 上为 GET 返回 404！ 404 npm 错误！ 404 'babel-preset-es2016-node' 不在 npm 注册表中。 npm 错误！ 404 你应该让作者发布它（或自己使用名称！）npm ERR！ 404 npm 错误！ 404 请注意，您也可以从 npm ERR 安装！ 404 tarball、文件夹、http url 或 git url。
看来我的名字弄错了，它以节点版本为后缀，即 babel-preset-es2016-node6
babel-preset-es2016-node6' 不在 npm 注册表中。
我确实使用了node5并报告了上面的结果

标签： reactjs ecmascript-6 electron babeljs

【解决方案1】：

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

【讨论】：