Visual Studio 2015RCでASP.NET5をしてみようと思ったら, Bowerの設定ファイルでうまくIntelliSenseが動かず
何もできなくなったので, Bowerについて勉強してみました.
そもそもBowerとは
Bowerは, Webアプリにおけるフロントエンド向けのパッケージマネージャです.
.NETのNuGet的な奴って認識ですかね
ちなみにTwitter社が作ってるようです.
流行り方を見るにTwitter社のWebへの影響力がうかがえますね.
外部のパッケージを大量に使用することが当たり前の昨今フロントエンドもこういうのないと管理が大変で困りますね
またバージョン管理もしっかりできるのでASP.NET5の目指すside-by-sideな感じもこういうのがないと困りますね.
Bowerをインストールする
早速Bowerを普通に使いたいので, まずはインストールしましょう.
Bowerのインストールは, npmからするので先にNode.jsをインストールします.
Node.jsの説明は, 今回は割愛.
ちなみにWindows環境だとChocolateyを使うとコマンドラインから簡単に入れられます.
npm install -g bower
これでbowerが入るはずです
Bowerを使い始める
Bowerをインストールしたら使い始めるための準備をしましょう.
Bowerは, 依存関係などをすべてbower.jsonというjsonファイルに記述していきます.
そこでまず初めにbower.jsonを作ります.
bower init
このコマンドを使うと, いろいろnameやversionといったものをいろいろ聞かれます.
これは, 自作のパッケージを公開する際に使用するもので, 単純にパッケージ管理をしてアプリケーションにパッケージを組み込むだけの場合は,
特に必要にはならないんで, 公開しない場合は, 適当に入力します.
{
"name": "MySample",
"version": "0.0.0",
"authors": [
"hogehoge"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
適当に名前を入れてyesで進むとこんな感じになりました.
bower.jsonが作成できたら何かパッケージをインストールしてみましょう.
Bowerに登録されているパッケージは, 以下のコマンドで検索可能です
bower search <パッケージ名>
パッケージのインストールは, bower.jsonがあるフォルダ内で以下のコマンドです.
bower install <パッケージ名>
特定バージョンをインストールする場合は, 以下のようにパッケージ名#バージョンとしてinstallコマンドを実行します.
細かく#1.1.1のように指定してもいいですし, メジャーバージョンだけ指定して#1のようにすると, そのメジャーバージョンの中で一番新しいものがインストールされるようです.
bower install <パッケージ名>#<バージョン>
このコマンドを使って, たとえばbootstrapを入れたい場合
bower install bootstrap
とすると, bower.jsonのあるフォルダ内にbower_componentsといフォルダが生成され, その下にbootstrapなどのインストールしたパッケージがインストールされます.
パッケージをアンインストールする場合は, 以下のコマンドです.
bower uninstall <パッケージ名>
また, 単純にインストールをするだけだとbower.jsonに依存関係が追記されないため, jsonファイルだけ持っていってその場で復元といったことができません.
そういったことをしたい場合は,
bower install --save <パッケージ名>
とすると, bower.jsonにdependenciesという項目が追加され, その中にインストールしたパッケージの名前とバージョンのセットが追記されます.
dependenciesにパッケージが記述されている場合は,
Bowerが入っている環境にbower.jsonを持っていって
bower install
と入力するとdependenciesに記述されているパッケージがまとめてインストールされます.
また, dev環境のみに試験的にインストールしたいなどの状況は, よくあることかと思います.
その場合は,
bower install --save-dev <パッケージ名>
とするとdependenciesではなく, devDependenciesという項目がbower.jsonに追加され, その中に追記されます.
devDependenciesに記述されているパッケージは,
bower install --production <パッケージ名>
とするとインストールされなくなります.
bower.jsonに記述された依存関係をパッケージのアンインストールと一緒に取り除きたい場合は,
bower uninstall --save <パッケージ名>
とするとdependenciesの中身が
bower uninstall --save-dev <パッケージ名>
とするとdevDependenciesの中身が変更されます.
とりあえずこれだけ覚えれば, 何となくBowerが使えるようになるかと思います.
Bowerには, もっとたくさんいろいろな機能がありますがそれは, また今度
