Electron 应用程序上的意外令牌导入

Question

我已经使用 GitHub 的 Electron 构建了一个应用程序。我使用的是推荐的模块加载方式，ES6语法为：

import os from 'os'

下载 boilerplate 应用程序后运行良好。我已经能够毫无问题地在 background.js 文件中导入脚本。以下是我加载自定义模块的方式：

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

但是，当我在 Electron 中打开一个新的浏览器 window (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 中使用了相同的代码，这是我的应用程序的主要 window，这不会出错。

感觉主 window 正在初始化我的 clipboard.html window 不是的东西（也许 'Rollup'？），但我的应用程序中没有任何明确的内容建议这个的代码。

Answer 1

您需要先运行 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')),
        ]);
};

Answer 2

@user104317 做对了，clipboard.js 只是 rollup 没有得到 "compiled"。

只是想补充一下你的情况，应该是：

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 应用程序上的意外令牌导入

Unexpected token import on Electron app

javascript

electron

es6-module-loader

rollupjs