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

Unexpected token import on Electron app

本文关键字：意外 令牌 导入 程序上 应用 应用程序 Electron      更新时间：2023-09-26

我使用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"？），但我的应用程序代码中没有明确的内容表明这一点。

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

@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 中所做的那样

相关文章：