Electron和Typescript：我如何在運行時正確處理模塊？

我正在使用Typescript寫一個Electron桌面應用程序。編譯後，項目組織看起來是這樣的：Electron和Typescript：我如何在運行時正確處理模塊？

DIST
- HTML
  - 的index.html
- 腳本
  - ApplicationView.js
  - 個ApplicationViewModel.js

在index.html我有這樣的腳本標籤：

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

我所有的文件從打字稿編譯ES2015（針對ES6和使用ES6模塊）和transpiled通過巴貝爾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); 
    } 
}

電子拋出一個錯誤說，它不能找到該模塊./ApplicationViewModel。然而，在調試器控制檯，我可以成功地導入模塊：

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

那麼，什麼是錯是顯而易見的。腳本標記有效地將Application.js的內容複製到HTML文件中，更改模塊相對路徑的上下文。我的問題是我應該怎麼做？

我已經看到在腳本標記中使用require.js。但是Electron在Node.js上運行。如果這是處理我的問題的正確方法，爲什麼我還需要另一個模塊加載器？我將如何確保兩人表現出色？

來源

2016-03-31 Craxal

你能告訴我們'ApplicationViewModel.js'裏面有什麼嗎？很確定這是'出口默認'或什麼的問題 – KeitIG

我編輯了我的問題，包括該文件的內容。 – Craxal

想通了。其實很簡單。我用這個替換了HTML文件中的<script>標籤：

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

工程就像一個魅力！現在我只需要弄清楚爲什麼JQuery不能正常工作......

來源

2016-04-04 04:11:54 Craxal

您的ES5和ES6方式導出模塊混合起來：

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

來源

2016-04-01 08:52:09 KeitIG

是的，我的目標是CommonJS。試圖切換到目標ES6，但我有同樣的問題。不知道我按照你說的是錯的。我的手稿故意針對ES6，因爲我想使用異步/等待。然後Babel應該把它轉換成ES5。我沒有在實際的源代碼中使用ES5樣式輸出;這是一個轉化的結果。 – Craxal

Electron和Typescript：我如何在運行時正確處理模塊？

回答

相關問題