あるシステムを解析していたら、BowerとGruntが使われていることを知りました。
超簡単ではありますが、備忘録としてまとめておきます。
Bowerとは?
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' ] }
パッケージをインストール
上記サイトを参照にして、Modernizr, jQuery, normalize.css をインストールしてみました。
> 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というタスクが必要とのこと。
まとめ
JavaScriptの開発環境の変化が速すぎて、正直ついて行けていませんが、
こういった時代もあったということを認識して、次のスキルアップにつなげていきたいと思っています。