使用 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

輕鬆的開始開發吧~