npm的安装配置和React开发环境配置

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 的版本。

node -v
npm -v

由于 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 作为我们的包管理工具。

React 开发环境配置

如果我们使用 JSX 语法或 ES6 的新特性，我们编写的 React 代码是无法直接在浏览器中运行的，所以我们需要为 React 专门配置开发环境，用来将 React 代码编译为可以直接在浏览器中运行的代码，或者通过一些工具和库在浏览器中处理我们编写的 React 代码，以使其正确地运行。

体验 React

假如你只是想体验一下 React 的话，最快且最简单的方式是使用 React 官方提供的 Codepen 模板，只需要打开一个网址即可在浏览器中体验编写 React 代码。同样是由于国内的网络原因，部分同学使用 Codepen 的体验可能不会特别好，没有关系，再介绍给大家一个替代品，Codepan，也只需要打开一个网址。就可以开始愉快地编码啦，并且这个网站还是可以离线运行的单页应用。

下面是Codepen上的React模板：

使用 React CDN

我们也可以不使用包管理工具，直接在网页中引入 React ，官方同样为我们提供了一个体验 React 的网页模板。

使用 create-react-app 命令行工具

通过 npm，我们可以安装许多命令行工具。 React 官方专门为我们准备了专用的 React 项目生成工具 create-react-app，只需要简单几行代码即可生成 React 项目，并且在开发时还支持实时更新，自动重载等功能。

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

如果是我们完全地手工配置，则需要配置安装 Webpack/Babel 等工具库。所以对于初学者或想要快速开发应用的同学，create-react-app 就是你最好的选择。

最后

以上就是靓丽短靴为你收集整理的npm的安装配置和React开发环境配置的全部内容，希望文章能够帮你解决npm的安装配置和React开发环境配置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。