やりたいこと
app/
hoge.ts
foo.coffee
って構成があったら
hoge.tsから
var jQuery = require 'jquery'
var foo = require('./foo');
export class Hoge {}
とか
foo.coffeeから
hoge = require './hoge'
module.exports = class Foo
とかしたいですよね?もちろん外部モジュールも同梱した状態でコンパイルしたいですよね?
一応typescript-loaderあるんですが、typescript側からの require のトランスフォームに対応してないし、v1.1でコンパイラ高速化したことだし各種プラグインが対応するのはだいぶ時間かかると思うので、直接使うことにしました。
注意: これは2014/10/09の暫定的な対応なので後の世ではもっとまともになってることでしょう
方法
別ディレクトリで相対パスそのままにcoffee/typescriptともにコンパイルし、その後webpackでビルドする
つまり
app/
hoge.ts
foo.coffee
を、一旦
lib/
hoge.js
foo.js
にしてwebpackでビルドする。このディレクトリはgitignoreしてよさそうだしtempみたいな名前でも良い。
プロジェクトサンプル
mizchi-sandbox/webpack-ts-cs
多段ソースマップは面倒くさすぎるので一旦諦める。
typescriptのビルド(--watchモード)
$ tsc -w -m commonjs --target es5 --outDir lib app/app.ts
の、前に… このままだとtypescript側のrequire機構で参照が解決されてしまう(コンパイル時に消える)ので、node.d.tsをreferenceに追加するか declare var require:Function;
する必要があるので、適宜読み込んでください。
(今気づいたけどこれJxckさんだ)
coffeeのビルド(gulp)
coffee = require 'gulp-coffee'
gulp.task 'coffee', ->
gulp.src('./app/**/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('./lib'))
(coffee -o lib -c app/*/.coffee だとディレクトリの相対パスが保存されなかったので、仕方なくgulpタスクにした)
Webpackと監視
webpack_config =
output:
filename: 'all.js'
resolve:
extensions: ["", ".js"]
gulp.task 'webpack', ->
gulp.src('lib/initialize.js')
.pipe(webpack(webpack_config))
.pipe(gulp.dest('public'))
gulp.task 'watch', ['webpack'], ->
gulp.watch 'app/**/*.coffee', ['coffee']
gulp.watch 'lib/**/*.js', ['webpack']
gulp.task 'default', ['webpack']
とはいえサンプルプロジェクト見てくださいって感じがある。