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 install
Command 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 help
Command 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