一、前端入坑计划之NPM基础

一、前端入坑计划之NPM基础

随着时代的发展，后端程序员已经越来越难在行业中混下去了。所以不得不开始制定对前端的学习计划，那么本章先从NPM开始学习吧！

1.为什么要先接触NPM

因为好用，因为大家都用。
当然，也是因为后面我们要接触Vue、Vuex、Vue-Router 、Ant-design-vue都会频繁的提到并且使用到NPM，所以为了到时候不会那么一头雾水，我们先来学习学习简单的几条指令，留下记忆。

程序员似乎自产生就骨子里有着乐于分享信息和资源的优秀品质，在很早之前，大家都是通过分享自己的网站来共享代码、资源。项目中所需要的包及依赖都可以通过指定的网站或者指定的链接进行下载，可是随着项目中所涉及的包及依赖越来越多时，就会发现这种通过官方网站或者链接方式下载资源的办法是非常麻烦的，因此这时一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出了一个解决方案：用一个工具把这些资源包统一的管理起来，接着npm就应时而生。npm的发展肯定是与node脱不了关系的，最初node.js是因为缺少一个包的管理器，于是node与npm的作者就协作一起，是的node.js里面内置了npm。随着前端不断发展，node.js火了，顺带npm也火了，大家都是用npm来共享代码了，而npm也不仅仅是像当初那样只是node的包管理器，其已经可以称之为JS的包管理器了。

那么NPM确实是非常之牛的不行，简单来说，他可以做到以下三点。

① 允许用户从npm服务器上边下载开源爱好者编写的第三方包及命令行程序到本地使用

② 允许用户将自己的包上传到npm服务器上

③ 允许用户将自己的命令行程序上传到服务器上

npm 依赖包的安装、更新、删除

1.安装

1.1 安装但不写入package.json（基本上没什么用）
npm install xxx

1.2 安装并写入package.json的"dependencies"中（好用）
npm install xxx –S

1.3 安装并写入package.json的"devDependencies"中
npm install xxx –D

1.4 全局安装（好用）
npm install xxx -g

1.5 安装指定版本
npm install xxx@1.2.0

2.更新

2.1 先检查更新

npm outdated

2.2执行以上命令，可以看到所有可以更新的模块。我们需要先更新 package.json文件：
安装"npm-check-updates"模块

npm install -g npm-check-updates

2.3 检查可更新的模块

ncu

npm-check-updates

2.4
以上两条命令都可检查可更新模块。接下来更新package.json的依赖包到最新版本：

ncu -u

2.5
以上命令执行，更新全部模块。但在实际开发中不建议一次全部更新，可以根据实际需要，更新指定的模块，并且可以根据作用范围在后面加上 -D、-S 或 -g

npm update xxx

注意：指定更新需要提前修改 package.json 中的版本号。

2.6
为了保险起见，package.json 更新后，可删除整个node_modules目录并重新初始化项目。

这里小小说下，因为会使用到rimraf 工具，如果没有安装的话是使用不了的。

安装rimraf工具

npm install -g rimraf

开始操作
首先删除 node_modules 包和 package-lock.json 文件，并清楚缓存

rimraf node_modules
rimraf package-lock.json
npm cache clear --force

注意：node_modules 和package-lock.json 都需要删除，如果只删除 node_modules 也是不可以的。

然后重新安装依赖包，其实这里使用镜像只是为了快一点，有时候会翻车，所以看情况使用。

npm config set registry [https://registry.npm.taobao.org]
npm install

安装完成会自动生成 package-lock.json 文件

最后记得要重启项目,具体根据package.json的命令进行使用。

npm run dev/server