凉亭瓦片计算方式

There are many tools and libraries available today that makes our development task easier. In this post, we are going to introduce a great tool for managing the dependencies called bower.

今天有许多工具和库可供使用，这使我们的开发任务更加轻松。在本文中，我们将介绍一个很棒的工具来管理依赖项，称为bower 。

NodeJS和NPM (NodeJS and NPM)

You have to download and install NodeJS and NPM before proceeding to the next sections. You don’t need to master NodeJS features to complete this tutorials but it’s always good to have a basic understanding on this technology. If you want to learn more about the environment set up and installation of NodeJS, you can go through the following posts otherwise you can jump to next section.

在继续下一部分之前，您必须下载并安装NodeJS和NPM 。您无需掌握NodeJS功能即可完成本教程，但是对这种技术有基本了解总是很高兴的。如果您想了解有关NodeJS的环境设置和安装的更多信息，可以阅读以下文章，否则可以跳至下一部分。

Introduction to Node JS – Node.js BasicsNode JS简介– Node.js基础
Node JS Environment Setup – Node.js installationNode JS环境设置– Node.js安装
Node.js Components – Node.js modules, NPM install update uninstall exampleNode.js组件– Node.js模块，NPM安装更新卸载示例

创建package.json文件 (Creating package.json File)

package.json is a plain JSON text file which contains all metadata information about an application. You should create a package.json file to install an external tool as a development dependency. Check this link to get more information about package.json.

package.json是一个纯JSON文本文件，其中包含有关应用程序的所有元数据信息。您应该创建一个package.json文件以将外部工具安装为开发依赖项。检查此链接以获取有关package.json的更多信息。

包经理– Bower (Package Manager – Bower)

You can use Bower as the package manager for the web applications. Bower will help you to find, fetch download the required packages for your application. Bower uses a manifest file called bower.json to keep track of these installed packages.

您可以将Bower用作Web应用程序的程序包管理器。 Bower将帮助您查找，获取下载应用程序所需的软件包。 Bower使用一个名为bower.json的清单文件来跟踪这些已安装的软件包。

Bower requires NodeJS, npm and Git. So make sure to install these components before installing bower.

Bower需要使用NodeJS，npm和Git 。 因此，请确保在安装凉亭之前先安装这些组件。

全局安装Bower (Installing Bower Globally)

We can globally install bower using the following command in the command line terminal.
npm install -g bower
Here -g makes the package manager run in the global mode.

我们可以在命令行终端中使用以下命令来全局安装bower。
npm install -g bower
在这里， -g使程序包管理器在全局模式下运行。

为项目安装Bower (Installing Bower for a Project)

If you want to restrict the installation to a project then remove the -g from the above command.
npm install bower
You can use the terminal available in JetBrains WebStorm.

如果要将安装限制为一个项目，请从上述命令中删除-g。
npm install bower
您可以使用JetBrains WebStorm中可用的终端。

Launch terminal.启动终端。
Switch to the project root folder.( My project folder : d:\Learn\Angular)切换到项目根文件夹。（ 我的项目文件夹：d：\ Learn \ Angular ）
Type the above command to install bower for a specific project.键入上面的命令为特定项目安装Bower。
You will see the something like the following image in your terminal.您将在终端中看到类似下图的内容。

使用Bower搜索和安装软件包 (Searching and Installing Packages Using Bower)

You can find Bower packages using the online component directory, or using the command line utility. You can use the following bower search command to find packages for your project.
bower search <query>
For example you can search angular packages using the following command and this will return a number of results.
bower search angular
We can install packages using bower install command. Bower installs packages to bower_components. The following command is used to install packages.
bower install <package>
A package can be a GitHub shorthand, a Git endpoint or a URL. You can check out the official bower site to get more details.

您可以使用在线组件目录或使用命令行实用程序找到Bower软件包。您可以使用以下bower search命令来找到项目的软件包。
bower search <query>
例如，您可以使用以下命令搜索角度包，这将返回许多结果。
bower search angular
我们可以使用bower install命令安装软件包。 Bower将软件包安装到bower_components 。以下命令用于安装软件包。
bower install <package>
包可以是GitHub的简写，Git端点或URL。您可以查看官方凉亭网站以获取更多详细信息。

Let’s install angularJS for our project. You need the following command to install angularJS.
bower install angular

让我们为我们的项目安装angularJS。您需要以下命令来安装angularJS。
bower install angular

You will see the installed angularJS under bower_components folder.

您将在bower_components文件夹下看到已安装的angularJS。

使用bower.json配置文件 (Using bower.json Configuration File)

The bower.json file is a manifest file used to define packages that is similar to Node’s package.json file. If you are using multiple packages within your project, it’s a good practice to list these packages in a bower.json file. This will allow you to install and update packages with a single command – bower install.

