M12i.

学術書・マンガ・アニメ・映画の消費活動とプログラミングについて

TypeScript x Jasmine構成のnpmパッケージ・プロジェクトを試作

TypeScript x Jasmine構成のnpmパッケージ・プロジェクトを試作してみました。まずはNode.jsランタイムで利用するモジュールのためのパッケージです。これをもとに理屈上Browserifyなどによるバンドル化にも対応できるはずですが、まあそれはそれでいろいろありそうなので、今回はスコープアウトです。Node.jsやクライアントサイドMVCに関する書籍を読んでいても思うことですが、ECMAScript言語族(JavaScript、TypeScript、etc...)においてはモジュール・システムおよび依存性解決はとても重たいテーマです。

プロジェクト

ファイルセットは例によってGitHubにて公開しています。
「TypeScript x Jasmine構成のnpmパッケージ・プロジェクト」と言いましたが、もう少し細かく言うと、次の要件を満たす開発環境を構築するために作成しました:

  • npmによるパッケージ管理を行う
  • gulpによるビルド・タスク管理を行う
  • Visual StudioなどのIDEでなくAtomでコーディングできる構成にする
  • TypeScriptによるコーディングを行う
  • 依存パッケージのAPIへのアクセスは*.d.tsファイルが提供する型情報を通じて行う
  • Jasmineによる単体テスト作成を行う
  • 配布用ファイルには*.min.js*.d.ts*.min.js.mapを含める
  • メイン・コードにJasmineのAPIを利用するコードが絶対に紛れ込まないようにする

ビルド方法

開発環境にまだnpmgulp-cliがインストールされていないようであればインストールします。

その上でプロジェクトのルートディレクトリにてnpm installを実行すると、package.jsonの記述内容に基づいて依存性パッケージがダウンロードされます。

その後、次の各種コマンドを実行することでビルドを行うことができます:

コマンド 説明
gulp build main/配下のTypeScriptコードをトランスパイルし、圧縮・難読化(uglify)した上で、dist/配下にファイル出力します。このときメインの成果物である*.min.jsとともに*.d.ts*.min.js.mapも出力されます。
gulp test main/配下のTypeScriptコードとともにtest/配下の同コードもトランスパイルした上で、*.spec.jsを対象にしてJasmineテスト・ドライバーを実行します。圧縮・難読化やソースマップの生成は行いません。
gulp clean ビルド・タスクにより生成されたファイルをすべて削除します。

コーディング

開発環境にまだAtomがインストールされていないようであればインストールします。 AtomにはAtom TypeScriptパッケージをインストールしておきます。

ビルド方法のところで説明したnpm installまでが完了したら、プロジェクトのディレクトリをAtomでオープンします。 所定のディレクトmain/srctest/srcに格納されたTypeScriptファイルを編集し保存すると、自動的にトランスパイが行われて{main|test}/src/generated配下に*.jsファイルが生成されます。

テストのコードからメインのコードをインポートする場合は import ... from '../../main/src/(filename)'形式で記述します。

ファイル構成

├── LICENSE
├── README.md
├── dist                    ... gulp buildの成果物が格納されるディレクトリ
├── gulpfile.js             ... gulp.jsタスクランナーのためのタスク定義ファイル
├── main                    ... メインのコードと設定情報を格納するディレクトリ
│   ├── generated           ... トランスパイルの成果物が格納されるディレクトリ
│   ├── src
│   │   └── example.ts      ... メインのコード(の例)
│   └── tsconfig.json       ... メイン固有の`tsc`オプション
├── node_modules            ... このパッケージの依存性パッケージが格納されるディレクトリ
├── package.json            ... このパッケージのメタ情報
├── test                    ... テストのコードと設定情報を格納するディレクトリ
│   ├── generated           ... トランスパイルの成果物が格納されるディレクトリ
│   ├── src
│   │   └── example.spec.ts ... テストのコード(の例)
│   └── tsconfig.json       ... テスト固有の`tsc`オプション
└── tsconfig.json           ... メインとテストに共通する`tsc`オプション