QuickStart

QuickStartというのは、名前がややこしいですがSpotify社が出してるツールのことです。

このツールはCommonJSで書いたJavaScriptのモジュールの依存関係を解決してビルドしたり、ローダとして使えるものです。

前者のビルドする機能は簡単にいえばBrowserifyです。

QuickStartもBrowserifyと同じく、nodeのcoreモジュール等をブラウザで使える様になってます。(CoreモジュールはBrowserifyが使ってるものと同じshimが使われてる)

もう一つのローダとして使えるのがこのQuickStartの面白い所なんじゃないかなと思います。

この記事では、適当に試して見たQuickStartの使い方について見ていきます。

サンプルプロジェクトは以下に置いてあります。

ビルド

ビルドする場合はBroserifyと同じようにentry point(始まりとなるjsファイル)を指定してビルドするだけです。

Entry Point にかかれているように、デフォルトでpackage.jsonのmainが自動的にentry pointとなります(オプションで指定も出来る)

そのため、以下のように書けばビルド出来ます。

quickstart > bundle.js
# ==
quickstart --main index.js > bundle.js

azu/quickstart-example のサンプルプロジェクトだと、
browserifyとquickstartそれぞれのビルドが以下のように出来るようにしてあります。

npm run build-q # build with quickstart
npm run build-b # build with browserify

ビルドオプション

command line interfaceで幾つかビルドオプションが設定できます。(オプションファイルを用意して指定もできる)

  • --compress で minify
  • --source-map でsourcemapの生成(browserifyの-d)
  • --ast で JavaScript ASTを出力
  • --transforms ASTベースの変換プラグインを指定する(browserifyの-t)

QuickStartのtransformsで指定して使うプラグインは SpiderMonkey AST based Plugin system という事で、ASTを変換するようなモジュールを指定して使います。

また、--ast というオプションをつけてビルドすると、依存してるモジュールを含めたコードのJavaScript ASTを生成してくれます。

この辺何か面白いことが出来そうだなーと思いました。

JavaScript ASTについては以下を見ておいて下さい。

ローダ

これが、QuickStartのメイン機能だと思っているのですが、
QuickStartは自身をローダとして使うことが出来ます。

どういう事かというと、以下のURLにChromeでアクセスしてChrome Dev Toolsを開いて見るとrequireで読み込むモジュールを読み込んでいる様子が分かると思います。(このローダはローカルで使うことを想定してるはずなので、プロダクトはビルドしてものを使うと思います)

https://azu.github.io//quickstart-example/

ワザといらないものも大量に読み込んでるのでかなり遅いですが…

gif

ローダとして使う場合は--selfオプションを指定します。

quickstart --self > bundle.js

とやると、ローダとしてのスクリプトが出力されます。

そして実際にアクセスした時に、package.jsonのmain等を解析して動的にrequireで使ってるモジュールを解決していきます。(AMDみたいに動的ロードじゃなくて最初のフェーズで全部やるはず)

ローダとSource Map

ローダとして使った場合、Source Mapの生成も動的に行います。(自動的に有効になるようです)

そのため、ローダとして使った場合も元々のモジュールに対してブレークポイントを打ってデバッグしたり出来ます。

これは Source Mapを扱う関連ライブラリのまとめ | Web scratch でも書いてましたが、動的にSource Mapを生成してsourceMappingURLにBase64エンコードしたものをいれるようです。

サンプルプロジェクトでは、QuickStartとBroserifyで大体似たような事すると以下のようになるはず(ローダとして使えば、監視してビルドするの代わりになる)

npm run quickstart
npm run watch # == broserify -d

ローダとして使った時、コードを変更した場合でもビルドをしなくてもリロードするだけで良くなります。(これが名前の由来なのかな?)

  • ローダとして使う ≒ RequireJSを使った動的ロード
  • Browserifyのようにビルドして使う ≒ r.jsでのビルド

というイメージが近い感じがします。

まとめ

CommonJSで書いたものをビルドしてブラウザで実行出来るようにビルドするツールはmichaelficarra/commonjs-everywhereやBrowserify等があります。

QuickStart はビルド機能とローダとして使える機能があります。

AMDのように初めてアクセスした時にロードする遅延ロードはCommonJSの仕様的に難しそうですが、ローダとして使うことでビルドする必要なく開発を続けられるようになっています。

transforms系の機能に依存しなければ、BrowserifyとQuickStartどちらでもビルド出来るものを作るのはそこまで難しくない気がします。

名前がわかりにくいので改名して欲しいです。

ちょっと触った感想は以上です。