npm and bower

最新推荐文章于 2024-06-28 16:39:13 发布

lu592674374

最新推荐文章于 2024-06-28 16:39:13 发布

阅读量484

点赞数

分类专栏：前端文章标签：包管理

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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/

通过–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');

全局安装和本地安装

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

sudo npm install express          # 本地安装

全局安装
用作在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

准备工作
安装node环境:node.js
安装Git，bower从远程git仓库获取代码包:git简易指南
安装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 <jaynaruto@qq.com>"  ],
  "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的区别

npm 是伴随Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。
bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。

注释：嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了
但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件都依赖同一个版本的jQuery。
为什么有很多项目 bower 和 npm 都用呢，那是因为要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等。