Creating an Electron application using Typescript has led to a specific project structure upon compilation:
- dist
- html
- index.html
- scripts
- ApplicationView.js
- ApplicationViewModel.js
- html
The index.html file includes the following script tag:
<script src="../scripts/Application.js"></script>
All files are initially compiled from Typescript to ES2015 (with ES6 targets and modules) and then transpiled by Babel to ES5. The code inside ApplicationView.ts is structured 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!"));
});
The content of ApplicationViewModel.ts is as follows:
import * as ko from "knockout";
export default class ApplicationViewModel {
public greeting: KnockoutObservable<string>;
constructor(greeting: string) {
this.greeting = ko.observable(greeting);
}
}
An issue arises where Electron cannot locate the module ./ApplicationViewModel, although it can be successfully imported in the debugger console using:
require("../scripts/ApplicationViewModel");
This discrepancy stems from the fact that the script tag essentially duplicates the contents of Application.js into the HTML file, affecting the module's relative path context. The main query is what is the optimal solution?
Possibilities like incorporating require.js in the script tag have been observed. However, considering Electron functions on Node.js, the necessity for an additional module loader is confusing. How can harmony between both loaders be ensured?