Question

我在Typescript中编写了一个Electron桌面应用程序。编译后，项目组织看起来像这样：

DIST
- 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

想出来。其实很简单。我用以下代码替换了HTML文件中的<script>标记：

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

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

Answer 2

您正在混合使用es5和es6方法导出模块：

<!DOCTYPE html>
<html>
<body>

<audio style="display:none"  autoplay="autoplay" >
  <source src="horse.ogg" type="audio/ogg">

Your browser does not support the audio element.
</audio>

</body>
</html>

电子和打字稿：如何在运行时正确处理模块？

2 个答案: