1. Vue

  2. Node.js

  3. 构建工具

  4. 路由

  5. 接口请求

  6. 状态管理

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 来安装一个包,了解其基本流程。

  1. 安装 node.js 时已经包含 npm,可以在命令行中输入 npm -v 检验 npm 是否已经安装并获得当前 npm 版本。

image

  1. 建一个空的文件夹,在命令行中进入创建的文件夹,并执行 npm init 初始化。

  2. 执行 npm install snake-cli-ts 来安装 snake-cli-ts 这个第三方库。安装完成后会多出 node_modules 文件夹、 package.jsonpackage-lock.json 文件。

  • node_modules:保存当前项目所需第三库的文件夹。
  • package.json:记录当前项目相关的信息,比如项目所引用的第三方库名称和版本号,项目名、版本号、快捷命令等。
  • package-lock.json:记录所有第三方库(包括第三方库的第三方库)的版本号、来源、hash 值等相关信息,只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。

image

  1. 刚刚我们安装的包是一个贪吃蛇的小游戏,可以在文件夹路径下运行 npm exec snake 运行 snake,玩一下。 image

常用命令

命令 描述
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