TypeScriptでもwebpackでcommonjs requireしたい！

やりたいこと

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']

とはいえサンプルプロジェクト見てくださいって感じがある。