应用程序运行时抛出一个错误[SyntaxError:意外令牌导入]

Question

我们有一个运行反应应用程序，我被要求生成一个电子。在添加了我的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"
  }

我的react应用程序在react中实现，redux运行得很好。

还有我的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"
  }

将上面的主要内容更改为指向电子文件.like。

"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只是下面的电子js实现，它可以在电子github页面上获得。

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脚本，因为它将由babel处理，并呈现在您的index.html上。index.html在我们的电子上被渲染

Answer 2

无效令牌>

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

为了满足我的需要，我创建了electron+react+redux+bootstrap3+sass样板应用程序。它还集成了react热加载程序，它工作得很好(它运行您的电子应用程序，添加更改，这些更改立即可见)，react部分在ES6 & ES7和jsx中。您可以尝试运行它并与代码进行比较。也许你能找到理由。

目前，我只为os发行版添加配置(因为我没有窗口，但我会很高兴得到任何支持)

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

它是非常新鲜的，可能会有一些问题(正如我说的，我欢迎任何贡献)。