タイガー!タイガー!じれったいぞー!(SE編)

AS400, Java, JavaEE, JSF等の開発、習慣など。日々の気づきをまとめたブログ(備忘録)

Bowerを試してみた

あるシステムを解析していたら、BowerとGruntが使われていることを知りました。
超簡単ではありますが、備忘録としてまとめておきます。

Bowerとは?

programming-world.net

Bower(バウアー)は、ウェブアプリケーションJavaScriptパッケージマネージャー(パッケージ管理システム)です。
Bowerをインストールすることで、React、Angular、jQueryなどのクライアントサイドで利用する JavaScriptパッケージのインストール補助やバージョン管理をしてくれます。

Bowerをインストール

  • npm環境が構築されている前提です。

npm install -g bower

> npm install -g bower
C:\Program Files (x86)\Nodist\bin\bower -> C:\Program Files (x86)\Nodist\bin\node_modules\bower\bin\bower
+ bower@1.8.13
added 1 package in 28.636s

> bower -v
1.8.13

初期化処理

プロジェクトのルート上で初期処理。

対話型で進めていくと、bower.json が作成されます。

bower init

> cd c:\bower_test

> bower init
? name bower_test
? description
? main file
? keywords
? authors tiger
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No                                                                                                          

{                                                                                                                
  name: 'bower_test',                                                                                            
  authors: [                                                                                                     
    'tiger'                                                                             
  ],                                                                                                             
  description: '',                                                                                               
  main: '',                                                                                                      
  license: 'MIT',                                                                                                
  homepage: '',                                                                                                  
  ignore: [                                                                                                      
    '**/.*',                                                                                                     
    'node_modules',                                                                                              
    'bower_components',                                                                                          
    'test',                                                                                                      
    'tests'                                                                                                      
  ]                                                                                                              
}   

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

qiita.com

上記サイトを参照にして、Modernizr, jQuery, normalize.css をインストールしてみました。

bower install modernizr jQuery normalize.css --save

> bower install modernizr jQuery normalize.css --save

bower normalize.css#^8.0.1      cached https://github.com/necolas/normalize.css.git#8.0.1
bower normalize.css#^8.0.1    validate 8.0.1 against https://github.com/necolas/normalize.css.git#^8.0.1
bower jQuery#^3.6.0             cached https://github.com/jquery/jquery.git#3.6.0
bower jQuery#^3.6.0           validate 3.6.0 against https://github.com/jquery/jquery.git#^3.6.0
bower modernizr#^3.11.8         cached https://github.com/Modernizr/Modernizr.git#3.11.8
bower modernizr#^3.11.8       validate 3.11.8 against https://github.com/Modernizr/Modernizr.git#^3.11.8
bower normalize.css#*           cached https://github.com/necolas/normalize.css.git#8.0.1
bower normalize.css#*         validate 8.0.1 against https://github.com/necolas/normalize.css.git#*
bower modernizr#*               cached https://github.com/Modernizr/Modernizr.git#3.11.8
bower modernizr#*             validate 3.11.8 against https://github.com/Modernizr/Modernizr.git#*
bower jQuery#*                  cached https://github.com/jquery/jquery.git#3.6.0
bower jQuery#*                validate 3.6.0 against https://github.com/jquery/jquery.git#*
bower normalize.css#^8.0.1     install normalize.css#8.0.1
bower modernizr#^3.11.8        install modernizr#3.11.8
bower jQuery#^3.6.0            install jQuery#3.6.0

normalize.css#8.0.1 bower_components\normalize.css

modernizr#3.11.8 bower_components\modernizr

jQuery#3.6.0 bower_components\jQuery

結果

bower_componentsフォルダが作成され、各ライブラリ、ファイルがその中に配備されました。

/bower_test
├──bower.json
└──/bower_components
    ├──/jQuery
    ├──/modernizr
    └──normalize.css

次に、bower.jsonファイルを確認してみます。

{
  "name": "bower_test",
  "authors": [
    "tiger"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "modernizr": "^3.11.8",
    "jQuery": "^3.6.0",
    "normalize.css": "^8.0.1"
  }
}

--save オプションありなので、dependencies(依存)に追記されています。

パッケージの利用

フォルダ構成を気にしなければ、下記の指定で参照可能です。

<script src="/bower_components/jQuery/dist/jquery.min.js"></script>

Gruntを併用すれば、レイアウトを変更ができるようです。

grunt-bower-taskというタスクが必要とのこと。

kyohei8.hatenablog.com

まとめ

JavaScriptの開発環境の変化が速すぎて、正直ついて行けていませんが、

こういった時代もあったということを認識して、次のスキルアップにつなげていきたいと思っています。