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

【问题标题】：Electron and Typescript: How do I handle modules at runtime correctly?Electron 和 Typescript：如何在运行时正确处理模块？
【发布时间】：2016-07-19 09:30:23
【问题描述】：

我正在用 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");

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

我在脚本标签中看到了require.js 的使用。但是 Electron 在 Node.js 上运行。如果这是处理我的问题的正确方法，那我为什么需要另一个模块加载器？怎样才能保证两人打得不错？

【问题讨论】：

你能告诉我们ApplicationViewModel.js里面有什么吗？很确定这是export default 或其他什么的问题
我已经编辑了我的问题以包含该文件的内容。

标签： javascript typescript ecmascript-6 electron

【解决方案1】：

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

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

【讨论】：

是的，我的目标是 CommonJS。尝试切换到目标 ES6，但我遇到了同样的问题。不确定我是否遵循您所说的错误。我的 Typescript 故意针对 ES6，因为我想使用 async/await。然后 Babel 应该将其转换为 ES5。我没有在实际源代码中使用 ES5 样式导出；这是转译的结果。

【解决方案2】：

想通了。其实很简单。我将 HTML 文件中的 <script> 标记替换为：

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

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

【讨论】：