前端利器躬行记(1)——npm

简介: 前端利器躬行记(1)——npm

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()函数就能引用到。

C

npm install <package_name> [-g]

  (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
相关文章
|
7月前
|
前端开发 JavaScript API
前端 npm anywhere 与 npm now 网页随时真机测试
前端 npm anywhere 与 npm now 网页随时真机测试
143 0
|
6月前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
356 3
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
1382 0
|
2月前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
411 0
|
2月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
134 0
|
4月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
152 1
|
6月前
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
162 8
|
6月前
|
前端开发 JavaScript 开发者
NPM简介与使用指南:打造前端开发的利器
NPM简介与使用指南:打造前端开发的利器
130 0
|
7月前
|
前端开发 JavaScript 开发者
探秘npm:解锁前端生态的魔法工具
探秘npm:解锁前端生态的魔法工具
113 0