私は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コードでこのように使用することができます。ですから、このように私の申し立ては何も表示しません。
私がここに示したコードは、プレゼンテーションの目的であり、実際のコードはより複雑です。
どうしたのですか?
その間、私はwebpackを使用してsingle bundle.jsファイルを作成する方法を理解しましたが、誰かがRollup.jsを手伝うことができる場合はこの投稿を残します。 – tesicg