Aurelia #3:Aureliaでサードパーティのライブラリが使いたい!の巻

どーも!どーもどーも!zkymです。
今回はAureliaへのサードパーティ製ライブラリの導入方法について見ていきたいと思います。

公式ドキュメントに沿っているので、そちらも一度確認することをおすすめします。ちなみにAurelia CLIのドキュメントとしてこの内容が書かれているのですが、本記事の執筆時点ではこの手順にCLIは登場しません。将来的(もうすぐらしいっす)にはここで説明されてる内容がCLIで自動でできるようになっちゃうよーってことなんで、とりあえず手動の手段が書かれているのだと思います。

ではいきましょう!

まずは、使いたいライブラリのインストール

サードパーティのライブラリを使いたいなら、まずはnpm installしちゃいなよって説明されてます。で、プロジェクトにライブラリがインストールできたらaurelia_project/aurelia.jsonファイルをいじいじしていきます。いじる場所はbuild.bundles.dependenciesセクションです。ライブラリをバンドルするにあたり、どういうライブラリだよーってことをCLIに教えてあげる設定を書くわけですね!

"dependencies": [
  {
    "name": "library-name",
    "path": "../node_modules/library-name/dist/library-name",
    "main": "library-name",
    "env": "dev" & "stage" & "prod",
    "deps": ["dependent-library-name"],
    "exports": "global-variable-exported-from-this-library",
    "resources": ["resource-file-name"]
  }
]
  • name・・・ライブラリの名前です。ソースコード中でインポートするときに使う名前です。
  • path・・・ライブラリが1ファイルのみで構成されている場合はそのファイルへのパスです。srcディレクトリからの相対パスを指定します。.jsが自動で付加されるから拡張子はつけないでねってことなんで、注意しましょー!ライブラリが複数ファイルで構成されている場合は、そのファイルが配置されているディレクトリへのパスを指定します。
  • main・・・pathで指定したディレクトリからライブラリのエントリポイントになるファイルへの相対パス。.jsが自動で付加されるから拡張子はつけないでねってことなんで、注意しましょー!
  • env・・・ライブラリをバンドルの成果物に含める環境を指定します。devstageprodが指定できます。例えばdevを指定した場合は、ビルドするときの環境はdevのときのみそのライブラリが含まれるようになります。複数の環境を指定したい場合はdev & stageのように&でつなげます。
  • deps・・・依存ライブラリをここに列挙します。たとえばjQueryのプラグインのようなグローバルなスクリプトや変数が事前に読み込まれていないと動作しないようなライブラリはここで依存対象を指定しておきます。
  • exports・・・ライブラリからエクスポートしたいグローバル変数を指定します。例えばjQueryの$とかに使います。
  • resources・・・ライブラリのリソースファイルを列挙します。pathで指定したディレクトリからの相対パスで指定します。こいつらにはファイル拡張子が必要ってことなんで注意してください!

具体的な書き方を見ていきましょー!

1ファイルのみで構成されているライブラリの場合(A Single-File Module)

"dependencies": [
  {
    "name": "library-name",
    "path": "../node_modules/library-name/dist/library-name"
  }
]

もし、そのライブラリのpackage.jsonファイルのmainセクションが上のpathで指定したファイルを指している場合は、下のようにライブラリの名前を書くだけでもOKです。

"dependencies": [
  "library-name"
]

複数ファイルで構成されたライブラリの場合(A CommonJS Package)

以下は、aurelia-testingの例です。テスト用のモジュールなんで、dev環境にのみ含まれるようになってますね。

"dependencies": [
  {
    "name": "aurelia-testing",
    "path": "../node_modules/aurelia-testing/dist/amd",
    "main": "aurelia-testing",
    "env": "dev"
  }
]

前もってなにか読み込んどく必要があるライブラリの場合(A Legacy Library)

Bootstrapを導入する例です。前もってjQueryを読み込む必要があるので、depsに指定してありますね。で、Bootstrapで機能追加されたjQueryオブジェクトをグローバルに参照できるようにexportsに指定してあります。ただ、このexportsに指定しなくてもjQueryを含めてる時点で参照できるし、Bootstrapを導入すれば拡張機能もちゃんと動くんで、具体的に何に作用しているのか不明です。ただの作法!?イヤソンナハズハ(+_+)わかり次第追記したいと思います。

"dependencies": [
  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  }
]

プラスアルファでBootstrapは専用のCSSが必要になるんで、resourcesでそのCSSファイルを指定してあります。CSSファイルはこんなカンジ<require from="bootstrap/css/bootstrap.css"></require>でビューで読み込めます。<require from="nameで設定したライブラリ名/resourcesで設定したファイルへの相対パス"></require>を記述してやればOKです。

ロードする仕組みがないライブラリの場合(A Very Stubborn Legacy Library)

npmで管理できないようなライブラリの場合は、build.bundles.dependenciesではなくbuild.bundles.prependに記述します。Aureliaのインストール直後だとbluebirdRequireJSがprependに設定されてます。(bluebirdはnpmでインストールされてますが、すべてに先駆けて読み込んでおく必要があるので、こうなってます。要は<script src="node_modules/bluebird/js/browser/bluebird.core.js"></script>ってやってるようなもんですね。)

{
  "name": "vendor-bundle.js",
  "prepend": [
    "node_modules/bluebird/js/browser/bluebird.core.js",
    "scripts/require.js"
  ],
  "dependencies": [
    "aurelia-binding",
    "aurelia-bootstrapper",
    "aurelia-dependency-injection",
    "aurelia-event-aggregator",
    "aurelia-framework"
    ・・・略・・・
  ]
}

まとめ

Aureliaでのサードパーティのライブラリの導入方法について見ていきましたが、いかかだったでしょうか?最近は既存のシステムと連携して自動で色々やってくれるツールが多いんで、けっこうメンドイように感じられるかもしれませんね。まぁそのうちこの辺は自動化されるってことなんで、首を長くして待っておきたいと思います。

アルファ版やベータ版のころはgulpでビルド・バンドルして、パッケージ管理はjspmを使ってたんですが、Aurelia CLIベースでプロジェクトを作成していく場合はnpmで管理して、CLIでビルド・バンドルってなるんですね。もちろん今でもjspmを使う方法webpack使う方法もあるんで、興味のある方はドキュメントを参照してください。なるべく公式が用意してくれてるヤツを使いたい派としてはCLI(つっても中身gulpだったりしますが)がどんどん進化していって欲しいですねー(*´ω`)

次回はCSSファイルの読み込み方を見ていきたいと思います。では、バイバイのバーイ!