Bower to solve JS dependency management

Objective
A new Web project started, we are always very natural to download the need to use the JS class library files, such as jquery, to download the official website called Jquery-1.10.2.min.js file, put into our project. When the project needs to be bootstrap, we will repeat the work, to the bootstrap official website to download the corresponding class library. If Bootstrap relies on jquery that is not 1.10.2, but 2.0.3, we will re-download a corresponding version of jquery to replace the original.

Package management is a complex issue, and we need to know who to rely on and which version to rely on. These are too heavy for developers to afford. As a JS-dependent management tool, Bower provides an ideal package management approach, with the help of NPM ideas to provide us with a comfortable development environment.

You don't have to move your hands to try Bower, you will never know how enjoyable the front-end development is.

Directory

1. Bower Introduction
2. Bower Installation
3. Bower command
4. Bower use
5. Submit your own class library with Bower

1. Bower Introduction

Bower is a package management tool launched by Twitter, based on Nodejs's modular thinking, to spread functionality across modules, to connect modules and modules, and to manage this connection between modules through Bower.

Package management tools typically have the following features:

• Registration mechanism: Each package needs to determine a unique ID that makes the search and download match correctly, so the package management tool needs to maintain the registration information and can rely on other platforms.
• File storage: Determine the location of the file, download the time can be found, of course, the address is accessible on the network.
• Upload download: This is the main function of the tool, can improve the convenience of the use of the package. For example, if you want to use jquery just install a bit, you don't have to look everywhere to download. Upload is not necessary, depending on the location of the file storage, but need to have a certain mechanism to protect.
• Dependency Analysis: This is one of the main problems of the package management tool, since there are links between the packages, then the download will need to deal with their dependencies. When downloading a package, you also need to download the dependent packages.

Feature introduction, excerpt from article: http://chuo.me/2013/02/twitter-bower.html

2. Bower Installation

The Bower plugin is installed and managed through NPM, node. js Package Manager.

My system environment

• Win7 64bit
• nodejs:v0.10.5
• npm:1.2.19

~ D:\workspace\javascript>node -vv0.10.5~ D:\workspace\javascript>npm -v1.2.19

In the system, we have installed Nodejs and NPM. Win7 Installation Nodejs Please refer to the article: NODEJS Development Framework Express3.0 Development notes – from scratch

Installing Bower
Global Installation Bower

~ D:\workspace\javascript>npm install bower -g

Create a new project for EXPRESS3 Nodejs-bower

~ D:\workspace\javascript>express -e nodejs-bower~ D:\workspace\javascript>cd nodejs-bower && npm install

3. Bower command

After the bower is installed, we can use the Bower command.

~ D:\workspace\javascript\nodejs-bower>bowerusage:bower [] []commands:cache Manage bower CAC He help Display help information about Bower home Opens a package homepage int o your favorite browser info info of a particular package init interactively C reate a Bower.json file install install a package locally link Symlink a package                   Folder List List Local Packages lookup look up a package URL by name Prune                  Removes local extraneous packages register a package search Search for a package by name update Update a local package uninstall Remove a local Packageoptions:-F,--force makes various commands more forceful-j,--json Output consumab Le Json-l,--log-levEl logs to Report-o,--offline does not hits the network-q,--quiet only           Output important information-s,--silent do not output anything, besides Errors-v,--verbose  Makes output more verbose--allow-root allows running commands as Rootsee "Bower help" for more information On a specific command.

Commands, lists the various commands supported by Bower.

• Cache:bower Cache Management
• Help: Displays the Bower Command's helpful information
• Home: A GitHub publishing page that opens a package via a browser
• Info: View information about a package
• Init: Creating a Bower.json file
• Install: Package to Project
• Link: Establish a project links in the local Bower library
• List: List the packages that the project has installed
• Lookup: Query the URL of a package based on the package name
• Prune: Delete Project-independent packages
• Register: Registering a Package
• Search: Searching for packages
• Update: Updating a project's package
• Uninstall: Deleting a project's package

4. Bower use

1). Install jquery to Project Nodejs-bower

~ D:\workspace\javascript\nodejs-bower>bower install jquerybower jquery#*              not-cached git://github.com/components/jquery.git#*bower jquery#*                 resolve git://github.com/components/jquery.git#*bower jquery#*                download https://github.com/components/jquery/archive/2.0.3.tar.gzbower jquery#*                 extract archive.tar.gzbower jquery#*                resolved git://github.com/components/jquery.git#2.0.3bower jquery#~2.0.3            install jquery#2.0.3jquery#2.0.3 bower_components\jquery

By executing the command, we can see that the latest version of jquery has been downloaded and installed into the project's Bower_components\jquery directory

Viewing the Bower_components/jquery directory, 3 files found.

