NPM是什么
NPM(Node Package Manager)是Node的包管理工具,所谓的包就是一坨代码,可以是一个文件也可以是一个目录。出于代码复用的目的,我们需要对不同的包进行管理,以便于在使用的时候快速获取,最初的时候是将这些包放在CDN上,然后在项目中直接引用。而随着前端工程化的发展,前端项目越来越大、越来越复杂,所需要的包和依赖也越来越复杂,各种依赖包之间的版本更新也不同步,为了解决这个问题,所以出现了NPM。

如何安装和使用NPM
NPM的基础是Node.js,它是连接操作系统和JavaScript之间的桥梁,原来JavaScript只能在浏览器中运行,一些如操作文件、发送提醒等操作以前是无法实现的,因为浏览器会限制权限,而Node.js提供了这种可能。安装Node.js可以直接在官网下载对应的版本安装即可,Node.js安装完毕后默认NPM也就安装好了,可以通过在命令行运行”npm -v”或”node -v”来查看响应的版本,并验证是否安装成功。
NPM的常用操作
在一个空白目录新建一个 index.html 文件,然后在文件中通过<script>标签不断引入 js 脚本(或<link>标签引入css文件),以 jQuery 为例,可以在 “www.bootcdn.cn” 或者 jQuery 官网查找响应版本的CDN链接,然后插入文件。
上面是原始的方式,有了NPM之后,我们可以通过NPM来进行包管理,方法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
# 生成 package.json 配置文件 npm init -y # 使用 -y 是避免回答各种问题,等价于 --yes # package.json 生成后内容示例 { "name": "npm_test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } # 安装某个特定的包,以 jQuery 为例 npm i jquery # i 是 install 的简写 # 安装的包默认会保存的当前目录中的 node_modules 文件夹中,git上传时不会提交该文件夹 # 安装包后,package.json文件会记录包名和版本到depenencies中 "dependencies": { "jquery": "^3.4.1" } # NPM下载安装了特定的包后,如果需要在HTML中引用,可以直接使用 node_modules 中的文件 <script src="node_modules/jquery/dist/jquery.min.js"></script> # 而git提交后没有node_modules,下载后可以使用npm根据package.json中的包依赖信息复现开发环境 npm i # 老版本的 npm 需要显式声明才会保存包信息到package.json依赖中,如: npm i normalize.css --save # 需要更新某个特定的包到最新版本 npm update jquery #相当于 npm update jquery@latest # 更新某个特定的包到指定版本 npm update jquery@1.2.3 |
NPM的常用配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "npm_test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" "haha": "echo \"here is my test haha \" " }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.4.1" }, "devDependencies": { "webpack": "^3.5.5" } } |
npm生成的package.json配置文件的常用配置项参见上例,其中有几个需要介绍:
scripts
用于指定npm运行命令的快捷方式,以这里的test为例,使用”npm run test”就会输出定义的echo信息。
dependencies
项目依赖信息,只有在npm install后才会生成,最开始使用npm init并没有该项信息。该配置是特指生产环境中使用的包和版本依赖信息。
devDependencies
仅作为测试和开发工具使用,不会在生产环境使用的包和版本依赖信息。这种包的安装需要显示声明为开发环境依赖:
1 |
npm i webpack --save-dev |