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 |
