2015-10-21 73 views
0

我想在2015年VS設置的新打字稿 HTML項目,我已經設置了打字稿建立設置CommonJS的ES5,也有tsconfig.json,這是不能找到導入模塊TypeScipt

{ 
"compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": true 
    } 
} 

這裏是我的主要app.ts

import t = require('./test'); 

class Greeter { 
element: HTMLElement; 
span: HTMLElement; 
timerToken: number; 
t: any; 

constructor(element: HTMLElement) { 
    this.element = element; 
    this.element.innerHTML += "The time is: "; 
    this.span = document.createElement('span'); 
    this.element.appendChild(this.span); 
    this.span.innerText = new Date().toUTCString(); 
    this.t = new t.sample.test(); 
} 

start() { 
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500); 
    this.t.hello(); 
} 

stop() { 
    clearTimeout(this.timerToken); 
    } 

} 

window.onload =() => { 
    var el = document.getElementById('content'); 
    var greeter = new Greeter(el); 
    greeter.start(); 
}; 

這裏是我的導入模塊test.ts

export module sample { 
export class test { 
    constructor() { } 
    hello =() => { 

     console.log("Test"); 
    } 
    } 
} 

下面是HTML。

<!DOCTYPE html> 

    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
     <title>TypeScript HTML App</title> 
    <link rel="stylesheet" href="app.css" type="text/css" /> 
    <script src="test.js"></script> 
    <script src="app.js"></script> 


    </head> 
    <body> 
    <h1>TypeScript HTML App</h1> 
    <div id="content"></div> 
    </body> 
    </html> 

該項目建立很好,但是當我在瀏覽器Chrome或IE打開,它會拋出控制檯錯誤,它無法找到測試並且文件從未到瀏覽器下載。任何一個可以表明什麼,我在這裏失蹤。

回答

0

這裏是我推薦的修復...

第一步 - 編譯AMD(或者UMD),而不是CommonJS的:

"module": "amd", 

第二步 - 在這裏溝內部模塊:

export module sample { 

第三步 - 添加Requir EJS(可作爲NuGet包)

第四步 - 使用需要JS

<script src="require.js" data-main"app"></script>