HIDARI日記（右）

そのときどき興味ある技術を中心にだらだら書いてます。内容は個人の見解であり、所属する企業を代表するものではありません。

tscとlite-serverで作るシンプルなTypeScript開発環境

TypeScript JavaScript Dev

最近MacでカジュアルにTypeScriptを書いてブラウザで確認したいなってときに使っている環境です。 ぶっちゃけAngular2の 5 Min Quickstart で使われている方法ですが。 （なお、前提としてnode.jsをインストールしてnpmを使えるようにしておく必要があります。）

使用するツールはTypeScript(tsc)の他には lite-serverという開発用のhttpサーバだけです。 上記二つを使って、[TypeScript書く] > [自動ビルド] > [ブラウザの自動リロード]を実現していきます。

まず、実験用のディレクトリを作ってTypeScriptをインストールしておきましょう。

mkdir my-proj
cd my-proj
npm install typescript

これでTypeScriptをコンパイルするコマンドtscが使えるようになります。 適当に以下のような sample.ts を作って node_modules/.bin/tsc sample.ts を実行すると sample.js が出来ますね。

class Person {
    public Name:string;
    constructor(name:string) {
        this.Name = name;
    }
}

var me = new Person("Hidari");
document.body.innerHTML = me.Name;

さて、tscには -w オプションがあり、tsファイルの変更を検知してコンパイルを自動で行うことが出来ます。 これを行うために、まず tsconfig.json というファイルを sample.ts と同じ場所に作成し、以下の内容を記述します。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "rootDir": ".",
        "outDir": ".",
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

ファイルが作成できたら node_modules/.bin/tsc -w を実行してみましょう。 tsファイルの変更が監視されます。試しに sample.ts を変更してみてもいいと思います。

次にlite-server。これはnode.js上で動作する開発用のhttpサーバで、ファイルの変更を検知してブラウザで表示中のページを自動でリロードしてくれます。 npm install lite-server でインストール。

続いて適当に以下の様な index.html を作り、新しいターミナルでnode_modules/.bin/lite-server を実行します。 するとブラウザが開いてindex.htmlが表示され、同ファイルの変更監視が開始されます。

<!DOCTYPE html>
<html>
    <head>
        <title>sample</title>
    </head>
    <body>
        <script src="sample.js"></script>
    </body>
</html>

以上で終わりです。

これでTypeScriptを編集すると自動でコンパイルされ、ブラウザがリロードされ、結果が確認出来るようになりました。 ガッツリ開発するにはちょっと力不足ですが、雑に書くぶんには十分だと思います。

ではでは。