bower.json文件是一个清单文件，用于定义与Node的package.json文件类似的软件包。如果您在项目中使用多个软件包，则最好在bower.json文件中列出这些软件包。这将允许您使用一个命令– bower install来安装和更新软件包。

You can create a bower.json file interactively using bower init command. The following image shows how to create a bower.json file.

您可以使用bower init命令以交互方式创建bower.json文件。下图显示了如何创建bower.json文件。

bower.json规范 (bower.json Specification)

Property	Description
name	Unique name of the package.
version	Package’s semantic version number
description	A brief description of your package.
main	The entry-point files necessary to use your package
dependencies	Dependencies are specified with a key value pairs.Key must be a valid name.Value must be a valid version, a Git URL, or a URL.
devDependencies	Same as dependencies which is only needed for development ( ex : testing framework.)
ignore	A list of files for Bower to ignore when installing your package.
authors	Lists authors of the project.
repository	The repository in which the source code can be found

属性	描述
名称	包的唯一名称。
版	软件包的语义版本号
描述	您的包裹的简要说明。
主要	使用软件包所需的入口点文件
依存关系	依赖关系由键值对指定。键必须是有效名称。值必须是有效版本，Git URL或URL。
devDependencies	与仅开发所需的依赖项相同（例如：测试框架。）
忽视	Bower在安装软件包时忽略的文件列表。
作家	列出项目的作者。
资料库	可以在其中找到源代码的存储库

管理依赖关系 (Managing Dependencies)

Now we can look at maintaining dependencies in bower.json file. We will show you how to update the bower.json files.
Let’s create a bower.json file using bower init command. You can see angular package in the dependencies array.

现在我们可以看看如何维护bower.json文件中的依赖关系。我们将向您展示如何更新bower.json文件。
让我们使用bower init命令创建一个bower.json文件。您可以在dependencies数组中看到角度包。

bower.json

{"name": "My Project","version": "1.0.0","authors": ["Jobin"],"description": "My first bower project.","license": "MIT","ignore": ["**/.*","node_modules","bower_components","test","tests"],"dependencies": {"angular": "~1.4.3"}
}

We can add package to our project’s bower.json dependencies array – using bower install --save command.
The following command will add jquery package and update the above bower.json file.
bower install jquery --save

我们可以使用bower install --save命令将包添加到项目的bower.json 依赖项数组中。
以下命令将添加jquery包并更新上面的bower.json文件。
bower install jquery --save

You can see the jquery package as a dependency in the updated json file.

您可以在更新的json文件中将jquery包视为依赖项 。

bower.json

{"name": "My Project","version": "1.0.0","authors": ["Jobin"],"description": "My first bower project.","license": "MIT","ignore": ["**/.*","node_modules","bower_components","test","tests"],"dependencies": {"angular": "~1.4.3","jquery": "~2.1.4"}
}

You can also add any package to the devDependencies array using bower install --save-dev command.
The following command will add the testing framework jasmine as a devDependency

您还可以使用bower install --save-dev命令将任何软件包添加到devDependencies数组。
以下命令将把测试框架jasmine添加为devDependency

bower install jasmine --save-dev

You can see the following updated json file with added devDependency.

您可以看到以下更新的json文件，其中添加了devDependency。

bower.json

{"name": "My Project","version": "1.0.0","authors": ["Jobin"],"description": "My first bower project.","license": "MIT","ignore": ["**/.*","node_modules","bower_components","test","tests"],"dependencies": {"angular": "~1.4.3","jquery": "~2.1.4"},"devDependencies": {"jasmine": "~2.3.4"}
}

列出，更新和卸载软件包 (Listing, Updating and Uninstalling Packages)

You can use the list command to find the installed packages in your project.您可以使用list命令在项目中查找已安装的软件包。

bower list

You can use update command for updating the packages specified in your bower.json file.
Use bower update for updating all the packages.您可以使用update命令来更新bower.json文件中指定的软件包。
使用bower update来更新所有软件包。

bower update

You can use the following command if you want to update the selected packages.如果要更新所选软件包，可以使用以下命令。

bower update <package>

Uninstalling is also a straightforward action using the uninstall command.使用卸载命令，卸载也是一项简单的操作。

bower uninstall <package>

You can also uninstall multiple packages in the following way.您还可以通过以下方式卸载多个软件包。

bower uninstall <package1> <package2>
Bower is a wonderful tool that can be used to solve the fundamental issues like finding, fetching and downloading the required packages for your application.

bower uninstall <package1> <package2>
Bower是一个很棒的工具，可用于解决一些基本问题，例如查找，获取和下载应用程序所需的软件包。

That’s all about bower and you will see more angularJS tutorials in the coming posts.

这就是关于Bower的全部内容，您将在以后的文章中看到更多angularJS教程。

翻译自: https://www.journaldev.com/8077/introduction-to-bower

凉亭瓦片计算方式