Aurelia CLI で作成したプロジェクトに linq.js を追加する #JavaScript

トラップに引っかかったので残しておきます。

Aurelia にクライアントライブラリを追加する方法

Aurelia CLI で作成したプロジェクトにクライアントライブラリを追加する場合、npm でインストールした後に aurelia_project/aurelia.json に追記する必要があります。追記することで scripts/vender-bundle.js に含められ、プログラムで利用できるようになります。

クライアントライブラリの仕様に応じた書き方がありますので、まずこちらを紹介します。

単一ファイルのモジュールを追加する方法

単一の CommonJS または AMD 形式ファイルを追加する場合はこのように書きます。

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

name - プログラムにインポートする際の名前です。
path - ライブラリのファイル自体のファイルパスです。 .js は自動的に付与されるので書かないようにしてください。

CommonJS パッケージを追加する書き方

複数のモジュールファイルからなるライブラリの場合、ディレクトリとメインモジュールを指定します。

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

古いタイプのライブラリを追加する書き方

bootstrap は jQuery がグローバルに読み込まれていることを前提にロードされる、古いタイプのライブラリです。これを追加するには以下のように書きます。

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

追加リソースを含めた書き方

bootstrap は JavaScript ライブラリだけでなく、CSS を含めた UI フレームワークです。CSS を読み込まなければ意味がないので、追加リソースとして記述することができます。

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

resources 配列を追加しました。ここに追加したいファイルを記述することでバンドルに含めることができます。ここではファイルの拡張子まで含めてください。

この方法で追加した CSS ファイルは、 View で require されるテキストリソースとしてバンドルされます。つまり View で　require しないと有効にはなりませんので、 <require from="bootstrap/css/bootstrap.css"></require> と書いてビューにロードさせてください。この際のモジュール名(bootstrap)は name プロパティに設定したものが使われます。

linq.js のモジュール名は `linq` ではなく `linqjs`

結論として linq.js を追加するには以下のように記述する必要がありました。

"dependencies": [
  {
    "name": "linqjs",
    "path": "../node_modules/linq",
    "main": "linq.min"
  }
]

これをプログラムで import するにはこのように書きます。

import Enumerable from 'linqjs'

Enumerable.range(1, 5)...

今までは import Enumerable from 'linq' で読み込めていたため、かなりはまってしまいました。これは linq.js の AMD モジュール定義の仕様によるものです。
対象コード: https://github.com/mihaifm/linq/blob/master/linq.js#L3009

出典・参考情報

Adding Client Libraries to Your Project / Aurelia Docs

Aurelia CLI で作成したプロジェクトに linq.js を追加する