Web Front-end development tools -- bower dependency package management tools _ javascript skills

Bower is a package management tool launched by twitter. Based on nodejs's modular idea, Bower distributes its functions to various modules, so that there is a connection between modules, using Bower to manage this relationship between modules, this article will introduce bower's dependency package management tools. Interested friends will learn about Bower as a package management tool launched by twitter, based on the node. js modularization idea, the function is distributed to each module, so that there is a connection between the module and the module. The Bower is used to manage the connection between the modules.

Package management tools generally have the following functions:

A) registration mechanism: Each package requires a unique ID to match the information correctly during search and download. Therefore, the package management tool must maintain registration information and can rely on other platforms.

B) file storage: determine the location where the file is stored. You can find it during download. Of course, this address is accessible on the network.

C) upload and download: This is the main function of the tool and can improve the convenience of using the package. For example, to use jquery, you only need to install it and do not need to download it everywhere. Uploading is not necessary. It depends on the file storage location, but requires a certain mechanism.

D) dependency analysis: this is also one of the main solutions of the package management tool. Since there are links between packages, the dependencies between them must be processed during download. When downloading a package, you also need to download the dependent package.

Because bower is developed based on nodejs, you must first have a nodejs environment. As for how to install a lot of tutorials on nodejs, you still need to install git when using bower.

Benefits of bower

If you have a project that uses JQuery, We need to download the library from the official jQuery website under normal circumstances. In this way, we need to download the library from the official jquery website every time jQuery is updated, this is troublesome. If a tool can input a command to select the version to download, if you want to update all the libraries in our project to the latest version, you only need to enter a command, isn't that convenient, another benefit of bower is that if you install bootstrap, it will automatically download jquery because bootstrap depends on jquery, simply put, as long as the library we downloaded depends on another library, bower will automatically help us download the dependent library. bower is so powerful.

Bower Installation

Npm install-g bower indicates installation to the global environment

Use of bower

1. Download the library through bower

Bower install (the package name is jquery) [# version: #1.7] (optional) the latest version is downloaded by default.

For example, bower install bootstrap #2.2

2. If you need to update the library, enter the following command:

Bower update

If you need to generate a piece of information that you download a package, for example, in a team, you want others to know which libraries you use and what version they are, you can run the following command.
We need to initialize a package description first. It will create a bower. json directory in your current execution environment directory.

'Bower init-y'

Then

'Bower install jquery -- save'

It will add jquery version information to the bower. json file. If you want to add multiple versions, use the space bower install jquery bootstrap less -- save

The content of the bower. json file is as follows:

{"name": "down","authors": ["xxxxxxxx"],"description": "","main": "","moduleType": [],"license": "MIT","homepage": "","private": true,"ignore": ["**/.*","node_modules","bower_components","test","tests"],"dependencies": {"bootstrap": "^3.3.6","less": "^2.6.1","jquery": "^2.2.2"}}

Of course, if you are a beginner in nodejs, you may be confused, because this is not a basic tutorial on nodejs. If you want to learn about node, you need to study it on the Internet.

In addition to these benefits, bower thinks that there are some more powerful functions that need to be discovered. I will not introduce them here. After all, I just started to learn node

------------------------------------------------------ Split line ---------------------------------------

Relationship between bower and npm

Install bower through npm

Differences between bower and npm:

1. in earlier npm versions, it cannot share dependent code. That is to say, in earlier npm versions, If you download a bootstrap, because bootstrap depends on jquery, so it will also download jquery, but if you use jquery in another library, it will also download a jquery, so that the Code will be repeated.

Their structure is like this:

Bootstrap \ jQuery
Xxxxxxxxx \ jQuery

They are repeated, right? But it seems that this problem has been solved in the latest npm version.

2. npm will download the development environment together, and bower will only download the compiled prefix module.

3. NPM is mainly used for the internal dependency package management of the Node. js project. The installed module is located in the node_modules folder under the root directory of the project. In most cases, Bower is used for front-end development. It manages the dependencies of CSS, JS, templates, and other content. The dependent download directory structure can be customized. -- This section is found online.

The so-called custom directory structure means that if you open the bower in that file directory, it will download the package you need under that file, npm does not support this.

Summary: we can simply understand that npm is used to manage nodejs modules, that is, packages, while bower is used to manage our front-end libraries.

We will introduce the Web Front-end development tool-bower dependency package management tool to you here, and hope to help you!