Twitter Facebook github

Laravel の Elixir で TypeScript を使う

こんばんは。つい最近までコートを羽織っていたと思えば、もう随分暖かくなりましたね。

数日前から趣味で新しいウェブアプリを書いていて、折角なので勉強がてら新たにPHPフレームワークのLaravelを採用することにしました。噂には聞いていましたが確かに素晴らしい出来で、今後PHPのプロジェクトでは第一候補としたくなるようなものでした。

検証環境

  • Laravel framework v5.2.31
    • Elixir v3.x

次の3つはグローバルインストール済み

  • TypeScript v1.9.0
  • typings v0.8.1
  • gulp v3.9.1

Elixir でも TypeScript 使いたい!

Laravel には、フロントエンドの開発を支援する Elixir という gulp のラッパーがあります。デフォルトでSassやLessのコンパイル、JSのcombine&minifyとかできるすごいやつ。でもTypeScriptはサポートしてくれないので、自力でがんばる必要があります。(CoffeeScriptは公式サポート対象なんてズルい!)

前提として、コンパイルしたいファイルは次の3つです。

  • /resources/assets/sass/app.scss
    → /public/css/app.css

  • /resources/assets/typescript/app.ts と sub.ts
    → subをrequireした単一ファイルで /public/js/app.js

TypeScriptファイルの中身は次の通りです。

まずはうまくいった方法を書いて、ダメだった方法も備忘録として後ろに書きます。

laravel-elixir-webpack を使う

またWebPackです、ごめんなさい。でもやっぱり自分に慣れてるものを使うのが一番ですよ・・・たぶん。

npmで、ElixirでWebPackを扱えるように laravel-elixir-webpack を、WebPackでTypeScriptを扱うために ts-loader をインストールします。(ts-loaderについは過去記事を参照)

次に gulpfile.js を編集して、Elixirで ts-loader のモジュールが入ったWebPackを呼び出します。

mix.webpack の第一引数には /resources/assets/js からの相対パスを記載するため、上の書き方になっています。

これだけで実行すると、ビルドすべきでない所まで内部的に参照してエラーを出してくれるので、TypeScriptのコンパイル設定を変更して、ビルドしないディレクトリを明示的に指定するようにします。
プロジェクトルートに tsconfig.json が作られていない場合は tsc --init コマンドで作成してください。

tsconfig.json の exclude に3つルールを追加します。

typings は型定義マネージャーの typings を使っている場合のみ必要で、記述しないと大量の error TS2300: Duplicate identifier が出力されます。 typings/ 下にある main がサーバー側、 browser がブラウザ向けなので、今回はbrowserの方を読ませるように設定します。

gulp でうまくビルドできるか試してみます。

これで Laravel でも TypeScript 使って快適に開発を進められそうです!

失敗談: elixir-typescript

ググって最初に出てきたのがこの方法なので、これで試してみてました。
結果として、少しにハマりつつも、単一のTypeScriptをそのままビルドする目的は達成しました。

コードとしては、 elixier-typescript をnpmでインストールして、次のgulpfileで実行。

結果、これでも正しくコンパイルされたjsが出力されます。ただし、これはrequire諸々の依存関係などを解決してくれておらず、ビルドされたjsには素の require が残ってしまい、ブラウザから実行すると怒られてしまいます。

こういったのを解決してくれるのが Browserify という認識で、コメントアウトした行のように 「JSにビルド」→「Browserifyでブラウザ向けに変換」 の手順でうまくいくんだろう…と試したところ全然ダメでした。ビルド自体はエラー無く通るのですが、結局ブラウザで実行するとエラーになるのです。

この辺、調べてもどうにも自力で解決するのが難しそうで(主に Browserify が難解で)、それならばと WebPack に逃げることにしました。Browserifyの達人にとっては余裕なのでしょうか・・・。

余談: Browsersync と連携する

以前 Browsersync については紹介しましたが、 Elixir ではデフォルトでサポートされています。 WebPackの中に書いてもうまく動きそうではあります(未検証)が、私はElixirの機能で呼び出すようにして使っています。

前提として browser-sync をグローバルインストールしていて、今回は Vagrant 内で開発をしているため、 proxy にVagrantのネットワークアドレスを記載してプロキシさせています。

これで glup watch で起動しておけば、ファイル変更で自動的にブラウザがリロードされます。快適になりますよ!

所感

ご無沙汰してます。
最近、やるべきことも、勉強したいことも多くて、エントリを書く時間を捻出できずにいました。。書きたいネタはたくさんあるので、今月からリハビリがてら書いていきます。

コメントを残す

メールアドレスが公開されることはありません。