Twitter Facebook github

Posts Tagged with “npm”

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は公式サポート対象なんてズルい!)

Read More »

WebPackでnodeランタイム向けにビルドする

前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。

当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。

やりたかったこと

  • TypeScriptでsocket.ioを使ったソケットサーバーを書きたい
  • 変更検知でビルド自動化したい
  • glup/grunt抜きでWebPackでやりたい

環境

  • Mac OS X El Capitan
  • node.js v5.7.1 / npm v3.6.0
  • TypeScript v1.9.0-dev.20160312
  • typings v0.7.9
  • webpack v1.12.14

上3つのモジュールは npm でグローバルインストール済み。

  • ts-loader@0.8.1

WebPackでTypeScriptをビルドするためのローダーをローカルインストールしています。

忙しい人のために

先に結論を書くと、nodeランタイム用にWebPackを使ってビルドするとき、単に node_modules をexcludeするだけではダメで、代わりに webpack-node-externals を使いましょう、という話。

Read More »

WebPack-Dev-ServerからBrowsersyncに乗り換えた

前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。

WebPack-Dev-Server を捨てた理由

大きく次の問題がありました。

  • Scssで@importされているファイルを変更しても、正しくビルドされない
    • TypeScriptのimportは問題ない
  • ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない
  • ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない

特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。

この3つの問題をすべて解決できるのが WebPack + Browsersync です。

Browsersyncとは何か

Browsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。

タスクランナーと合わせてLive Reloadの機能を提供してくれるnpmモジュールは他にもありますが、Browsersyncの特徴の一つはそれらに依存せず、単体で動作する点が挙げられるでしょう。例えばgulpであればgulp-webserver、前回のwebpackであればDev-Serverなどがありますが、これらと違い完全に独立したモジュールとなっています。

また大きな特徴として、複数環境でのデバッグ容易性向上に関する機能が多く含まれているという点です。

例えばFireFoxとChromeで同じページを開いておきながら、片方のブラウザでページ内をクリックしたとき、もう片方のブラウザでも同じ箇所へのクリックイベントを実行することが可能です。スクロールも同期することが可能なので、複数のブラウザを開いていても常に同じ箇所を表示していることになり、同時デバッグやブラウザ間の表示比較などがとても容易に実現できるはずです。(今回はこの機能については触れていません。)

Read More »