使用 create-react-app配合express快速构建React开发环境

最近临时接了一个项目，须要快速搭建先后端环境，由于脱离团队使用的框架来作，因此首选了一个比较成熟的方案来快速启动 react 环境，省却了许多配置 webpack 的烦恼。

脚手架介绍

在这个环境下，Facebook 提供了一套不须要配置的 React 开发方案，即create-react-app。这个脚手架已经作好了基础 webpack 配置，带有自动更新，错误提示等等功能，仅仅须要建立，启动就能够快速开发。

这时也不得不提早端社区的另外一个崛起者：yarn。

Yarn与 npm 同样，是一款 NodeJS 包管理工具。 为什么要选择使用 yarn 呢？官网的描述是：

Yarn 会缓存它下载的每一个包，因此不须要重复下载。它还能并行化操做以最大化资源利用率，因此安装速度之快史无前例。

Yarn 在每一个安装包的代码执行前使用校验码验证包的完整性。

Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装，可以保证在一个系统上的运行的安装过程也会以一样的方式运行在其余系统上。

选用 Yarn 的缘由也是由于他的速度提高比npm 要快，使用yarn add <package-name> ，yarn remove <package-name> 增删 node 包（对应npm install和npm uninstall）.

另外一点是，yarn 在更新以后，集成了create, 经过yarn create，能够快速启动一个项目。

• yarn create react-app my-app

• yarn create react-native-app my-app

• yarn create next-app my-app

---

如何使用

假设咱们须要建立一个demo-app项目：

1. 建立目录yarn create react-app demo-app

   • 稍等片刻，yarn 会为咱们建立一个目录，拉取依赖，wepack 的配置经过 yarn 来调用，能够看到目录结构很干净
     

   • 安装完后会有清晰的提示
     

2. 开始开发：cd demo-app && yarn start

   • 这时会启动一个默认端口为3000的页面，若是端口冲突，会提示你是否选用另外一个端口

   • 进入src目录开始开发便可
     

3. 开发完成后须要发布时，运行yarn build进行编译，发布build目录

   • 建立完成会自动生成build文件夹，将 js,css 文件放入 static 目录中
     

   • 发布build目录便可

三部曲完成，中间省略了很是多配置问题，给须要快速构建项目带来了极大的便利性。固然，默认配置也许不可以知足全部需求，create-react-app也提供了 抛出全部配置项的yarn eject供给开发者使用，若是须要到调整 webpack 的内容，就须要使用到这个命令。不过这样也会致使不能再回滚。官方的更新比较快，若是不是必要的状况建议直接使用内置的行为。

---

配合 Express 构建 server 端应用

若是在项目开发过程当中须要 express 构建server 端应用，那么开发模式就须要有小调整。

1. 首先建立一个叫server的文件夹和初始化 package.json文件：

   • mkdir server && cd server && yarn init

2. 增长依赖包

   • yarn add express body-parser nodemon babel-cli babel-preset-es2015

   • 主要用到express, body-parser, nodemon（检测node.js 改动并自动重启，适用于开发阶段）,babel-cli和babel-preset-es2015(以便使用 es6开发)

3. 修改package.json，增长npm scripts

   {
      "scripts": {
        "start": "nodemon --exec babel-node -- ./server.js",
        "build": "babel ./server.js --out-file server-compiled.js",
        "serve": "node server-compiled.js"
      }
    }

   • 这里使用nodemon在开发阶段检测node.js 改动并自动重启

   • 发布build的时候则经过 babel编译成 es5的文件

create-react-app会启动一个静态资源服务器，那么同时须要进行 server 端的时候须要怎么作呢？

咱们回过头来去修改一下demo-app目录下的package.json。

create-react-app会默认添加好4段scripts:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

咱们须要对 start和build作调整，以即可以同时启动前端开发页面以及后端服务。在这里引入concurrently这个包来执行两条命令：

yarn add concurrently

package.json:

"scripts": {
    "react-start": "react-scripts start",
    "start": "concurrently 'yarn react-start' 'cd server && yarn start'",
    "react-build": "react-scripts build",
    "build": "concurrently 'yarn react-build' 'cd server && yarn build'",
  },

这样，咱们只要执行yarn start会同步启动 webpack 以及 server文件夹下的 nodeman.

Proxy

若是咱们在前端页面用使用fetch(/api/data)这样 请求，默认是会发送到create-react-app 启动的 localhost:3000/api/data去的，没法达到目的。为了指向 server 端，须要指定proxy:

假设 server 端 express 启动了5000端口，则须要在package.json中增长：

"proxy": "http://127.0.0.1:5000"

这时当你使用fetch(/api/data)请求，则会指向到localhost:5000/api/data

轻松的开始开发吧~