npm and bower

npm简介

npm是什么

NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布包等。

npm详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

注： nodejs以包的形式组织程序模块，而包的定义却十分简单——包含文件内容符合规范package.json文件的目录或归档文件。并通过@来唯一标识每个包。

npm的安装

在最初的版本中，我们需要在安装完Node.js以后手动安装npm。但从Node.js 0.6开始，npm已包含在发行包中了，安装Node.js时会自动安装npm。
1. windows下安装nodejs
windows下载nodejs
2. linux下安装nodejs

sudo apt-get install nodejs

使用npm

使用 package.json

包的定义和NPM都围绕着package.json文件做文章，package.json文件其实就相当于JAVA中的MANIFEST.MF文件，用于存放模块的名称、版本、作者、机构、模块入口、依赖项等信息。首先我们通过 npm init 命令在当前工作目录下以用户引导的方式创建一个全新的package.json文件。然后通过 npm help json 命令打开帮助文档，并根据实际的项目需求自行初始化package.json的项目即可。下面将对基础配置项进行叙述。
package.json 位于模块的目录下，用于定义包的属性。接下来让我们来看下 express 包的 package.json 文件，位于 node_modules/express/package.json 内容：
1. package.json 属性说明：
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - package的应用依赖模块，即别人要使用这个package，至少需要安装哪些东西。应用依赖模块会安装到当前模块的node_modules目录下
devDependencies：package的开发依赖模块，即别人要在这个package上进行开发。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require(“express”)。
keywords - 关键字

NPM的配置信息

现在我们对package.json有一定的了解了，现在就到理论+实践时间咯。在实践之前我们要先配置一下NPM的资源库（国内被墙）。

  查看部分配置信息—— npm config ls   查看所有配置信息—— npm config ls -l 

修改配置信息的三种方式：
1. 修改用户家目录的.npmrc文件（没有则新建一个）；
2. 通过命令:

npm config set <config> <config-value>

npm config set registry http://registry.npm.taobao.org/

1. 通过–registry=等命令可选项临时配置。

npm install grunt --registry=http://registry.npm.taobao.org

使用 npm 命令安装模块

举例子：
以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 express:

$ sudo npm install express

安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require(‘express’)
的方式就好，无需指定第三方包路径。

var express = require('express');

全局安装和本地安装

1. 本地安装
   用作在项目中通过require导入依赖包，供项目使用。

sudo npm install express          # 本地安装

1. 全局安装
   用作在cli上直接调用，而无法在项目中通过require导入依赖包。如将grunt-cli安装到全局时，则可在cli中输入grunt调用了。

sudo npm install express -g   # 全局安装

那么全局和本地的依赖包到底是存放在哪里的呢？通过 npm root -g 和 npm root 可分别查看全局和本地的依赖包下载安装的绝对目录了。本地的依赖包会存放在当前项目根目录下的node_modules目录下。
你可以使用以下命令来查看所有全局安装的模块：

$ npm ls -g

更新模块

我们可以使用以下命令更新模块：

$ sudo npm update express

搜索模块（操作远程资源库中的依赖包）

使用以下来搜索模块：

$ sudo npm search express

卸载模块

我们可以使用以下命令来卸载 Node.js 模块。

$sudo npm uninstall express

卸载后，你可以到 /node_modules/ 目录下查看包是否还存在，或者使用以下命令查看：

$ npm ls

NPM 常用命令

• 使用npm help (command)可查看某条命令的详细帮助，例如npm help install。
• 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
• 使用npm update (package)可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
• 使用npm update (package) -g可以把全局安装的对应命令行程序更新至最新版。
• 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
• 使用npm unpublish (package)@(package)可以撤销发布自己发布过的某个版本代码。
  注： 更多命令查看

bower

什么是bower

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

安装bower

1. 准备工作
   安装node环境:node.js
   安装Git，bower从远程git仓库获取代码包:git简易指南
2. 安装bower
   使用npm，打开终端，输入：

npm install -g bower

使用bower

使用help命令查看帮助

自定义包的安装目录

首先进入项目目录下，新建文件1.txt
然后命令行进入项目目录下，输入命令重命名该文件为.bowerrc：
rename 1.txt .bowerrc
这个.bowerrc文件是自定义bower下载的代码包的目录，比如现在我的项目结构如下图

那我的.bowerrc文件内容如下：

{  "directory" : "js/lib"}

bower初始化

命令行进入项目目录中，输入命令如下：

bower init

会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来保存该项目的配置，如下：

{  "name": "bb_boot",  "version": "0.0.1",  "authors": [    "savokiss <[e-mail]>"  ],  "moduleType": [    "amd"  ],  "license": "MIT",  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "js/lib",    "test",    "tests"  ],  "dependencies": {  }}

包的安装

比如我要安装一个jquery，输入如下命令：

bower install jquery --save

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中–save参数是保存配置到你的bower.json，你会发现bower.json文件已经多了一行：

  "dependencies": {    "jquery": "~2.1.4"  }

包的信息

比如我们想要查找jquery都有哪些个版本，输入如下命令：

bower info jquery

会看到jquery的bower.json的信息，和可用的版本信息
可以看到jquery最新的兼容版版本为1.11.3
包的更新
上面安装的是最新版的高版本jquery，假如想要兼容低版本浏览器的呢？
已经查到兼容低版本浏览器的jquery版本为1.11.3，下面直接修改bower.json文件中的jquery版本号如下：

  "dependencies": {    "jquery": "~1.11.3"  }

然后执行如下命令：

bower update

bower就会为你切换jquery的版本了
包的查找
还有一个很重要的功能，就是包的查找，比如我想要安装bootstrap的某个插件，但是记不住名字了，就可以直接在命令行输入：

bower search bootstrap

bower就会列出包含字符串bootstrap的可用包了

包的卸载

卸载包可以使用uninstall 命令：

bower uninstall jquery

bower和npm的区别

bower和npm的区别

1. npm 是伴随Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。

2. bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。

   注释：嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了

3. 但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件都依赖同一个版本的jQuery。

4. 为什么有很多项目 bower 和 npm 都用呢，那是因为要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等。