javascript - Electron 和 typescript : How do I handle modules at runtime correctly?

Question

我正在用 Typescript 编写一个 Electron 桌面应用程序。编译后，项目组织看起来是这样的:

• 距离
  • html
    • index.html
  • 脚本
    • 应用程序 View .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");

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

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

Answer 1

想通了。其实很简单。我更换了 <script> HTML 文件中的标记:

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

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