2017-12-06 27 views
0

私はAtomicエディタでTypescriptコード の非常に簡単な例を書こうとしています。 この例は、1つのmain.tsと、1つの小さなクラス(myclasses.ts)が の非常に小さいモジュールで構成されています。私は通常モジュールをインポートします
翻訳プロセスはエラーと.jsファイルなしで行われます 出力フォルダに通常作成されています。 私はトランスパイルCLI翻訳後にブラウザに何も表示されない

tsc *.ts --target 'es6' 

を使用して、私はそれが すべてのエラーや警告なしに終了し、両方のケースでは、アトムの中からも、それを行います。 私が使用してCLIからmain.jsファイルを実行すると:

node main.js 

それだけで正常に動作し、私はその結果、すべての機能 の出力を得るしかし、私はmain.jsを呼び出すHTMLファイルを開くときノーヘッハ ハプニング!エラーなし、コンソール、出力なしで警告なしには何も...

これはtsconfig.jsonの内容は次のとおりです。

{ 
    "compilerOptions": { 

    "target": "ES2015", 
    "module": "umd", 
    "outDir": "built", 
    "strict": true 

    }, 

    "exclude": [ 
     "node_modules" 
    ] 
} 

をして(transpiling後)このmain.js:

(function (factory) { 
    if (typeof module === "object" && typeof module.exports === "object") { 
     var v = factory(require, exports); 
     if (v !== undefined) module.exports = v; 
    } 
    else if (typeof define === "function" && define.amd) { 
     define(["require", "exports", "./myclasses"], factory); 
    } 
})(function (require, exports) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    const myclasses_1 = require("./myclasses"); 
    var colors; 
    (function (colors) { 
     colors[colors["Red"] = 0] = "Red"; 
     colors[colors["Green"] = 1] = "Green"; 
     colors[colors["Blue"] = 2] = "Blue"; 
    })(colors || (colors = {})); 
    ; 
    let msg = 'Ameme tmena'; 
    let result = msg.toUpperCase(); 
    console.log(result); 
    let aa = msg.endsWith('a'); 
    console.log(aa); 
    function tryLoop(l) { 
     for (let i = 0; i < l; i++) { 
      let PowrOf2 =() => Math.pow(i, 2); 
      console.log(i, PowrOf2()); 
     } 
    } 
    ; 
    tryLoop(7); 
    let test1; 
    test1 = 'Amama Terr'; 
    let ThEnd = test1.endsWith('r'); 
    console.log(ThEnd); 
    let p1 = new myclasses_1.Point(78, 89); 
    p1.calcXY(); 
    p1.x = 8; 
    p1.y = 90; 
    p1.calcXY(); 
    p1.x = -8; 
    p1.y = 0; 
    p1.calcXY(); 
    console.log('Hiiiiiii'); 
    let testing; 
    testing = 19; 
    testing += (testing > 20) ? -2 : +2; 
    console.log(testing); 
}); 
+0

umdモジュールを作成する場合は、require.jsのようなブラウザ用のモジュールローダーが必要です。 webpackやbrowserifyを使ってバンドルすることもできます。 –

+0

お返事ありがとうございますが、詳細を教えてください。私の場合、require.jsの使い方は?何を追加するか何をすべきか不便をおかけして申し訳ありません...ありがとうございました –

+0

私はそれをしてくれてありがとう、本当に簡単でした。 –

答えて

0

あなただけのモジュールを作成していないのTSconfigを変更することができます。

{ 
    "compilerOptions": { 

    "target": "ES2015", 
    "module": "none", 
    "outDir": "built", 
    "strict": true 

    }, 

    "exclude": [ 
     "node_modules" 
    ] 
} 

この出力すべきクリーンJSコード。

関連する問題