2016-03-23 7 views
3

Я создал приложение с использованием GitHub's Electron. Я использую рекомендуемый способ загрузки модулей, синтаксис ES6 из:Неожиданный импорт токена в приложении Electron

import os from 'os'

После загрузки boilerplate приложение работает отлично. Я смог импортировать скрипты в файл background.js без проблем. Ниже, как я загрузке мой пользовательский модуль:

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

Однако, когда я открыть новое окно браузера (clipboard.html) в Electron я затем загружаете файл JavaScript (clipboard.js), который в свою очередь пытается import модулей , На данный момент я получаю ошибку Unexpected token import.

Мои 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> 

Мой clipboard.js файл:

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); 
    }); 
}); 

Просто повторно итерацию, и тот же код используется в app.html, который является главным окном моего приложения, и это не ошибка.

Похоже, что главное окно инициализирует то, что окно моего clipboard.html не является (возможно, «Rollup»?), Но в коде моего приложения нет ничего, чтобы предложить это.

+0

Вы можете разместить номер строки ошибки ? –

+0

Строка 1. Комментирование строки 1 дает ту же ошибку в строке 2. Он не может распознать слово «импорт», похоже, – Mike

ответ

3

Сначала необходимо запустить clipboard.js через накопительный пакет. Rollup анализирует операции импорта. Для этого вам нужно изменить task/build/build.js.

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

Хорошо, что имеет смысл в ретроспективе. Считаете ли вы, что это должно быть частью электронных документов? Я понимаю, что это не электронно-специфический, но это не сразу очевидно. Мне пришлось копать, даже чтобы узнать, что этот накопитель был даже использован – Mike

+0

@mikemike Он должен быть частью документов. Я не знаю, почему это не так. Может быть, они только ожидают, что у вас будет одна точка входа. –

+0

@mikemike сделал мой ответ работать? –

0

@ user104317 получил это право, clipboard.js просто не получить "составленный" по rollup.

Просто хотел бы добавить, что в вашем случае, это должно было быть:

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')), 
    ]); 
}; 

Тогда вы могли бы оставить его в ./assets/scripts/clipboard.js.

Если вы в конечном итоге, много независимых JS-файлов (вы не должны, если вы строите SPA), рассмотреть вопрос о включении их автоматически, как сделано в ./tasks/build/generate_spec_imports.js