Electron應用程序上意外的令牌導入

Question

我使用GitHub的Electron構建了一個應用程序。 我使用推薦的加載模塊的方式，ES6語法：

import os from 'os'

下載樣板后，應用程序運行正常。 我已經能夠在background.js文件中導入腳本而不會出現問題。 以下是我加載自定義模塊的方法：

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

但是，當我在Electron中打開一個新的瀏覽器窗口（ clipboard.html ）時，我正在加載一個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'？），但我的應用程序代碼中沒有任何明確的建議。

Answer 1

您需要先通過匯總運行clipboard.js。 Rollup解析import語句。 您必須修改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')),
        ]);
};

Answer 2

@ 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一樣。

Electron應用程序上意外的令牌導入

問題描述

2 個解決方案

解決方案1
3 已采納

解決方案2
0 2016-03-31 23:35:39

Electron應用程序上意外的令牌導入

問題描述

2 個解決方案

解決方案1 3 已采納

解決方案2 0 2016-03-31 23:35:39

解決方案1
3 已采納

解決方案2
0 2016-03-31 23:35:39