App threw an error when running [SyntaxError: Unexpected token import]

Question

我们有一个运行ning React 应用程序，要求我为其生成电子。按照 Here 的说明添加我的 Main.js 文件后。我的electron抛出了上面的错误。完成后，我注意到我的电子不符合 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 应用程序，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

invalid token >

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

为了我的需要，我创建了 electron+react+redux+bootstrap3+sass 样板应用程序。它还集成了反应热加载器，效果很好（它运行是你的电子应用程序，你添加更改，这些更改立即可见）并且反应部分在 ES6 & ES7 和 jsx 中。您可以尝试运行它并与您的代码进行比较。也许你会找到原因。

目前我只为 os x 版本添加配置（因为我没有 windows 但我会很高兴得到任何支持）

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

它很新鲜，可能会有一些问题（正如我所说，我欢迎任何贡献）。

Answer 2

原来错误在我的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 更改为指向您的电子文件 .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 在 return 中呈现在我们的电子

上

App threw an error when running [SyntaxError: Unexpected token import]

App threw an error when running [SyntaxError: Unexpected token import]

reactjs

electron