Electron 和 Typescript：如何在运行时正确处理模块？

Question

我正在用 Typescript 编写 Electron 桌面应用程序。编译后，项目组织如下所示：

距离
- html
  - index.html
- 脚本
  - ApplicationView.js
  - ApplicationViewModel.js

在 index.html 我有这个脚本标签：

<script src="../scripts/Application.js"></script>

我所有的文件都是从 Typescript 编译到 ES2015（针对 ES6 并使用 ES6 模块）并由 Babel 转译到 ES5。 ApplicationView.ts 看起来像这样：

///<reference path="../../typings/main.d.ts" />

import * as $ from "jquery";
import * as ko from "knockout";
import ApplicationViewModel from "./ApplicationViewModel";

$(document).ready(() => {
    ko.applyBindings(new ApplicationViewModel("Hello!"));
});

这里是ApplicationViewModel.ts的内容：

import * as ko from "knockout";

export default class ApplicationViewModel {
    public greeting: KnockoutObservable<string>;

    constructor(greeting: string) {
        this.greeting = ko.observable(greeting);
    }
}

Electron 抛出一个错误，指出找不到模块 ./ApplicationViewModel。但是，在调试器控制台中，我可以成功导入模块：

require("../scripts/ApplicationViewModel");

所以，问题很明显了。脚本标签有效地将 Application.js 的内容复制到 HTML 文件中，更改模块相对路径的上下文。我的问题是 我到底应该做什么？

我在脚本标签中看到了 require.js 的使用。但是 Electron 在 Node.js 上运行。如果这是处理我的问题的正确方法，那我为什么还需要另一个模块加载器？我如何确保两者发挥良好？

Answer 1

您混淆了 es5 和 es6 导出模块的方式：

module.exports =  ApplicationViewModel; // ES5
export default ApplicationViewModel; // ES6

Answer 2

想通了。其实很简单。我用这个替换了 HTML 文件中的 <script> 标签：

<script>
    require("../scripts/ApplicationView");
</script>

很有魅力！现在我只需要弄清楚为什么 JQuery 不能正常工作...

Electron 和 Typescript：如何在运行时正确处理模块？

Electron and Typescript: How do I handle modules at runtime correctly?

javascript

typescript

ecmascript-6

electron