意外的令牌导入 - 电子/反应

Question

当我开始学习 React 后尝试运行我的程序时，我在运行我的启动脚本时遇到了这个错误。我正在将类“App”从 app.js 导入到我的入口点 ma​​in.js。

下面是我的代码：

webpack.config.js

module.exports = {
  entry: './main.js',
  target: "electron",
  output: {
    path: './',
    filename: 'app.js'
  },
devServer: {
  inline: true,
  port: 3333
},
module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
 }
}

app.js：

const React = require('react');

class App extends React.Component {
    mapboxgl.accessToken = 'key_here';

    render() {
      return (
        <div>
          var map = new mapboxgl.Map({
              container: 'map',
              style: 'map_style_here',
              center: [-74.50, 40],
              zoom: 9
           });
        </div>
      );
    }
}

export default App

ma​​in.js：

'use strict';

const React    = require('react');
const ReactDOM = require('react-dom');

import App from './app';

const BrowserWindow = require('browser-window')
const app           = require("app");

var mainWindow = null;     // Keep global reference to main broswer window.

app.on('window-all-closed', function() {
 if (process.platform != 'darwin') {
   app.quit();
 }
});

app.on('ready', function() {

 // Reference the main window object.
 mainWindow = new BrowserWindow({width: 1200, height: 800});

 mainWindow.loadURL('file://' + __dirname + "/app.html")

 mainWindow.on('closed', function() {

 // Dereference the main window object.
 mainWindow = null;

 ReactDOM.render(<App />, document.getElementById('map'))
 })
})

错误：

Uncaught Exception:
SyntaxError: Unexpected token import
  at exports.runInThisContext (vm.js:53:16)
  at Module._compile (module.js:404:25)
  at Object.Module._extensions..js (module.js:432:10)
  at Module.load (module.js:356:32)
  at Function.Module._load (module.js:313:12)
  at loadApplicationPackage  
(C:\Programming\RestaurantChat\node_modules\electron
prebuilt\dist\resources\default_app\main.js:257:23)
  at Object.<anonymous> 
(C:\Programming\RestaurantChat\node_modules\electron
prebuilt\dist\resources\default_app\main.js:289:5)
  at Module._compile (module.js:425:26)
  at Object.Module._extensions..js (module.js:432:10)
  at Module.load (module.js:356:32)

有什么东西没有编译吗？我真的不知道为什么会出现语法错误。

Answer 1

在主 Electron 进程中使用 React 没有什么意义，主进程无权访问 DOM。因此，除非您的计划是将 React 组件渲染为字符串，然后通过 IPC 将结果发送到渲染器进程，否则您需要重新考虑您的方法。

至于SyntaxError，看起来Babel 没有将import 转换为require，尽管我不确定它是否应该或者Webpack 是否应该处理。您在使用electron-renderer plugin 吗？您可能想从electron-react-boilerplate 开始。