create-react-app结合node express框架搭建react项目开发环境

前端框架一直用的Facebook 的React框架，之前后台一直在用.net，最近在学习node，因此想用node 的express框架，结合create-react-app脚手架搭建开发环境。

技术栈

一、yarn

Facebook今年推出了一款工具yarn，和npm相似，都是Nodejs包管理工具，选择yarn的主要原因有：

（1）yarn会缓存它下载的每个包，所有不需要重复下载。它还能并行化操作以最大化资源利用率，所以安装速度之快前所未有。

（2）yarn在每个安装包的代码执行前使用校验码验证包的完整性。

（3）yarn使用一个格式详尽简洁的lockfile和一个精确的算法来安装，能够确保能够在一个系统上的运行和安装过程也会以同样的方式运行在其他系统上。

选用yarn的原因也是因为yarn下载安装包的速度比npm快，yarn add 和yarn remove 对应npm的npm install 和 npm uninstall。

yarn更新版本后集成了crearte,通过yarn create 快速搭建项目。比如 yarn create react-app my-website; yarn create react-native-app my-website; yarn create next-app my-website。

二、express

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。express仅在web应用相关的nodejs模块上进行了适度的封装和扩展，较大程度避免了过度封装导致的性能损耗。

三、create-react-app

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

搭建项目

1、安装yarn

（1）npm方式

npm install -g yarn

（2）windows安装

windows 下需要下载msi文件，下载地址：https://yarnpkg.com/latest.msi；

（3）MacOS

curl -o- -L https://yarnpkg.com/install.sh | bash

（4）Linux

sudo apt-key adv --keyserver pgp.mit.edu --recv D101F7899D41F3C3 
echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

2、创建create-react-app脚手架

打开创建的目录，打开命令行输入yarn create react-app my-website，可以看到目录结构

3、开始开发：cd my-website && yarn start

打开会默认启动端口为3000的页面，如果端口有冲突，会提示是否选用另一个端口

进入src目录开始开发，注意：开发的文件都在src目录下

express框架搭建

由于在项目开发过程中需要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、执行express

在执行express之前需要全局安装express-generator（npm install express-generator -g）；然后在server文件下执行express命令，就会在server文件夹中生成express构件的nodejs服务器模块。

4、修改express的端口

由于express默认的端口也是3000，所以需要给express的端口重新设置下，打开express项目bin目录下的www文件，将3000端口修改为3001

5、执行express的npm start 提示有两个包未安装

执行 npm install serve-favicon 和 npm install morgan 安装这两个包

6、修改package.json

server 文件下express默认生成的script是：

"scripts": {
    "start": "node ./bin/www"
  }

将其修改为：

"scripts": {
    "start": "nodemon --exec node ./bin/www"
  }

7、create-react-app服务启动时，同步启动server端的服务器
修改my-website问价下的package.json文件

create-react-app会默认添加4段script：

"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文件下的nodemon.

分别在浏览器打开localhost:3000和localhost:3001 打开前端和后台页面

参考文献：

http://blog.csdn.net/ogog123/article/details/77116204

https://segmentfault.com/a/1190000009857965

http://blog.csdn.net/kang_xiong/article/details/53234974

create-react-app结合node express框架搭建react项目开发环境

猜你喜欢