开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-npm 包管理工具 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11319
前端技术-npm 包管理工具
内容分介绍
一、npm 简介
二、演示 npm 具体操作
一、npm 简介
1、什么是 NPM
NPM 全称 Node Package Manager，是 Node.js 包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的;也是 Nodejs 的包管理工具，相当于前端的 Maven (在后端开发中，使用过 maven,maven 用于构建项目管理 jar 依赖，联网下载依赖，npm 类似于 maven 用在前端中，管理前端js依赖，联网下载 js 依赖，比如 jquery)
2.安装 npm
在安装 node.js 时 npm 也会安装上
查看是否安装成功，使用命令 npm-v
在终端中打开
e:\work\vs1010\axiosdemo＞npm-v
6.4.1
回车出现
e:\work\vs1010\axiosdemo＞证明 npm 已经安装成功
3.NPM 工具的安装位置
通过 npm 可以很方便地下载 js 库，管理前端工程。
Nodejs 默认安装的 npm 包和工具的位置:Nodejs 目录\node_modules
在这个目录下你可以看见 npm 目录，npm 本身就是被 NPM 包管理器管理的一个工具，说明 Node.js 已经集成了 npm 工具
二、演示 npm 具体操作
1.npm 项目初始化操作
新建文件夹名为 npmdemo,前端不仅是简单写页面，里面同样可以做各种功能，npm 对项目进行初始化，使它变成前端项目，不仅仅是一个普通文件夹
在 npmdemo 右键打开终端，使用命令 npm init,
e:\work\vs1010\axiosdemo＞npm init
回车
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
see ´npm help json'for definitive documentation on these fields
and exactly what they do.
Use ´npm install 'afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to guit.
package name: ＜npmdemo＞
这里不是报错，是让你输入信息，一般使用默认信息 package name(包名字）为npmdemo(项目名字)点击回车
version:(1.0.0)版本号
description:项目描述
entry point:(index.js) 程序入口前端入口一般为js文件
test command:测试的东西
git repository:git的仓库
keywords:
author:
license:(ISC)
About to write to e:work\vs1010\npmdemo\package.json:
Is this OK? (yes)是否确定，写yes回车出现
e:\work\vs1010\axiosdemo＞表明项目初始化完成
初始化完成后，可以看到在 npmdemo 下出现一个文件夹，文件名为package.json，类似于后端 pom.xml 文件
刚才操作过程中点了很多次回车，如何让它全部使用默认不需要点击回车？
需要将命令简化，e:\work\vs1010\axiosdemo＞npm init-y (-y表示使用默认）回车后文件直接生成
"name": "npmdemo"
"version": "1.0.0",
"description":""
"main": "index.js",
回车后出现这些基本信息，表明初始化已经做到
2.npm 下载 js 依赖
(1）修改 npm 镜像
NPM 官方的管理的包都是从http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝NPM镜像http://npm.taobao.org/，淘宝NPM镜像是 一个完整npmjs.com 镜像，同步频率目前为10分钟一次，以保证尽量与官方服务同步。
设置镜像地址:
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看 npm 配置信息
npm config list
e:\work\vs1010\npmdemo>npm config set registry https://registry.npm.taobao.org首先设置淘宝镜像回车出现e:\work\vs1010\npmdemo>
查看镜像是否成功e:\work\vs1010\npmdemo>后加npm config list回车
e:\work\vs1010\npmdemo>npm config set registry https://registry.npm.taobao.org e:\work\vs1010\npmdemo>npm config list
;cli configs
metrics-registry ="https://registry.npm.taobao.org/"
scope=""
user-agent -="npm/6.4.1node/v10.14.2 win32 x64"
;userconfig c:\users\lenovo\.npmrc
registry="https://registry.npm.taobao.org"
;builtin config undefined
prefix = "c:\\users\\lenovo\\AppData\\Roaming\\npm"
;node bin location =D:\Program Files\nodejs\node.exe
;cwd=e:\work\vs1010\npmdemo
;HOME=C:\Users\lenovo
;"npm config ls -l" to show all defaults.
e:\work\vs1010\npmdemo>
表明淘宝镜像已经完成
(2）npm install 命令的使用(npm install 依赖名称）
e:\work\vs1010\npmdemo>npm install jquery
回车
npm notice created a lockfile as package-lock.json. You should commit this file.
npm wARN npmdemo@1.0.0No description
npm wARN npmdemo@1.0.0 No repository field.
+jquery@3.4.1
added 1 package from l contributor ln 1.796s
e:\work\vs1010\npmdemo>
下载以后 npmdemo 下多出 node_modules 文件夹，
node_modules 下有 jQuery,还多了一个 package-lock.json 文件
package-lock.json 中多了
"dependencies":｛
"jquery":"^3.4.1"
就是依赖，3.4.1表示目前所下依赖为最新版本lock表示锁定当前项目只能用3.4.1版本，不可以用别的版本
＃如果安装时想指定特定的版本
npm install jquery@2.1x
(3）根据 package.json 文件下载依赖
在配置文件中有
"dependencies":｛
"jquery":"^3.4.1"
使用 npm install 命令下载
e:\work\vs1010\npmdemo>npm install
npm wARN npmdemo@1.0.0No description
npmWARN npmdemo@1.0.0 No repository field.
added 1 package from 1 contributor in 0.852s
e:\work\vs 1010\npmdemo>
文件夹出现，表明依赖下载成功，必须在项目文件中点击右键打开进行操作，不可以在别的文件中打开操作
(4）项目中相关插件
devDependencies 节点:开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用-D 梦数将依赖添加到 devDependencies 节点
npm install --save-dev eslint
#或
npm install -Deslint
全局安装
Node.js 全局安装的 npm 包和工具的位置:用户目录\AppData\Roaming\npm\node_modules #一些命令行工具常使用全局安装的方式
npm install -g webpack
(5)其他命令
哈哈哈哈哈
#更新包(更新到最新版本)
npm update 包名
＃全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
