什么是npm?Bower又是啥?

前言

我们在开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。
于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到一个包管理器上,如果要使用,直接通过包管理器安装就可以直接用,不用管代码存在哪,应该从哪下载。

因此使用包管理器主要基于以下几个原因:

  1. 方便的寻找和下载你需要的依赖库,并将它们整合到项目中,例如jQuery, Angular等。
  2. 方便的下载指定版本的依赖库(免除去网络上搜索和下载)
  3. 便于你使用简单的方法获取你想要的依赖库

NPM

概念

npm有两层含义。一层含义是Node的开放式模块登记和管理系统,网址为npmjs.org。另一层含义是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块。

npm不需要单独安装。在安装Node的时候,会连带一起安装npm。但是,Node附带的npm可能不是最新版本,最好用下面的命令,更新到最新版本。

npm install npm@latest -g

运行下面的命令,查看各种信息。

# 查看 npm 命令列表
$ npm help

# 查看各个命令的简单用法
$ npm -l

# 查看 npm 的版本
$ npm -v

# 查看 npm 的配置
$ npm config list -l

npm是一个让JavaScript程序员分享和复用代码的工具。有了它,JS程序员能高效地管理和发布自己要分享的代码。

package.json

npm init;

通过上面这条命令初始化,目录中会多了一个名为package.json的文件。
package.json用于说明NPM的配置信息。

package.json里面有两个对象是用来指定依赖的:

  1. “dependencies”:这个对象下面列出生产环境下的依赖
  2. “devDependencies”:这个对象下面列出开发环境的依赖

npm install

Node模块采用npm install命令安装。

每个模块可以全局安装,也可以 本地安装

  1. 全局安装:指的是将一个模块安装到系统目录中,各个项目都可以调用。一般来说,全局安装只适用于工具模块,比如eslint和gulp。
  2. 本地安装:指的是将一个模块下载到当前项目的node_modules子目录,然后只有在项目目录之中,才能调用这个模块。
# 本地安装
$ npm install <package name>

# 全局安装
$ sudo npm install -global <package name>
$ sudo npm install -g <package name>

npm install也支持直接输入Github代码库地址。

在安装之前,npm install会先检查,node_modules目录中是否已经存在指定模块,如果存在就不再重新安装了,即使远成仓库已经有了一个新版本也是如此。

如果希望一个模块不管是否安装过,npm都要强制安装,可以使用-f或–force参数:

npm install <packageName> --force

install命令可以使用不同参数,指定所安装的模块属于哪一种性质的依赖关系,即出现在packages.json文件的哪一项中。

  • 往package.json里面添加生产环境的依赖,被添加到dependencies:
npm install <package_name> --save
  • 添加开发环境的依赖,被添加到devDependencies:
 npm install <package_name> --save-dev

如果当前环境下有package.json,直接运行下面的命令:

npm install默认会安装dependencies字段和devDependencies字段中的所有模块。

npm update

如果想更新已安装模块,就要用到npm undate命令。

它会先到远程仓库查询最新版本,然后查询本地版本。如果本地版本不存在,或者远程版本较新,就会安装。

使用-S或–save参数,可以在安装的时候更新package.json里面模块的版本号。

npm info

npm info命令可以查看每个模块的具体信息。比如,查看underscore模块的信息。

npm search

npm search命令用于搜索npm仓库,它后面可以跟字符串,也可以跟正则表达式。

加上global参数,会列出全局安装的模块。

npm list命令也可以列出单个模块。

npm仓库

npm update命令怎么知道每个模块的最新版本呢?

npm 模块仓库提供了一个查询服务,叫做 registry 。
以 npmjs.org 为例,它的查询服务网址是 https://registry.npmjs.org/
这个网址后面跟上模块名,就会得到一个 JSON 对象,里面是该模块所有版本的信息
比如,访问 https://registry.npmjs.org/react,就会看到 react 模块所有版本的信息。
它跟下面命令的效果是一样的。

registry 网址的模块名后面,还可以跟上版本号或者标签,用来查询某个具体版本的信息。比如, 访问 https://registry.npmjs.org/react/v0.14.6 ,就可以看到 React 的 0.14.6 版。

返回的 JSON 对象里面,有一个dist.tarball属性,是该版本压缩包的网址。

要卸载安装过的包,用以下指令即可:

到这个网址下载压缩包,在本地解压,就得到了模块的源码。npm install和npm update命令,都是通过这种方式安装模块的。

Bower

概念

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
其他还有一些建立在Bower基础之上的开发工具,如YeoMan和Grunt。

前提准备

为了安装bower,你首先需要安装如下文件:

  • Node:下载最新版本的node.js
  • NPM:NPM是node程序包管理器。它是捆绑在nodejs的安装程序上的,所以一旦你已经安装了node,NPM也就安装好了。
  • Git:你需要从git仓库获取一些代码包。

安装Bower

一旦你已经安装了上面所说的所有必要文件,键入以下命令安装Bower:

这行命令是Bower的全局安装,-g 操作表示全局。

包的安装

Bower是一个软件包管理器,所以你可以在应用程序中用它来安装新的软件包。
举例来看一下来如何使用Bower安装JQuery,在你想要安装该包的地方创建一个新的文件夹,键入如下命令:

上述命令完成以后,你会在你刚才创建的目录下看到一个bower_components的文件夹,其中有一个jquery目录。
这样就可以在工程中使用jQuery了:

包的列表

如果你想找出所有安装在应用程序中的包,可以使用list命令:

包的搜索

假如你想在你的应用程序中使用twitter的bootstrap框架,但你不确定包的名字,这时你可以使用search 命令:

包的信息

如果你想看到关于特定的包的信息,可以使用info 命令来查看该包的所有信息:

包的卸载

卸载包可以使用uninstall 命令:

bower.json文件的使用

bower.json文件的使用可以让包的安装更容易,你可以在应用程序的根目录下创建一个名为“bower.json”的文件,并定义它的依赖关系。
使用bower init 命令来创建bower.json文件:

dependencies中说明了安装的模块及其版本。

总结

npm和bower太像了,就像一对孪生兄弟……
npm的文件是package.json,包安装的目录是node_modules。
bower的文件是bower.json,包安装的目录是bower_components。

使用命令也基本一致……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容