Неожиданный импорт токена в приложении Electron

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

import os from 'os'

После загрузки шаблона приложение работает нормально. Мне удалось без проблем импортировать сценарии в файл background.js. Ниже показано, как я загружаю свой пользовательский модуль:

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

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

My 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 (возможно, «Свертывание»?), но в коде моего приложения нет ничего явного, чтобы предложить это.


person Mike    schedule 23.03.2016    source источник
comment
Можете написать номер строки ошибки?   -  person    schedule 27.03.2016
comment
Строка 1. Комментирование строки 1 дает ту же ошибку в строке 2. Кажется, он не может распознать слово «импорт».   -  person Mike    schedule 27.03.2016


Ответы (2)


Сначала вам нужно запустить clipboard.js через накопительный пакет. Rollup анализирует операторы импорта. Для этого вам нужно изменить tasks/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')),
        ]);
};
person Community    schedule 27.03.2016
comment
Ну, это имеет смысл задним числом. Как вы думаете, это должно быть частью электронных документов? Я понимаю, что это не зависит от электрона, но это не сразу очевидно. Мне пришлось покопаться, чтобы узнать, что накопительный пакет даже использовался - person Mike; 27.03.2016
comment
@mikemike Это должно быть частью документации. Я не знаю, почему этого не было. Возможно, они ожидают, что у вас будет только одна точка входа. - person ; 27.03.2016
comment
Боюсь, что нет. Я все еще получаю ту же ошибку. Я также получаю сообщение во время выполнения, в котором говорится, что database.js рассматривается как внешняя зависимость, что предполагает, что файл теперь проходит через сведение. - person Mike; 29.03.2016
comment
У меня это работает сейчас, это работает, только если clipboard.js находится в корне /app (я, очевидно, пытался изменить пути в коде). - person Mike; 29.03.2016

@ 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.

person Yoav Aharoni    schedule 31.03.2016