Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
npm 是什么?
npm 是 node.js 的一个包管理工具,用于管理我们所用的第三方库。
包管理工具
npm 这种包管理工具不是独创,在 python 中有 pip,java 有 maven,几乎各个语言都有。那么为什么会需要这种包管理工具呢?
想象一下,如果有一个功能大家都会用到,那么相比你自己写,去别人那拷贝一份过来岂不是更香。拿 U 盘拷或微信发送效率太低了,于是就有了 github 这种共享代码的平台,大家把写好的轮子往上一放。你想用哪个直接去搜然后下载放进你的项目就行了。 搜索+下载+放进项目
这个步骤还是太麻烦了,于是乎就有了 npm 这种包管理工具,一个命令 npm install xxx
就能把你想用的代码放进你的项目文件夹。
以上只是包管理工具的一个功能,npm 还会把你当前项目下安装的第三方库记录到 package.json
这个文件中。当你把代码发给别人或部署到服务器上时,只是执行 npm install
就可以一次性把项目所依赖的第三方代码库下载完成。(为什么不连同用到的第三方代码库一起打包给别人?因为这些文件太多了,一个成熟的项目第三方库可能都有上 GB 的大小。)
还有的就是,package.json
还会保存所用的第三方库的版本号。这样可以保证你开发时的第三方库版本与服务器上的版本一致。可以避免因为第三方库的升级导致接口变动,或存在未知 bug 导致项目运行失败。
npm 的学习路线
npm 的命令比较简单,如果只是为了日常使用可以查看本篇总结的 npm 常用命令。如有更多需求或不清楚的地方,可以查阅 npm 官方英文文档或 npm 中文文档。
上手 npm
我们尝试使用 npm 来安装一个包,了解其基本流程。
- 安装 node.js 时已经包含 npm,可以在命令行中输入
npm -v
检验 npm 是否已经安装并获得当前 npm 版本。
-
建一个空的文件夹,在命令行中进入创建的文件夹,并执行
npm init
初始化。 -
执行
npm install snake-cli-ts
来安装snake-cli-ts
这个第三方库。安装完成后会多出node_modules
文件夹、package.json
和package-lock.json
文件。
- node_modules:保存当前项目所需第三库的文件夹。
- package.json:记录当前项目相关的信息,比如项目所引用的第三方库名称和版本号,项目名、版本号、快捷命令等。
- package-lock.json:记录所有第三方库(包括第三方库的第三方库)的版本号、来源、hash 值等相关信息,只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。
- 刚刚我们安装的包是一个贪吃蛇的小游戏,可以在文件夹路径下运行
npm exec snake
运行snake
,玩一下。
常用命令
命令 | 描述 |
---|---|
npm init | 初始化 npm 项目,会在当前文件夹下添加 package.json 文件。 |
npm init <template-name> | 使用特定模板初始化当前 npm 项目。 |
npm install | 安装 package.json 中记录的所有的包。 |
npm install <package-name> | 安装特定包,并把包记录到 package.json 中。 |
npm uninstall <package-name> | 删除某个包,并将其从 package.json 中移除。 |
$$tip
init
有个别名 create
,效果是一样的。
$$
可能出现的问题
访问缓慢
由于 npm 服务器在国外,并且经常被墙。所以如果你不幸在安装包时发现特别慢或连接不上,可以尝试更改 npm 源为国内服务器。
有两种解决方法。
修改源
将 npm 源设置为淘宝源。
npm config set registry https://registry.npm.taobao.org
查看源地址。
npm config get registry
重置源地址。
npm config delete registry
设置代理
为设置 npm 设置代理,代理地址可以在 VPN 工具中找到。
npm config set proxy http://127.0.0.1:8080
npm config set https-proxy http://127.0.0.1:8080