ASP.NET CoreでTypeScriptとwebpackとRxJS
前回の続きでもう少しします。ASP.NET Core + TypeScript + webpackの環境にRxJSを導入してみます。
実のところ前回のエントリはTypeScriptでRxJSを試したくなったのがきっかけで、今回が本当の目的だったりします。
npmでRxJSをインストール
まずnpmを使ってRxJSをインストールしましょう。package.jsonで@reactivex/rxjs
をインストールするように指定します。
{ "version": "1.0.0", "name": "asp.net", "private": true, "dependencies": { "@reactivex/rxjs": "5.5.6" }, "devDependencies": { "webpack": "3.10.0", "typescript": "2.6.2", "ts-loader": "3.2.0" } }
app.tsを書き換える
app.tsでRx.ObservableクラスをインポートしてRxJSを試すコードを書きます。
// app.ts // Rx.Observableをインポート import { Observable } from "@reactivex/rxjs"; // lib.tsのGreeterクラスをインポート import { Greeter } from "./lib"; // あいさつする Observable.of("world") .subscribe(message => alert(Greeter.greet(message)));
モジュールをインポートするには、モジュール名だけを指定する方法とパスを指定する方法があるみたいです。
tsconfig.jsを修正する
このままではビルドエラーになるので、tsconfig.jsを修正しましょう。コンパイラがnode_modulesフォルダ内のライブラリを参照できるように、"moduleResolution": "node"
を追記しています。またRxJSがES2015の機能を使っているようなので、"lib": [ "es5", "es2015", "dom" ]
も追記しています。
{ "compileOnSave": true, "compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "module": "es2015", // コンパイラが"node_modules"フォルダを参照するみたい "moduleResolution": "node", // RxJSで"es2015"を利用しているみたい "lib": [ "es5", "es2015", "dom" ] }, "exclude": [ "node_modules", "wwwroot" ] }
これでビルドが通るはず。デバッグ実行して世界にあいさつしましょう。まだまだわからないことばかりですが、とりあえずRxJSを試せる環境になったので目標達成です。