~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a.  ..  .bower.json  component.json  jquery.js

In the same way, our project needs a D3 class library

~ D:\workspace\javascript\nodejs-bower>bower install d3bower d3#*                  not-cached git://github.com/mbostock/d3.git#*bower d3#*                     resolve git://github.com/mbostock/d3.git#*bower d3#*                    download https://github.com/mbostock/d3/archive/v3.2.8.tar.gzbower d3#*                     extract archive.tar.gzbower d3#*                    resolved git://github.com/mbostock/d3.git#3.2.8bower d3#~3.2.8                install d3#3.2.8d3#3.2.8 bower_components\d3

Very convenient, download and install complete!

2). View the imported class libraries in the project

~ D:\workspace\javascript\nodejs-bower>bower listbower check-new     Checking for new versions of the project dependencies..nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower├── d3#3.2.8└── jquery#2.0.3

3). Install the bootstrap library and view dependencies

~ D:\workspace\javascript\nodejs-bower>bower install bootstrapbower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.0.0-rc1bower bootstrap#*             validate 3.0.0-rc1 against git://github.com/twbs/bootstrap.git#*bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower bootstrap#~3.0.0-rc1     install bootstrap#3.0.0-rc1bootstrap#3.0.0-rc1 bower_components\bootstrap└── jquery#2.0.3~ D:\workspace\javascript\nodejs-bower>bower listbower check-new     Checking for new versions of the project dependencies..nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower├─┬ bootstrap#3.0.0-rc1 extraneous│ └── jquery#2.0.3├── d3#3.2.8└── jquery#2.0.3

We find that bootstrap is dependent on jquery.

4). Delete the jquery library and destroy the dependencies

~ D:\workspace\javascript\nodejs-bower>bower uninstall jquerybower conflict      bootstrap depends on jqueryContinue anyway? (y/n) ybower uninstall     jquery~ D:\workspace\javascript\nodejs-bower>bower listbower check-new     Checking for new versions of the project dependencies..nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower├─┬ bootstrap#3.0.0-rc1 extraneous│ └── jquery missing├── d3#3.2.8└── jquery missing

5). Install the low version of jquery, make version compatible

~ D:\workspace\javascript\nodejs-bower>bower Install jquery#1.7.2bower jquery#~2.0.3 cached git://github.co M/components/jquery.git#2.0.3bower jquery#~2.0.3 Validate 2.0.3 against git://github.com/components/jquery.git#~         2.0.3bower jquery#>= 1.9.0 Cached Git://github.com/components/jquery.git#2.0.3bower jquery#>= 1.9.0 Validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower jquery#1.7.2 cached Git://gi Thub.com/components/jquery.git#1.7.2bower jquery#1.7.2 validate 1.7.2 against Git://github.com/components/jquer    Y.git#1.7.2unable to find a suitable version for jquery, please choose One:1) jquery#1.7.2 which resolved to 1.7.2 2) jquery#~2.0.3 which resolved to 2.0.3 and have Nodejs-bower as dependants 3) jquery#>= 1.9.0 which resolved to 2.0 .3 and have Bootstrap#3.0.0-rc1 as Dependantsprefix the choice with! To persist it to bower.jsonchoice:1bower jquery#1.7.2 install JQuery#1.7.2jquery#1.7.2 bower_components\jquery~ d:\workspace\javascript\nodejs-bower>bower listbower check-new Checking for new versions of the project dependencies. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower├─┬bootstrap#3.0.0-rc1 extraneous│└──jquery#1.7.2 Incompatible with >= 1.9.0 (2.0.3 available) ├──d3#3.2.8└──jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)

We can clearly see the bower, very clearly told us, jquery and Bootstrap is incompatible, strong place we should have some experience.

6). Upgrade jquery to make the version compatible

~ D:\workspace\javascript\nodejs-bower>bower update jquerybower jquery#~2.0.3             cached git://github.com/components/jquery.git#2.0.3bower jquery#~2.0.3           validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower jquery#~2.0.3            install jquery#2.0.3jquery#2.0.3 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower listbower check-new     Checking for new versions of the project dependencies..nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower├─┬ bootstrap#3.0.0-rc1 extraneous│ └── jquery#2.0.3├── d3#3.2.8└── jquery#2.0.3

How smart, a key to get it done, this is the efficient development.

7). View the class library that the local bower has cached

~ D:\workspace\javascript\nodejs-bower>bower cache listbootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1d3=git://github.com/mbostock/d3.git#3.2.8jquery=git://github.com/components/jquery.git#1.7.2jquery=git://github.com/components/jquery.git#2.0.3

8). View D3 Library Information

