運行[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

這是很新鮮的，可能有一些問題（如我說我歡迎任何貢獻）。