LearnGetting Started with Bower

There are now more libraries and framework available for front-end development than ever ever. 1 つのプロジェクトに 5 つ以上のこれらのライブラリが関与していることも珍しくありません。 しかし、これらすべてのライブラリを追跡し、それらが最新であることを確認することは、厄介なことです。 Bower は、アプリケーションのフロントエンドの依存関係をすべて簡単に管理できるパッケージ マネージャーです。

このブログの投稿では、Bower を使用して起動し実行する方法を学習する予定です。 Bower コマンドライン ユーティリティのインストールから始めて、パッケージの管理に利用できるさまざまなコマンドについて学びます。

始めましょう！

Bowerのインストール

Bower は Node パッケージマネージャーである npm を使用してインストールすることができます。 npm がまだインストールされていない場合は、Node.js ウェブサイトに移動して、あなたのシステムに関連する Node.js のコピーをダウンロードします。 npm プログラムは、Node.js のインストールに含まれています。

npm をインストールしたら、ターミナル（またはコマンドプロンプト）を開き、次のコマンドを入力します：

npm install -g bower

これにより、Bower がシステム上にグローバルにインストールされます。

Bower がインストールされたので、パッケージを管理するために使用されるコマンドを見始めることができます。

パッケージを見つける

Bowerパッケージを見つけるには、2つの異なった方法があります。 オンラインコンポーネントディレクトリを使用するか、コマンドラインユーティリティを使用するかです。

コマンドラインでパッケージを検索するには、searchコマンドを使用します。

bower search <query>

たとえば、単語 ‘jquery’ を含むパッケージを検索するには、次のようにします：

bower search jquery

このコマンドは、多数の結果を返します。

パッケージのインストール

プロジェクトに新しい Bower パッケージを追加するには、installコマンドを使用します。

bower install <package>

パッケージ名を使用するのと同様に、以下のいずれかを指定してパッケージをインストールすることもできます:

• git://github.com/components/jquery.git
• などの Git endpoint、
• ローカル Git リポジトリへのパス、components/jqueryなどの省略形 endpoint. Bower は GitHub が使用されていると仮定します。その場合、エンドポイントはリポジトリ URL の github.com の後の部分です。
• zip または tar ファイルへの URL。

パッケージ名の後にシャープ記号 (#) を付け、その後にバージョン番号を付けると、特定のバージョンのパッケージをインストールできます。

bower install <package>#<version>

インストールしたパッケージは、bower_components ディレクトリに配置されます。 これは、bowerプログラムを実行したフォルダーに作成されます。

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.js
    • jquery.js
    • jquery_components
      • jquery.js
      • jquery.js>
        jquery.js>
        • …
      • modernizr
        • modernizr.js
        • …

      一度インストールしたら、単に HTML マークアップに <script> または <link> タグを追加するだけでパッケージを使用できるのです。 Bower パッケージは最も一般的には JavaScript ファイルを含みますが、CSS や画像も含むことができます。

      <script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

      Installing Packages Using a bower.json File

      プロジェクト内で複数のパッケージを使用している場合、これらのパッケージを bower.json ファイルでリストすることが良いアイデアであることがよくあります。 これにより、1 つのコマンドで複数のパッケージをインストールおよび更新できるようになります。

      { "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

      上の簡単な例では、依存関係のリストと同様にプロジェクトに関するいくつかの情報を定義した bower.json ファイルを示しました。 bower.json ファイルは、実際には Bower パッケージを定義するために使用されるので、実質的には、アプリケーションのすべての依存関係を含む独自のパッケージを作成しています。

      この例で使用されているプロパティを以下に説明します。

      • name – アプリケーション/パッケージの名前。 上記の例のように、これらのパッケージのバージョン番号をそれぞれ指定する必要があります。 latest を指定すると、Bower はパッケージの最新リリースをインストールします。
      • private – このプロパティを true に設定すると、パッケージを非公開にしたい、将来的にレジストリに追加したくないということを意味します。

      bower.json ファイルをセットアップしたら、bower install コマンドを実行するだけで、指定したすべてのパッケージがインストールできます。

      Bower には、プロジェクト用の bower.json ファイルを作成するのに役立つ便利なユーティリティがあります。 プロジェクトのルートで bower init コマンドを実行すると、ファイルを作成するための対話型プログラムが起動します。

      注意: bower.json ファイルに追加できるプロパティの完全なリストは、仕様を確認してください。

      Listing Installed Packages

      list コマンドを使用して、インストールされているパッケージを簡単に確認できます。 Bower は、各パッケージの新しいバージョンが利用可能かどうかのチェックも行うことに注意してください。

      パッケージの更新

      パッケージの更新は非常に簡単です。 もし bower.json ファイルを使用したなら、単純な update コマンドを実行して、一度にすべてのパッケージを更新することができます。

      bower update

      個々のパッケージを更新するには、再び update コマンドを使用し、今度は更新したいパッケージの名前を指定します。

      bower update <package>

      パッケージのアンインストール

      パッケージを削除するには、uninstallコマンドに続けて削除したいパッケージの名前を指定します。 長い間、フロントエンド開発者は RubyGems のようなプロジェクトを羨望のまなざしで見てきました。 Bower は私たちにそのツールを提供してくれました。 より多くの素晴らしいライブラリがウェブアプリケーションの中で一般的になるにつれて、プロジェクトの複雑さは必然的に増していきます。 Bower はこの複雑さを管理する方法を提供してくれます。

      Useful Links

      • Bower
      • Bower GitHub Repository
      • Bower Component Directory
      • bower
      • code
      • javascript
      • web app