Электрон и машинопись: Как правильно обрабатывать модули во время выполнения?

Question

Я пишу электронное настольное приложение в TypScript. После компиляции, организация проекта выглядит следующим образом:

• DIST
  • HTML
    • index.html
  • скрипты
    • ApplicationView.js
    • ApplicationViewModel.js

В index.html У меня есть этот скрипт тег:

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

Все мои файлы компилируются из транскрипта ES2015 (таргетинг ES6 и с использованием модулей ES6) и transpiled от 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

Фигурные его. Довольно просто. Я заменил <script> тег в HTML-файл с этим:

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

работает как шарм! Теперь мне просто нужно выяснить, почему JQuery работает неправильно ...

Answer 2

Вы смешивая ES5 и ES6 путей экспорта модулей:

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