首页 > web前端 > js教程 > 正文

Web前端开发工具——bower依赖包管理工具_javascript技巧

WBOY
发布: 2016-05-16 15:07:46
原创
1832 人浏览过

Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系。

包管理工具一般有以下的功能:

a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台。

b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的。

c)上传下载:这是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到处找下载。上传并不是必备的,根据文件存储的位置而定,但需要有一定的机制保障。

d)依赖分析:这也是包管理工具主要解决的问题之一,既然包之间是有联系的,那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

由于bower是基于nodejs开发的,所以你首先必须得有个nodejs环境,至于这么安装nodejs网上一大堆教程,对了使用bower还需要安装git,这里就不多说了。

bower带来的好处

  假如你有一个项目,里面需要用到了JQuery在正常情况下我们需要到jQuery官方网站下载库,这样的话,每次jquery更新,我们又要到jQuery官方下载,那这样的话就很麻烦了,如果有一款工具能够输入一个命令让我们选择要下载的版本,并且如果想把我们项目里面的所有库更新到最新版也只需要输入一个命令那是不是很方便,bower的另外一个好处就是如果你安装bootstrap那么它会自动下载jquery,因为bootstrap依赖了jquery,简单的来说只要我们下载的那个库依赖了另外的库那么bower会自动帮我们下载依赖的库,bower就是这么强大。

bower的安装

  npm install -g bower 表示安装到全局环境

bower的使用

  1. 通过bower下载库

    bower install (包的名称如:jquery)[#版本如:#1.7] 版本可选,如果没有写,默认下载最新版

    如:bower install bootstrap#2.2

  2. 如果需要更新所以的库,我们可以输入以下命令

    bower update

如果需要生成一个你下载个包的所以信息,比如你在一个团队中,你想让其他人知道你都用了哪些库,并且它们的版本是多少,那么我们可以通过以下命令来完成。
  我们需要先初始化一个包描述。它会在你的当前执行环境目录中创建一个bower.json的目录

    `bower init -y`

  然后通过

    `bower install jquery --save`

  它会在bower.json文件中加入jquery的版本信息,如果你想添加多个可以通过空格bower install jquery bootstrap less --save

以下是bower.json文件的内容

{
"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"
}
}
登录后复制

Wenn Sie mit NodeJS noch nicht vertraut sind, sind Sie möglicherweise etwas verwirrt, da dies kein grundlegendes NodeJS-Tutorial ist. Wenn Sie Node verstehen und lernen möchten, müssen Sie es im Internet lernen.

Zusätzlich zu diesen Vorteilen verfügt Bower auch über einige leistungsfähigere Funktionen, die Sie hier nicht vorstellen müssen. Schließlich habe ich gerade erst mit dem Erlernen von Node begonnen

--------------------------------- --- -------Trennlinie------------------------ ----

Die Beziehung zwischen Laube und NPM

Um Bower zu installieren, müssen Sie es über npm installieren

Der Unterschied zwischen Bower und NPM:

1. In der vorherigen npm-Version konnte kein abhängiger Code geteilt werden. Das heißt, wenn Sie in der vorherigen npm-Version einen Bootstrap heruntergeladen haben, wird er auch von jquery heruntergeladen. Wenn jedoch eine andere Ihrer Bibliotheken ebenfalls JQuery verwendet, wird auch eine JQuery heruntergeladen. In diesem Fall wird der Code wiederholt.

Ihre Struktur ist wie folgt:

bootstrapjQuery

  xxxxxxxxxjQuery

Sie sind zwar dupliziert, aber es scheint, dass dieses Problem in der neuesten Version von npm gelöst wurde.

 2. npm lädt die Entwicklungsumgebung zusammen herunter und Bower lädt nur das kompilierte Frontmodul herunter.

 3. NPM wird hauptsächlich für die interne Abhängigkeitspaketverwaltung von Node.js-Projekten verwendet. Die installierten Module befinden sich im Ordner node_modules im Projektstammverzeichnis. In den meisten Fällen wird Bower für die Frontend-Entwicklung verwendet. Es verwaltet Abhängigkeiten von CSS/JS/Vorlagen und anderen Inhalten und die abhängige Download-Verzeichnisstruktur kann angepasst werden. --Der Inhalt dieses Absatzes wurde online gefunden.

Die sogenannte benutzerdefinierte Verzeichnisstruktur bedeutet, dass, wenn Sie Bower in diesem Dateiverzeichnis öffnen, das benötigte Paket unter dieser Datei heruntergeladen wird, und npm unterstützt dies nicht.


Zusammenfassung: Wir können einfach verstehen, dass npm zum Verwalten von NodeJS-Modulen, also Paketen, verwendet wird und Bower zum Verwalten unserer Front-End-Bibliotheken verwendet wird.


Über das Web-Front-End-Entwicklungstool - Bower-Abhängigkeitspaketverwaltungstool: Der Herausgeber wird es Ihnen hier vorstellen. Ich hoffe, es wird Ihnen hilfreich sein!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!