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

Question

I'm writing an Electron desktop application in Typescript. After compilation, the project organization looks something like this:

• dist
  • html
    • index.html
  • scripts
    • ApplicationView.js
    • ApplicationViewModel.js

In index.html I have this script tag:

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

All my files are compiled from Typescript to ES2015 (targeting ES6 and using ES6 modules) and transpiled by Babel to ES5. ApplicationView.ts looks like this:

///<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!"));
});

Here's the contents of ApplicationViewModel.ts :

import * as ko from "knockout";

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

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

Electron throws an error saying it can't find the module ./ApplicationViewModel . However, in the debugger console, I can successfully import the module with:

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

So, what's wrong is obvious. The script tag effectively copies the contents of Application.js into the HTML file, changing the context for the module's relative path. My question is what should I really be doing?

I've seen the use of require.js in the script tag. But Electron runs on Node.js. If this is the right way to handle my problem, why then would I need another module loader? How would I make sure the two play nice?

Answer 1

Figured it out. Pretty simple actually. I replaced the <script> tag in the HTML file with this:

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

Works like a charm! Now I just need to figure out why JQuery isn't working properly...

Answer 2

You are mixing up the es5 and the es6 ways to export modules:

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