What the hell is bower?

Bower (Gazebo. ）

Bower is a front-end package Manager in Web development. The NPM Package Manager, similar to the node module, allows developers to write shareable modules for the server. Bower provides similar functionality for Web Components.

It provides a solution for dependency problems with a common, neutral, and easy-to-use interface. It is run based on git, and the package is unknown. It also supports other delivery types, such as Requirejs, AMD, and so on.

1 installation

Installation is simple: simply install bower using the Package Manager NPM:

$ NPM Install-g Bower

Bower relies on git, node, and NPM.

You can then confirm that the installation was successful by entering the help command:

$ bower Help

2 Bower Introduction

For web apps, you might want to share source code with other developers or deploy to other development machines. Similar to the Package.json for NPM, you can use a Bower.json file to store front-end dependencies.

To get started with Bower.json, you can use the init command provided by Bower. We should execute it in the root directory of the project:

$bower Init

This command launches a Setup wizard that asks some questions about the new package. After the answer is completed, a new Bower.json file is generated in the current directory.

3 Configuring Bower

The bower comes with a robust default configuration, but it is also highly configurable. You can configure the directory for the installer package and register which directory is used to install the components.

Https://docs.google.com/document/d/1APq7oA9tNao1UYWyOm8dKqlRP2blVkROYLZ

More Bower configuration documents can be seen on the 2flijtwc/edit#heading=h.4pzytc1f9j8k. Recommend you to join

See the documentation for more detailed configuration information.

While in-depth understanding of the configuration information for Bower is not within the scope of this chapter, we will see the two most common modification configuration items (based on our own experience).

To configure Bower, you can edit the. bowerrc file, pass configuration parameters, or set environment variables. You can also put the. bowerrc file in a different place:

Q The current working directory of the project;

Any subdirectory of the Q directory tree;

Q The current user's home directory;

Q Global in the Bower directory.

The. bowerrc file contains a JSON object for configuration. For example, to change the color configuration, the. bowerrc file should contain:

{

"Color": false

}

For the sake of simplicity, here we place the. bowerrc file in the root directory of the project. If it does not exist, it is recommended to create it in the root directory of the project:

$ echo "{}" >. BOWERRC

CWD CWD configuration variable indicates from which directory the Bower should be run. All other paths should be directly relative to this directory.

{

"CWD": "App"

}

The directory directory configuration variable indicates which path the installed component should be saved in. The default is bower_components. This depends on how the app is created and can be modified to accommodate different directory structures:

{

"Directory": "App/components"

}

4 Search Packages

In order to find the package for installation, Bower contains a search command to search for registered indexes:

# # Searching for Bootstrap-sass

$ Bower Search Bootstrap-sass

5 Install Package

Installing the package is also simple. If you have an existing Bower.json file, you can simply run the install command. It pulls and installs the front-end dependencies into the Bower directory:

$ Bower Install

You can install the package locally by displaying a call to the installation command on the file. You can also install a specific version of the package, or even set an alias for the package installation.

# Install a local or

# Default remote version of a package

$ Bower Install <package>

# Install A specific version of a package

$ Bower Install <package>#<version>

# Alias Install a package

$ Bower Install Name=<package>#<version>

# for instance

$ Bower Install Bootstrap=bootstrap-sass

Bower.json files can store multiple types of dependencies: either runtime dependencies (such as angular or jquery), or dependencies needed during development (such as karma or bootstrap-sass).

# Install a run-time dependency

$ Bower Install Angular-route--save

# Install a dev dependency

$ Bower Install Bootstrap-sass--save-dev

If you print the contents of the Bower.json file, you will see the following dependent updates with the new installation:

$ cat Bower.json

{

"Name": "MyApp",

"Version": "0.0.1",

"Authors": [

"Ari Lerner <ari@fullstack.io>"

],

"License": "MIT",

"Dependencies": {

"Angular-route": "~1.2.13"

},

"Devdependencies": {

"Bootstrapp-sass": "~3.0.0"

}

}

6 Using Packages

Now that the package is installed, we can introduce these packages by using the script tag in the HTML source code, just like any other script in the local directory.

<script

src= "/bower_components/angular/angular.js" >

</script>

7 Removing packages

It is also possible to remove packages using bower. You can manually delete files in the Bower directory or run the uninstall command. This uninstall command allows us to map Bower.json file changes using--save and--save-dev tags.

# Remove a dependency

$ bower Uninstall--save-dev Angular-route

# Remove a devdependency

$ boweruninstall--save-dev Bootstrap-sass