npm(Node Package Manager)是Node.js的包管理工具,相当于一个在线仓库。它提供了一个公共的平台,将分散在世界各地的包集中起来,能轻松的安装、分享和管理相关的包,不用再为搜索包而烦恼,并且npm能自动处理包的依赖项。它由三部分组成:

(1)网站:可用来浏览、搜索包的信息。

(2)注册表:一个巨大的数据库,保存了每个包的信息,例如作者、版本、依赖等。

(3)命令行界面(CLI):开发者可在CLI中对包进行发布、安装、卸载等操作。

  由于新版的Node.js已集成了npm,因此在安装完Node.js后就能使用npm了。

一、安装包

  npm有两种安装包的方式:本地安装和全局安装,从使用的命令格式来看(如下所示),两者只差一个“-g”参数(即标志)。

npm install <package_name> [-g]

  (1)如果代码要依赖于某个包(例如jquery、lodash等),那么应该用本地安装。在安装完后,就能在当前目录的node_modules目录中找到相应的包,通过require()函数就能引用到。

npm install jquery

  (2)如果要将包作为一个命令行工具(例如gulp、grunt等),那么应该用全局安装。在安装完后,就能在Node.js的安装目录或/usr/local的node_modules目录中找到相应的包。

npm install gulp -g

二、package.json

  package.json是一个位于项目根目录的文件,用于管理本地已安装的npm包,记录了项目的作者、依赖包、版本等各类信息。有了package.json,就能很方便的克隆一个项目,而不必再手动的安装相关的包,这样利于多人协作。

1)创建

  除了原始的手动创建之外,还能通过命令“npm init”或“npm init --yes”生成符合规范的package.json文件,初始化的结果如下所示。

{
"name": "demo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "strick",
"license": "ISC"
}

  上面只列出了package.json的部分字段(属性),对它们的说明可参考表1,其中第三列会结合示例给出相应的值或用法,package.json的剩余字段可参考官方文档

表1  package.json的字段

字段 描述 值或用法
name 名称,小写且无空格,能与“-”或“_”符号混合 "demo"
version 语义化的版本号(后文会有讲解) "1.0.0"
description 描述信息 "test"
main 程序的主入口文件 当执行require("demo")时,就会加载根目录下的index.js
scripts 脚本命令 在运行时需要与“npm run”配合,例如“npm run test”
keywords 关键字,利于检索 []
author 作者 "strick"
license 许可证 "ISC"

2)依赖

  在package.json中,有两个字段都记录着项目的依赖包,如下所列。

  (1)dependencies:在生产环境中所依赖的包,其安装命令需要“--save”参数。

npm install <package_name> --save

  (2)devDependencies:在开发环境中所依赖的包,其安装命令会比dependencies多一个“-dev”参数。

npm install <package_name> --save-dev

  当执行下面的两条命令后。

npm install lodash --save
npm install underscore --save-dev

  在package.json中就会多两段信息,如下所示。

{
"dependencies": {
"lodash": "^4.17.11"
},
"devDependencies": {
"underscore": "^1.9.1"
}
}

  将上述包含依赖的package.json文件分享到其它项目时,只要在该目录中运行下面的命令,就能自动安装所需的包,并且指定了包的版本,以免无法启动项目。

npm install

3)版本

  npm遵循semver版本规范,使用语义化的版本号来管理包,并且能设置版本范围。一个版本号包含三位:X.Y.Z,分别代表主版本号(X)、次版本号(Y)和补丁版本号(Z),取值为非负整数,个位数不会补零。首次发布的新产品,其版本号从“1.0.0”开始。

  如果要升级版本号,那么可以遵循下面所列的这三个规则。

(1)当有重大变化、不向下兼容时,递增主版本号(X),其余两位(Y和Z)置零,例如“2.0.0”。

(2)当发布了向下兼容的新功能时,递增次版本号(Y),最后一位(Z)置零,例如“1.1.0”。

(3)当只是修复向下兼容的错误时,递增补丁版本号(Z),其余两位保持不变,例如“1.1.1”。

  除了可以声明一个固定版本号之外,还能通过多个符号(例如^、~、>、x、*等)指定版本号的范围。接下来只介绍其中的两个,每个符号后面都会给出对应的版本号范围。

  (1)如果在版本号之前加上^,那么符合的版本号的X位要与其相同,并且剩余两位不小于指定的版本号。

^1.2.3 = [>=1.2.3 <2.0.0]
^0.2.3 = [>=0.2.3 <0.3.0]

  (2)如果在版本号之前加上~,那么符合的版本号的X位和Y位要与其相同,并且Z位不小于指定的版本号。

~1.2.3 = [>=1.2.3 <1.3.0]
~0.2.3 = [>=0.2.3 <0.3.0]

