2017-12-08 10 views
1

私はTypeScriptを学び、エクスポート/インポートメカニズムを使いたいと思っています。私は3つの.TSファイルを持っており、コードは以下のようになります。Rollup.jsの使用に関する問題

1)MyClass.ts:

/// <reference path="../Scripts/jquery.d.ts" /> 
/// <reference path="../Scripts/dx.all.d.ts" /> 
/// <reference path="../Scripts/go.d.ts" /> 

export class MyClass { 
    render(divId: string, text: string): void { 
     ... 
    } 
    getData(): void { 
     ... 
    } 
} 

2)Caller.ts:

import { MyClass } from './MyClass'; 

export class Caller { 
    execute() { 
     let myClass: MyClass = new MyClass(); 
     myClass.render("content", "Hello World"); 
     myClass.getData(); 
    } 
} 

3)Main.ts:

import { Caller } from './Caller'; 

window.onload =() => { 
    let caller: Caller = new Caller(); 
    caller.execute(); 
}; 

4)HTML:

<script src="~/Scripts/MyClass.js"></script> 
<script src="~/Scripts/Caller.js"></script>> 
<script src="~/Scripts/Main.js"></script> 

5)tsconfig.json:

{ 
    "compilerOptions": { 
     "noImplicitAny": false, 
     "noEmitOnError": true, 
     "removeComments": false, 
     "sourceMap": true, 
     "target": "es5", 
     "outDir": "../Scripts", 
     "allowSyntheticDefaultImports": true, 
     "lib": [ "es2015", "dom" ], 
     "module": "commonjs" 
    }, 
    "exclude": [ 
     "node_modules", 
     "wwwroot" 
    ] 
} 

私は最後のステップは、いくつかのモジュールローダまたはモジュールバンドラを使用することであることを理解したよう。私はモジュールバンドラーRollup.jsを選びました。 Rollaup.jsは、私が書いたすべてのTypeScript(JavaScript)コードを含むバンドルファイルを生成するはずです。そうですか?

もしそうなら、私はRollup.jsをダウンロードし、MVC 5 Webアプリケーションのスクリプトサブフォルダには、すべて.ts、.d.ts、.js、およびその他のファイルがあります。 TypeScriptコードJQuery、DevExtreme、GoJS JavaScriptライブラリでも使用します。

はその後、私は、次のロールアップのコマンドを使用します。

rollup Main.js -o bundle.js -f cjs 

私はMain.jsファイルには、エントリポイントだったとロールアップが自動的にエクスポート/インポートの依存関係を解決し、ファイルbundle.js 1つの出力を作成することを理解しましたが、その

<script src="~/Scripts/bundle.js"></script> 

bundle.jsファイルが作成されますが、Main.jsファイルの内容を除いては何もありません:私は、HTMLコードでこのように使用することができます。ですから、このように私の申し立ては何も表示しません。

私がここに示したコードは、プレゼンテーションの目的であり、実際のコードはより複雑です。

どうしたのですか?

+0

その間、私はwebpackを使用してsingle bundle.jsファイルを作成する方法を理解しましたが、誰かがRollup.jsを手伝うことができる場合はこの投稿を残します。 – tesicg

答えて

関連する問題