运行[SyntaxError：意外的令牌导入]时，应用程序发生错误

Question

我们有一个正在运行的反应应用程序，需要我为其生成电子。按照Here的说明添加我的Main.js文件后。我的电子扔了上面的错误。经历后，我发现我的电子不与ES6和我index.js反应低于

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Root from './_store/root'; 

ReactDOM.render(<Root/>, document.getElementById('root')); 

术语，当我改变从上面的代码进口，电子抛出另一个错误invalid token >我的理解是从<Root/>。

下面是我如何运行我的电子

./node_modules/.bin/electron . 

部分我的package.json是

"main": "src/index.js", 
    "scripts": { 
    "test": "npm run test:eslint && npm run test:unit", 
    "test:eslint": "webpack --config webpack.config.dev.js", 
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js", 
    "test:watch": "npm test -- --watch", 
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js", 
    "start": "node server.js", 
    "build": "npm run clean && npm run build:webpack", 
    "translate": "bash fetch-translation.sh" 
    } 

我的反应中反应过来，反应过来，终极版工作正常执行的应用程序。

和我webpack.config

module.exports = { 
    devtool: 'eval', 
    entry: [ 
     './src', 
    ], 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'app.js', 
     publicPath: '/', 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
    ], 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: 'babel-loader', 
      include: path.join(__dirname, 'src'), 
     }, { 
      test: /\.js$/, 
      loader: 'eslint-loader', 
      include: path.join(__dirname, 'src'), 
     }], 
    }, 
}; 

唯一的问题是我的电子这我试图生成一个桌面应用程序。任何帮助，将不胜感激。

和我相依

"devDependencies": { 
    "babel-core": "^6.4.0", 
    "babel-eslint": "^5.0.0-beta6", 
    "babel-loader": "^6.2.1", 
    "babel-plugin-react-intl": "^2.0.0", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-plugin-transform-function-bind": "^6.3.13", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "eslint": "^1.10.3", 
    "eslint-config-airbnb": "^3.1.0", 
    "eslint-loader": "^1.2.0", 
    "eslint-plugin-react": "^3.15.0", 
    "expect": "^1.13.4", 
    "expect-jsx": "^2.2.2", 
    "express": "^4.13.3", 
    "istanbul": "^0.4.2", 
    "json-loader": "^0.5.4", 
    "mocha": "^2.3.4", 
    "react-addons-perf": "^0.14.6", 
    "react-addons-test-utils": "^0.14.6", 
    "webpack": "^1.12.11", 
    "webpack-dev-middleware": "^1.2.0", 
    "webpack-hot-middleware": "^2.6.0" 
    } 

Answer 1

原来的错误是在我package.js的

"main": "src/index.js", 
    "scripts": { 
    "test": "npm run test:eslint && npm run test:unit", 
    "test:eslint": "webpack --config webpack.config.dev.js", 
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js", 
    "test:watch": "npm test -- --watch", 
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js", 
    "start": "node server.js", 
    "build": "npm run clean && npm run build:webpack", 
    "translate": "bash fetch-translation.sh" 
    } 

更改上面的主要指向您的电子文件。像

"main": "src/electron.js", 
    "scripts": { 
    "test": "npm run test:eslint && npm run test:unit", 
    "test:eslint": "webpack --config webpack.config.dev.js", 
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js", 
    "test:watch": "npm test -- --watch", 
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js", 
    "start": "node server.js", 
    "build": "npm run clean && npm run build:webpack", 
    "translate": "bash fetch-translation.sh" 
    } 

在我的情况。 electron.js简单地就是电子github页面上可以获得的电子js实现。

const electron = require('electron'); 
const app = electron.app; // Module to control application life. 
const BrowserWindow = electron.BrowserWindow; // Module to create native browser window. 

// Report crashes to our server. 
electron.crashReporter.start(); 

// Keep a global reference of the window object, if you don't, the window will 
// be closed automatically when the JavaScript object is garbage collected. 
var mainWindow = null; 

// Quit when all windows are closed. 
app.on('window-all-closed', function() { 
    // On OS X it is common for applications and their menu bar 
    // to stay active until the user quits explicitly with Cmd + Q 
    if (process.platform != 'darwin') { 
    app.quit(); 
    } 
}); 

// This method will be called when Electron has finished 
// initialization and is ready to create browser windows. 
app.on('ready', function() { 
    // Create the browser window. 
    mainWindow = new BrowserWindow({width: 600, height: 500}); 

    // and load the index.html of the app. 
    mainWindow.loadURL('file://' + __dirname + '/../public/index.html',{"userAgent":"Mobile"}); 

    // Open the DevTools. 
    mainWindow.webContents.openDevTools(); 

    // Emitted when the window is closed. 
    mainWindow.on('closed', function() { 
    // Dereference the window object, usually you would store windows 
    // in an array if your app supports multi windows, this is the time 
    // when you should delete the corresponding element. 
    mainWindow = null; 
    }); 

在这种情况下，您的电子并不需要知道你的ES6脚本，因为它是由巴别处理和呈现在您的index.html。指数。HTML是作为回报呈现在我们的电子上

Answer 2

invalid token >

这个问题是很难找到没有所有的代码分析。 我有类似的错误，这是因为我没有在这里包括Electron.app/Contents/Resources/app/ package.json文件。错误消息没有帮助。

为了我的需要，我创建了electron + react + redux + bootstrap3 + sass样板应用程序。它还集成了反应热载入程序，它运行良好（它可以运行您的电子应用程序，并添加更改，并且可以立即看到此更改），反应部分位于ES6 & ES7和jsx中。您可以尝试运行它并与您的代码进行比较。也许你找到理由。

目前我只添加配置OS X版本（因为我没有窗户，但我会很高兴的任何支持的）

https://github.com/uhlryk/my-electron-boilerplate

这是很新鲜的，可能有一些问题（如我说我欢迎任何贡献）。