~ D:\workspace\javascript\nodejs-bower>bower info d3d3  Versions:    - 3.2.8    - 3.2.7    - 3.2.6    - 3.2.5    - 3.2.4    - 3.2.3    ...

9). View the URL of the Dojo library

~ D:\workspace\javascript\nodejs-bower>bower lookup dojodojo git://github.com/dojo/dojo.git

10). Open the Dojo's publishing home page with a browser

~ D:\workspace\javascript\nodejs-bower>bower home dojobower dojo#*                not-cached git://github.com/dojo/dojo.git#*bower dojo#*                   resolve git://github.com/dojo/dojo.git#*bower dojo#*                  download https://github.com/dojo/dojo/archive/1.9.1.tar.gzbower dojo#*                   extract archive.tar.gzbower dojo#*                  resolved git://github.com/dojo/dojo.git#1.9.1

Browser open automatically: Https://github.com/dojo/dojo

11). Query the class library containing dojo

~ D:\workspace\javascript\nodejs-bower>bower search dojoSearch results:    dojo git://github.com/dojo/dojo.git    dojox git://github.com/dojo/dojox.git    dojo-util git://github.com/dojo/util.git    dojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap

It's a convenient and practical technology.

5. Submit your own class library with Bower

1). Generate Bower.json configuration file

~ D:\workspace\javascript\nodejs-bower>bower initbower existing      The existing bower.json file will be used and filled in[?] name: nodejs-bower[?] version: 0.0.0[?] main file:[?] set currently installed components as dependencies? No[?] add commonly ignored files to ignore list? Yes

View the generated Files Bower.json

{  "name": "nodejs-bower",  "version": "0.0.0",  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ],  "dependencies": {    "d3": "git://github.com/mbostock/d3.git#~3.2.8",    "jquery": "git://github.com/components/jquery.git#~2.0.3"  }}

2). Create a resource library on GitHub: Nodejs-bower
3). Local Project bound GitHub

~ D:\workspace\javascript\nodejs-bower>git initinitialized empty git repository in d:/workspace/javascript/ nodejs-bower/.git/~ d:\workspace\javascript\nodejs-bower>git Add. ~ D:\workspace\javascript\nodejs-bower>git Commit-m "First commit" # on branch master## Initial commit## untracked files:# (use "git add ..." to include in what WI       ll be committed) # # app.js# bower.json# bower_components/# node_modules/# package.json# public/# routes/# Views/nothing added to commit yes untracked files present (use "Git add" to track) ~ D:\work Space\javascript\nodejs-bower>git Remote Add Origin https://github.com/bsspirit/nodejs-bower~ D:\workspace\ Javascript\nodejs-bower>git push-u Origin mastercounting objects:565, done. Delta compression using up to 4 threads.compressing objects:100% (516/516), done. Writing objects:100% (565/565), 803.08 KiB, done. Total 565 (delta), reused 0 (Delta 0) to Https://github.com/bsspirit/nodejs-bower * [New Branch] Master, Masterbranch master set up to track remote branch master from Origin. 

4). Register to the Bower official class library

  ~ d:\workspace\javascript\nodejs-bower>bower Register Nodejs-bower [email protected]:bsspirit/ Nodejs-bower.gitbower Convert converted [email protected]:bsspirit/nodejs-bower.git to git:/ /github.com/bsspirit/nodejs-bower.gitbower nodejs-bower#* Resolve Git://github.com/bsspirit/nodejs-bower.git#*bo Wer nodejs-bower#* Checkout Masterbower nodejs-bower#* resolved GIT://GITHUB.COM/BSSPIRIT/NODEJS-BOWER.G It#af3ceaac07registering a package would make it visible and installable via the Registry (https://bower.herokuapp.com), CO Ntinue? (y/n) ybower nodejs-bower Register Git://github.com/bsspirit/nodejs-bower.gitpackage nodejs- Bower Registered successfully! All valid Semver tags on git://github.com/bsspirit/nodejs-bower.git'll be available as versions. To publish a new version, you just need release a valid semver tag. Run Bower Info Nodejs-bower to List of the package versions.  

5). Check our own package

D:\workspace\javascript\nodejs-bower>bower search nodejs-bowerSearch results:    nodejs-bower git://github.com/bsspirit/nodejs-bower.git

6). Install our own package

D:\workspace\javascript\nodejs-bower>bower install nodejs-bowerbower nodejs-bower#*            cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07bower nodejs-bower#*          validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#*bower nodejs-bower#*           install nodejs-bower#af3ceaac07nodejs-bower#af3ceaac07 bower_components\nodejs-bower├── d3#3.2.8└── jquery#2.0.3

In fact, modular, version-dependent, development class library, publish class library, install Class library, is a command! Can you make it any easier? Quickly put the project modular, and then share to everyone!! The future belongs to the developer.

Bower to solve JS dependency management