ASP.NET CoreでTypeScriptとwebpackとRxJS

asp.net-core rxjs typescript visual-studio webpack

前回の続きでもう少しします。ASP.NET Core + TypeScript + webpackの環境にRxJSを導入してみます。

ichiroku11.hatenablog.jp

実のところ前回のエントリは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を試せる環境になったので目標達成です。