1-2-npm 的安装配置说明

npm 的安装配置

工欲善其事,必先利其器。在正式学习 React 技术栈之前,我们先来介绍一下之后经常要使用到的 npm.

前端初学者的一大障碍就是 npm 的使用,总是会出现包安装不上或者安装不完整,命令行一大堆 error 或者 warning 看不懂。而绝大多数情况下包安装不好并不是你的错,而是我大清自有国情在此,按照本篇教程设置完你的 npm 之后,至少可以解决你使用 npm 时 90% 的困扰。

npm 是一个基于 nodejs 的 JavaScript 包管理工具,全称叫做 node package manager,所谓的包呢,其实就是可复用的代码,每个人都可以把自己编写的代码库发布到 npm 的源(英文叫做 registry)上面进行管理,你也可以下载别人开发好的包,在你自己的应用当中使用。

我们所熟知的,jQuery/Bootstrap/React 等框架或库都被托管在 npm 上。通过使用 npm 作为项目的包管理工具,我们可以很方便地在我们的开发项目中引入以及管理第三方的框架或者库,而不需要像以前前端开发的原始时期一样,手动复制粘贴代码文件。

其实 npm 的安装以及基本的使用方法都非常的简单,只是由于国内糟糕的网络原因,在安装完成之后,我们还需要手动进行一些调整和配置,另外一方面也是照顾到初学者,所以在课程正式开始之前,我们先专门介绍一下 npm 的安装以及如何通过 npm 来管理我们的 React 开发项目。

npm 的安装非常简单,不管你是用的是什么操作系统,我们只需要打开 nodejs 官网,网站会自动匹配你的系统显示相应的安装包,点击最新版本的下载按钮,等待安装包下载完成。

之后只需要双击打开安装包,稍等待一段时间,具体等待时间的长短和你的网速及硬件配置有关,等待安装程序预配置完成之后,根据提示,点击下一步,同意用户协议,再不停地点击下一步,在安装内容当中,确保配置环境变量的选项是被勾选中的,之后再确定进入下一步,等待安装完成即可。

之后我们可以打开控制台,输入 npm 或 node 检验是否安装成功。附加 version 参数可以查看我们安装的 npm 及 node 的版本。

由于 npm 官方的服务器在国外,在国内使用可能会遇到很多网络问题,而且速度也非常慢,为了方便我们的开发,我们需要手动切换 npm 到国内的镜像源。国内最稳定的镜像源是淘宝提供的。

打开淘宝 npm 镜像的官网,我们可以看到简要的使用说明。首先,在这里,我们可以获取到镜像的地址,先复制备用。之后打开命令行,注意到这里,因为我们的 npm 默认是安装在系统文件夹下的,所以需要以管理员模式打开命令行,否则在安装包的过程中可能会出现一些权限问题。

在命令行中,我们输入

来修改npm默认的安装源,通过

来检验一下刚才的配置是否成功。

除此之外,我们还可以使用淘宝镜像提供的cnpm工具,通过cnpm来安装包一般速度会更快一些,我们可以直接复制文档中的命令:

粘贴在命令行中,回车进行安装,初次安装需要等待的时间可能会比较久,一定要有耐心。

等待安装完成之后,我们可以在命令行输入cnpm -v来测试是否安装成功。

使用 npm 安装 React

接下来,我们可以尝试一下,使用 npm 安装 React 到我们的项目中。在我们的工作目录,按住 shift 点击鼠标右键,在弹出的菜单中选取“在此处打开命令行”,创建一个项目的文件夹,例如 learn-react ,使用 cd 命令切换至文件夹中,输入:

使用默认设置初始化我们的项目的 npm 配置,在项目目录中会生成一个 package.json 文件,里面会保存我们项目的基本信息、命令脚本以及依赖的库等信息。再然后,我们可以通过命令:

来安装 React,并将其保存到我们的项目依赖当中。现在再来看一下 package.json 文件,我们可以看到其中的 dependencies 已经保存了 react 的信息了。

yarn

其实还有另外一个包管理工具 yarn,yarn 是由 facebook 推出的包管理客户端,优于 npm 客户端的是它会缓存已经下载过的包并做了一些其他方面的优化,速度要比 npm 快,还添加了一些别的 npm 不具备的特性。yarn 的官网及文档全部都有中文,对用户十分友好,有兴趣的同学可以去尝试,不过在本教程当中,我们仍然会继续使用 npm 作为我们的包管理工具。

 

欢迎关注 余博伦 微信公众号