三、包和模块

  在Node.js和npm中,虽然对包和模块有非常具体的定义(如下所列),但是大部分人还是会混淆。

  (1)包(package)是由package.json描述的文件或目录。

  (2)模块(module)是任何能被Node.js的require()函数加载的文件或目录,下面是模块常见的三种形式。

    1)包含package.json文件且定义了main字段的目录。

    2)包含index.js文件的目录。

    3)JavaScript文件。

  由此可知,大多数的npm包都是模块,只有一些特殊的包(例如只提供了命令API而没有定义main入口的CLI包)不能被认为是模块。

四、常用命令

  npm不仅包含基本的查看命令,例如查看版本号或包的信息等;还包含实用的辅助命令,例如查看指定的命令可组合的参数形式,如下所示。

npm -v                   查看npm的版本号
npm ls 查看当前目录安装的包的信息
npm install --help 查看npm install可使用的参数形式

  除了查看之外,还有其它几个常用的操作,例如安装、卸载、更新、搜索、发布等。下面以lodash为例,列出了相关的命令。

npm install lodash@4.0.1           安装4.0.1版本的lodash
npm uninstall lodash    卸载lodash
npm update lodash     更新lodash
npm search lodash     搜索lodash
npm publish lodash     发布lodash

五、淘宝npm镜像

  因为npm上的包都保存在国外服务器中,所以受网络影响大,很容易出现异常。在国内推荐使用淘宝npm镜像,这是一个完整的npmjs.org镜像,同步频率为10分钟一次,保证了与官方服务同步。只需要运行下面的安装命令,就能用淘宝定制的cnpm替代默认的npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

  由于cnpm的用法和npm完全一致,因此依然可以像下面这样安装lodash。

cnpm install lodash@4.0.1

前端利器躬行记(1)——npm的更多相关文章

  1. 前端利器躬行记(2)——Babel

    Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...

  2. 前端利器躬行记(3)——webpack基础

    webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CS ...

  3. 前端利器躬行记(4)——webpack进阶

    webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map.模块热替换.集成等,本文会对这些内容做依次讲解. 一. runtime和manifest ...

  4. 前端利器躬行记(8)——VSCode插件研发

    VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 ...

  5. 前端利器躬行记(5)——Git

    Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软 ...

  6. 前端利器躬行记(6)——Fiddler

    Fiddler是一款免费的.基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本.注意,由于Fiddler依赖Mic ...

  7. ES6躬行记(1)——let和const

    古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...

  8. ES6躬行记 笔记

    ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向

  9. Node.js躬行记(4)——自建前端监控系统

    这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2.将性能和错误量化.因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统.其实在很早以前就有这个想法,当时已经实现了前端的参 ...

随机推荐

  1. Hash的应用2

    代码: #include <stdio.h> #define OFFSET 500000//偏移量 ];//记录每个数是否出现,出现为1,不出现为0 int main(){ int n,m ...

  2. python的@修饰符

    ‘@’引用已有的函数,对下面的函数进行修饰.引用函数必须放在修饰函数的上面,引用函数的返回值,返回给被修饰的函数 一个简单的栗子: def funA(fn): print('A') # 输出A fn( ...

  3. py+selenium+unittest遇到HTMLTestRunner_cn文件报错:ZeroDivisionError: float division by zero【已解决】

    问题:遇到HTMLTestRunner_cn文件报错:ZeroDivisionError: float division by zero HTMLTestrunner_cn.py是从网上下的,照理说应 ...

  4. 批量替换git目录的远程仓库URL地址脚本

    需求: 1. 输入work-dir 工作目录 2. 扫描工作目录中的子目录 3. 对每一个子目录, 判断是否是git repo 4. 确认是git repo, 获取git origin remote- ...

  5. Python3安装与使用urllib2包之小坑

    Python3 安装urllib2包之小坑 Python3.6.6或者说python3.x找不到urllib2语法问题修改之后,会报一个没有安装urllib2的包的错误. 通过pip install ...

  6. 为 Editor.md 编辑器插件增加预览和发布按钮

    前言 一直在使用 Editor.md 插件作为博客的编辑器,用着挺好,但是在全屏下编辑时,每次想预览或者保存又必须切换到非全屏状态下才可以点击按钮,用着不舒服,所以花了一点时间在工具栏上增加了预览.保 ...

  7. 入门训练-1.A+B问题

    问题描述 输入A.B,输出A+B. 说明:在“问题描述”这部分,会给出试题的意思,以及所要求的目标. 输入格式 输入的第一行包括两个整数,由空格分隔,分别表示A.B. 说明:“输入格式”是描述在测试你 ...

  8. Java后台处理框架之struts2学习总结

    Java后台处理框架之struts2学习总结 最近我在网上了解到,在实际的开发项目中struts2的使用率在不断降低,取而代之的是springMVC.可能有很多的朋友看到这里就会说,那还不如不学str ...

  9. supervisor指南

    1 安装 yum install -y supervisor 如果提示没有这个安装包,则需要添加epel源 wget -O /etc/yum.repos.d/epel.repo http://mirr ...

  10. wangEditor富文本编辑器使用及图片上传

    引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...