React 之 使用脚手架搭建项目，以及集成项目所需的各种插件 详解

本篇文章所用到的官方网站：

   - Node.js中文网
   - React官网
   - React中文官网
   - npm官网
   - Ant Design
   - redux官网
   - redux中文网

  

前言（已安装过Node.js的可直接跳到脚手架）

1、安装Node.js以及nrm 网速管理工具、cnpm安装工具

  首先，确保自己安装了Node.js，因为我们要使用Node.js自带的npm包管理工具，如有未安装的，可自行去百度搜索Node.js，进入Node.js的官网链接: Node.js中文网.下载；

  然后考虑到 npm 下载默认都是通过国外的网站下载的，因此我们需要再安装一个 nrm 网速管理工具：

npm i nrm -g

测试是否安装成功，在命令行输入以下命令以检验版本号，如果出现版本号则表示安装成功：

nrm --version

接着使用 nrm 查看当前哪个镜像源网速更快（需要一会时间测试），在命令行输入以下命令：

nrm test

稍等一会之后命令行显示：

  前面出现*的代表的是你当前使用的镜像源；说明：taobao的服务器是在国内，所以相对的下载使用该镜像源的速度更快，在这里我是已经切换好了的；
  
如何切换镜像源：

nrm use 镜像源的名称
// 示例
nrm use taobao

另外，也可以使用 cnpm下载工具来下载，功能与 npm是一样的；

// 全局安装 cnpm 
npm install cnpm -g

  下面的安装示例皆是以 cnpm的安装方式来安装的，是否使用cnpm安装工具，IT界中众说纷纭，在此便不多说了。
  

OK，进入正题！
  
  

脚手架

2、安装React脚手架
  
进入React官网，找到如下图所示页面，按照文档操作；

上面的安装命令，可拆分成两个命令：

1）安装react脚手架

// 建议使用全局安装
cnpm install create-react-app -g

2）使用脚手架创建项目文件夹

create-react-app 项目名称
// 示例
create-react-app test

创建项目文件夹需要一会时间，稍侍等待……

安装完成之后命令行出现如上图所示页面，然后cd到项目文件夹：

cd test

运行项目：

npm start

检测项目是否创建成功：

  运行项目之后会自动打开浏览器页面，如上图所示，出现上图则代表脚手架初步成功且运行成功！

项目文件夹目录结构如下：

接下来需要再输入以下命令将该项目文件夹目录还原：

npm run eject

命令运行过程中如果出现报错，则按顺序输入以下命令，先将文件使用 git工具提交到本地仓库存储之后再输入npm run eject：

git init
git add .  
git commit -m 'first commit'
npm run eject

执行完命令之后的项目文件夹目录如下：

  自此，使用脚手架搭建项目完成！
  
  

脚手架中的常用个性配置

1）自定义端口号（可选）

在 /scripts/start.js 中搜索 PORT

  这个3000就是端口号，可自行修改，建议使用8000之后的数字作为端口号；
  
2）配置 @ 别名（可选）

// 在/config/webpack.config.js 里找到 resolve 的 alias，然后在alias中配置：
'@': path.resolve(__dirname, '../src') // 这里是将 @ 指向 src 文件夹的目录下

3）favicon.ico制作（可选）

  找免费在线制作网站，加入图片，然后选择并下载 32*32的尺寸。

4）本地环境配置代理（可选）

安装 ：

cnpm install http-proxy-middleware -D

在 src 目录下新建代理文件 setupProxy.js，然后在该文件里面配置如下代码：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://xxx.com',   // 目标服务器
        changeOrigin: true
      })
    );
  };

  最后，各项配置都已配置完成之后，重启项目！！！只要修改了配置文件一定要重启项目！
  
  

集成插件

3、搭建项目完成之后，毕竟我们不是来创建玩玩的，是要进行开发的；

  下面就让我们来集成一些开发项目中必须用到的；

1）集成路由：

   npm官网搜索 react-router-dom，为什么不是搜索安装React Router呢？可以搜索React Router，但React Router官方的解释是：React Router这个包提供了React Router的核心路由功能，但是您可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，则应该安装react -router-dom。类似地，如果您正在编写React本机应用程序，则应该安装react-router- Native。这两者都将作为一个依赖项安装反应物路由器，因此，所以我们需要安装的是：

cnpm install react-router-dom -S

  点击react-router-dom，进入该网页，然后因为react-router-dom是交给其他开发团队进行维护的，所以可以通过搜索到的网页底部找到Credits进入该开发团队的首页，也是在最底部有一个开源项目Open Source Projects，点击React Router进入该网站选择对应的式web还是native，就能进入对应路由API的网站了，然后根据相关api文档进行操作；

再次点击之后，找到最底部的React Router

进入该网页之后，

选择web就是react路由的API网站了。

  另外，在这里我们还需要安装一个包，这个包的作用就是实现路由懒加载（官方给的是Code-Splitting），节省性能；进入React官网找到Code-Splitting中的 Loadable Components
  这段话的解释是：React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。
点击之后找到示例：

安装：

cnpm install @loadable/component -S

引入：

// 然后在需要加载路由的文件中引入@loadable/component包
import loadable from '@loadable/component'
// 引入路由
const Home = loadable( () => import('./home/Home'))

如果，在代码编译的过程中eslint不能解析import引入路由的语法，我们还需要安装另外的两个插件：

//  babel-eslint 作用是把较更高版本的`ES6` 语法转化成 `eslint` 可以检测的代码
cnpm install babel-eslint -D 

cnpm install @babel/plugin-syntax-dynamic-import -D // 作用：用以解析识别import()动态导入语法---并不是转换，而是解析识别

安装完成之后需要在相关的配置文件中配置：
并在.eslintrc.json中配置

"parser": "babel-eslint"

.babelrc.json中配置

// 作用：用以解析识别import()动态导入语法---并非转换，而是解析识别
"plugins": ["@babel/plugin-syntax-dynamic-import"] 

ok，到这里已集成好了路由。

  
2）集成axios

   npm官网搜索axios；

安装：

cnpm install axios -S

Axios 请求拦截器以及响应拦截器的封装
  
3）集成sass

   npm官网搜索sass；

  在工作中我们经常使用sass来进行样式的编写工作，当然还有less等，在此我们使用的是sass，因此我们需要安装：

cnpm install node-sass -D

4）集成antd（可选）

  使用antd组件库；目前流行的React组件库: Ant Design；

安装：

cnpm install antd -S

5）集成redux（可选）

  redux中文网；
  redux英文原网；

安装：

// 作用：创建store的
cnpm install redux -S

// 作用：把redux和react组件关联起来
cnpm install react-redux -S

// 作用：开发者工具，帮助我们进行相关的调试
cnpm install redux-devtools -S

注：关于redux的一些详细内容会在下一篇文章中介绍；

  OK，集成好各种项目相关插件之后就可以进行实战开发了！

  最后，使用npm run eject还原项目结构目录之后，其他文件目录几乎不变，主要是 src，结合经验推荐项目的目录结构如下：

  另外，大家还可以看出在src里创建的各个分好类的文件夹，在那些文件夹中都会有一个index.js文件，作为统一的出口文件，这个统一的出口文件对该文件夹中的文件统一管理，这样有利于文件中的数据的统一管理，便于开发。
  
  
  
  好的，本次分享就到此告一段落，如有不足之处，望大神们不吝指出！谢谢！