Edited at

TypeScriptとbrowserifyを併用する

More than 3 years have passed since last update.

どちらもそれほどよくわかっていません。

とりあえず動くところまで持っていくのが大変でした。

sourcemapとかは全然考慮していません。

もっといい方法があれば教えてください。


方針


  • TypeScriptでもnpm使いたい。

  • TypeScriptのimport, exportの挙動が今ひとつしっくりこなかったし、babelに乗り換えるかもしれないのでES6 modulesを使う。

  • 基本的にTypeScriptは型チェックだけをやっててほしい。

  • いきなりtsifyを使ってハマるのは避けたく、まずはCLIから直で叩く。

  • TypeScript 1.5 alpha前提


やったこと


reference pathとimportは両方書く

/// <reference path="./lib/student" />

/// <reference path="../typings/vue/vue.d.ts" />

import Student from "./lib/student";
import Vue = require("vue");

コンパイラのエラーを消すのに、reference pathは必須みたい。

requireするパッケージに関しては、dtsmを使ってd.tsを入れておく。


classはexport default

こうしないとロードできなかった。

defaultじゃなくてもいい方法ないかなぁ。

export default class Student{

//
}


TypeScriptの出力は、browserifyに食わせやすい形で出す

例えば、tscのオプションは下記のように。

tsc src/main.ts --noImplicitAny --module commonjs --outDir build

--module commonjsしておくと、ES6のimport文をrequireの形に変換してくれる。

そうすれば、browserifyが解決してくれる。

また、--outDirを指定しているのは、ソースディレクトリを汚したくなかったのと、

browserifyに依存関係を解決させるため。

(tscにconcatさせる--outオプションも試したが、なぜか出力が空になってしまった。)


リポジトリ

https://github.com/hashrock-sandbox/ts-browserify-example