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

npm 的安装配置

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

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 config set registry https://registry.npm.taobao.org

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

npm config get registry

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

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

npm install -g cnpm --registry=https://registry.npm.taobao.org

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

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

使用npm安装react

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

npm init -y

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

cnpm install react react-dom --save

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

yarn

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