npm和bower的关系和区别

更新日期: 2018-06-20阅读: 3.8k标签: npm

前言

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

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

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


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里面有两个对象是用来指定依赖的:

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


npm install

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

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

  • 全局安装:指的是将一个模块安装到系统目录中,各个项目都可以调用。 
    一般来说,全局安装只适用于工具模块,比如eslint和gulp。
  • 本地安装:指的是将一个模块下载到当前项目的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

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


npm update

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

# 升级当前项目的指定模块
$ npm update [package name]

# 升级全局安装的模块
$ npm update -global [package name]

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

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


npm info

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

npm info underscore


npm search

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

npm search <搜索词>


npm list

npm list命令以树型结构列出当前项目安装的所有模块,以及它们依赖的模块。

npm list

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

npm list -global

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

npm list underscore


npm仓库

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

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

npm view react
# npm view 的别名
npm info react
npm show react
npm v react

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

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

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

dist: {
  shasum: '2a57c2cf8747b483759ad8de0fa47fb0c5cf5c6a',
  tarball: 'http://registry.npmjs.org/react/-/react-0.14.6.tgz' 
},

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

npm uninstall --save jquery


Bower

概念

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


前提准备

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

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


安装Bower

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

npm install -g bower

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


包的安装

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

bower install jquery

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

<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>


包的列表

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

bower list


包的搜索

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

bower search bootstrap


包的信息

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

bower info bootstrap


包的卸载

卸载包可以使用uninstall 命令:

bower uninstall jquery


bower.json文件的使用

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

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
    "Shekhar Gulati <shekhargulati84@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "~3.0.0"
  }
}

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


总结

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

使用命令也基本一致……


链接: https://fly63.com/article/detial/888

在5分钟内搭建企业内部私有npm仓库

下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....

使用webpack开发npm插件

webpack:解析js文件,无法解析的文件需要借助loader,npm插件发布(vue&webpack&单页面):npm init =>package.json,创建.vue文件 =>插件界面及功能,index.js =>入口文件

npm命令大全_整理NPM常用命令

NPM是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。这篇文章整理NPM常用的一些命令

npm 执行多个命令_如何用npm同时执行多条监听命令

直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?

npm run build根据不同参数打包不同环境url

这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx,根据传递参数xxx来判定不同的环境,给出不同的域名配置,具体内容详情大家参考下:config文件夹下dev.env.js中修改代码、prod.env.js中修改代码 HOST为截取到的参数

npm安装模块时报错:no such file or directory

使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。

vue-cli 3.x 开发插件并发布到 npm

抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼

前端npm 安装包,精选大全集合

如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

在NPM发布自己造的轮子

自从Node.js出现,它的好基友npm(node package manager)也是我们日常开发中必不可少的东西。npm让js实现了模块化,使得复用其他人写好的模块(搬砖)变得更加方便,也让我们可以分享一些自己的作品给大家使用(造轮子)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!