2016-03-23 10 views
3

Ich habe eine App mit GitHubs Electron gebaut. Ich bin mit dem empfohlenen Weg der Lademodule, die ES6 Syntax:Unerwarteter Token-Import auf Electron app

import os from 'os'

Nach dem boilerplate dem Herunterladen der App funktioniert prima. Ich konnte Skripte in der background.js Datei ohne Problem importieren. Unten ist, wie ich meine benutzerdefinierten Modul bin Laden:

import { loadDb } from './assets/scripts/database.js';

Allerdings, wenn ich öffnen Sie ein neues Browser-Fenster (clipboard.html) innerhalb Electron ich dann eine JavaScript-Datei (clipboard.js), die versucht, import Module wiederum bin Laden . An diesem Punkt bekomme ich einen Unexpected token import Fehler.

Mein clipboard.html:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Electron Boilerplate</title> 

    <link href="./stylesheets/main.css" rel="stylesheet" type="text/css"> 

    <script> 
     window.$ = window.jQuery = require('./assets/scripts/jquery-1.12.1.min.js'); 
    </script> 
    <script src="./assets/scripts/clipboard.js"></script> 
</head> 
<body class="clipboard">[...]</body></html> 

Meine clipboard.js Datei:

import { remote } from 'electron'; // native electron module 
import { loadDb } from './assets/scripts/database.js'; 

const electron = require('electron'); 

document.addEventListener('DOMContentLoaded', function() { 
    var db = loadDb(); 
    db.find({ type: 'text/plain' }, function (err, docs) { 
     var docsjson = JSON.stringify(docs); 
     console.log(docsjson); 
    }); 
}); 

gerade wieder Iterierte, der gleiche Code innerhalb app.html verwendet wird, die mein app-Hauptfenster ist, und dies nicht Error.

Es fühlt sich an, als ob das Hauptfenster etwas initialisiert, das mein clipboard.html-Fenster nicht ist (vielleicht 'Rollup'?), Aber es gibt nichts explizites im Code meiner App, um dies vorzuschlagen.

+0

Können Sie die Zeilennummer des Fehlers schreiben ? –

+0

Zeile 1. Kommentieren Zeile 1 gibt den gleichen Fehler in Zeile 2. Es kann das Wort "importieren" nicht erkennen es scheint – Mike

Antwort

3

Sie müssen zuerst clipboard.js durch Rollup ausführen. Rollup analysiert die Importanweisungen. Sie müssen tasks/build/build.js ändern, um dies zu tun.

var bundleApplication = function() { 
    return Q.all([ 
      bundle(srcDir.path('background.js'), destDir.path('background.js')), 
      bundle(srcDir.path('clipboard.js'), destDir.path('clipboard.js')), // Add this line 
      bundle(srcDir.path('app.js'), destDir.path('app.js')), 
     ]); 
}; 
+0

Nun, das macht Sinn im Nachhinein. Denkst du, das sollte Teil der Elektronendokumente sein? Ich weiß, dass es nicht elektronenspezifisch ist, aber das ist nicht sofort offensichtlich. Ich musste graben um herauszufinden, dass Rollup sogar verwendet wurde – Mike

+0

@mikemike Es sollte Teil der Dokumentation sein. Ich weiß nicht, warum es nicht war. Vielleicht erwarten sie nur, dass Sie einen Einstiegspunkt haben. –

+0

@mikemike hat meine Antwort funktioniert? –

0

@ user104317 haben es richtig, clipboard.js einfach nicht "kompiliert" bekam von rollup.

Nur, dass in Ihrem Fall hinzufügen wollte, sollte es gewesen sein:

var bundleApplication = function() { 
    return Q.all([ 
     bundle(srcDir.path('background.js'), destDir.path('background.js')), 
     bundle(srcDir.path('app.js'), destDir.path('app.js')), 
     bundle(srcDir.path('assets/scripts/clipboard.js'), destDir.path('assets/scripts/clipboard.js')), 
    ]); 
}; 

Dann könnten Sie es auf ./assets/scripts/clipboard.js verlassen haben.

Wenn Sie eine Menge von unabhängigen js Dateien am Ende mit (Sie sollten nicht, wenn Sie ein SPA Gebäude sind), sollten sie automatisch die Auflistung, wie in ./tasks/build/generate_spec_imports.js getan

Verwandte Themen