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"
  }

我的反应应用程序在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

无效令牌＆gt;

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

根据我的需要，我创建了电子+ react + redux + bootstrap3 + sass样板应用程序。它还集成了反应热加载器，它运行良好（它运行您的电子应用程序，您添加更改，这些更改立即可见）和反应部分是在ES6＆amp; ES7和jsx。您可以尝试运行它并与您的代码进行比较。也许你找到理由。

目前我只为os x发布添加配置（因为我没有窗口，但我会很高兴有任何支持）

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": "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是在我们的电子上呈现的

App运行时出现错误[SyntaxError：Unexpected token import]

2 个答案: