JavaScript dependency management tool bower

JavaScript dependency management tool bower
Js dependency management tool bower Note: This article is from the author's new book "programmers in the cloud era".

2014.9.4

Similar to maven described earlier, it is only used to manage js packages. When we develop applications, many js packages will be used in the next application in most cases, for example, multiple js packages such as jquery, dwr, and d3 may be used in a project. Sometimes the versions may be different. If you download them manually each time and put them in a local project, is it boring?

Bower is here to help us do this.

Before installing bower, make sure that you have installed nodejs, npm, and git.

Install bower:

npm install -g bower

You can use bower After the installation is complete. If you need jquery, run the following command in your project directory:

bower install jquery

After execution, you will see an additional bower_components directory under your project directory, as shown below:

bower_components/├── jquery│   ├── MIT-LICENSE.txt│   ├── bower.json│   ├── dist│   │   ├── jquery.js│   │   ├── jquery.min.js│   │   └── jquery.min.map│   └── src│       ├── ajax│       │   ├── jsonp.js│       │   ├── load.js│       │   ├── parseJSON.js│       │   ├── parseXML.js│       │   ├── script.js│       │   ├── var│       │   │   ├── nonce.js│       │   │   └── rquery.js│       │   └── xhr.js│       ├── ajax.js│       ├── attributes

Now, introduce jquery through the following method in the place where you want to use jquery.

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

Of course, this reference method is very "Earth", and we will introduce you later how to not "Earth ".

We can also define the js package dependency in a configuration file of bower. json.

Run the following command in the project directory:

bower init

Enter the project name, version, author, open-source license, and other information as prompted in the Wizard. Then you can see that the system will generate a configuration file of bower. json, as shown below:

{  "name": "bowerp",  "version": "0.1",  "authors": [    "ChangjunZhao 
  
   "  ],  "description": "bower test",  "main": "lib",  "keywords": [    "df"  ],  "license": "MIT",  "private": true,  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ]}
  

Run the following command:

bower install jquery --save

Let's look at bower. json again:

{  "name": "bowerp",  "version": "0.1",  "authors": [    "ChangjunZhao 
  
   "  ],  "description": "bower test",  "main": "lib",  "keywords": [    "df"  ],  "license": "MIT",  "private": true,  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ],  "dependencies": {    "jquery": "~2.1.1"  }}
  

Jquery dependency information is written to the bower. json file.

Now, when your project is submitted to the version management tool, you do not need to submit anything in the bower_components directory. You only need to submit bower. json. After obtaining the Code, other developers only need to execute it in the project directory.bower installCommand to automatically download all the js files that this project depends on.

How is it? Convenient?

For other bower commands and usage, you can usebower helpCommand to view. We recommend that you start from the official website at http://bower.io/no matter what you learn /. I will not talk about it here. Please do it yourself!

cjzhaomacbook:testProject ChangjunZhao$ bower helpUsage:    bower  [] [
  
   ]Commands:    cache                   Manage bower cache    help                    Display help information about Bower    home                    Opens a package homepage into your favorite browser    info                    Info of a particular package    init                    Interactively create 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                Register a package    search                  Search for a package by name    update                  Update a local package    uninstall               Remove a local package    version                 Bump a package versionOptions:    -f, --force             Makes various commands more forceful    -j, --json              Output consumable JSON    -l, --log-level         What level of logs to report    -o, --offline           Do not hit 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 root    --version               Output Bower version