重构谷粒商城12：npm快速入门
原创
npm快速入门
前言：这个系列将使用最前沿的cursor作为辅助编程工具，来快速开发一些基础的编程项目。目的是为了在真实项目中，帮助初级程序员快速进阶，以最快的速度，效率，快速进阶到中高阶程序员。
本项目将基于谷粒商城项目，并且对谷粒商城项目进行二次重构，使其满足最新的主流技术栈要求。包括若依脚手架、大模型、知识库等的嵌入。
上篇文章介绍了node，这篇文章作为加餐，给不熟悉npm的后端程序员扫扫盲，快速入门npm。不至于太懵。下篇文章将介绍webpack。敬请期待。
1、npm的地位
先看下前端的技术栈，了解下npm的地位。
2、什么是npm？
简而言之，类似后端的maven。
这是不用npm下载jquery的方式。
下bootstrap，还要再找。版本更新，要重新找。比较麻烦。
npm简化了一切，不用自己下载了。后面你会慢慢感受到。
官网。
3、npm安装
和node.js相辅相成，node内置了npm。
这里下载node我们前面文章已经讲好多次了。没有装的同学自行安装下。
验证下。可以看到下面版本信息，就是安装成功喽。
4、npm的基本使用
使用npm在项目中安装jquery，很简单、清爽。
不过，现在安装有点慢，我们需要搞个国内镜像先。
成功后，下载起飞咯。
下图总结了npm常用的命令。
注意上面-save参数，是运行时依赖，在开发、运行时都需要有这个依赖，默认参数就是它，打包时会带上这个依赖。-save-dev则是开发时依赖，在运行环境不需要该依赖。打包时不会打这个包。上面的控制是通过配置文件package完成实现的。
真的很简单，我就不演示了。
补充下通过npm卸载包、升级包。
这里补充下，你怎么知道通过npm安装软件指定哪个版本呢？
可以去npm官网搜，看看有啥版本，再选型。
5、package.json文件属性讲解
执行npm init就会自动在项目路径生成package.json配置文件。
可以在package.json中定义脚本。
生成package.json后，执行npm install xx ，会生成package-lock.json，这是基于package.json生成的。这个文件我们后面再做讲解。
同时，package.json文件也会增加以下内容。
这样，别的开发者，拿到代码，执行npm install，就会自动下载对应版本的依赖了。
上面^符号是什么意思，简单来说，^3.5.1，就会自动下载最新的3.x.x。大版本固定，小版本下最新的。
如果是~3.5.1,就是只更新最后一个小版本，更新为最新的3.5.x.
接下来说下package-lock.json。
总而言之，官方就是这么设计的。你觉得不合理也好。了解区别，可以手动更新package.json，不能更新package-lock.json。提交代码时必须提交package-lock.json,否则无法保证一致性。
6、NPM安装的包使用
所以，下篇文章我肯定还是需要给大家介绍下webpack打包工具的。虽然我这顺序我自己也觉得有点乱，但总之不影响读者阅读、学习。而且会把技术栈全都介绍到位，没有到位的也可以给我评论区留言。接受合理建议。
好了，言归正传，讲讲没有webpack时咱怎么用npm安装的包。
第一种方法。手动在代码中导入。在html中定位路径引用包中文件，这么用和没有npm前也没有啥区别，太麻烦了。
方法二，稍微简单一点。这是node的语法，只需要写下模块名字。
7、练习：通过NPM安装包来解决ES6语法兼容性问题
实际demo下，将babel引入代码中，在客户端渲染解决浏览器兼容问题。
但是这样会加大页面渲染时间，我们可以在服务端渲染，解决这个问题。这就需要npm了。
如果我们的镜像中没有这个包，可以在npm install时指定镜像。
确认下。
写配置文件。
把插件也装上。
项目根目录下新建src和渲染目录lib，在src下新建index.js文件。
环境都准备好了。接下来在package.json中，将后台渲染过程直接写到脚本里。
保存后，使用npm build下。
在lib下就会自动生成浏览器兼容的代码了。
8、npm竞品：yarn的安装和使用
不过npm5以后就修复了bug啦
使用起来，轻轻松松。
下篇文章将介绍webpack。敬请期待。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
