框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs作先後端server）

前提： nodejs >= 10.0; 

這裏不推薦用官網的yarn安裝antd的模塊，由於後續會出錯，錯誤如圖：

 

也不推薦用npx方法來搭建react骨架，也會出錯，讓咱們開始吧！！

 

---

 

前端React+Antd框架搭建

 

1.安裝並啓動create-react-app骨架應用

 

打開cmd按順序執行如下指令：

 

npm install -g create-react-app   (全局安裝create-react-app， 默認會安裝在C盤我的用戶下）

create-react-app my-app （此步安裝my-app以及須要的模塊到當前文件夾下）

cd my-app （進入到my-app目錄）

npm start　（啓動react項目Demo，可輸入localhost:3000進入看demo）

結果如圖所示：

 

2.引入antd

 

①npm install antd --save-dev

 

②修改 src/App.js，引入 antd 的按鈕組件，代碼以下：

import React, { Component } from 'react';
import Button from 'antd/lib/button'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Button type="primary">Button</Button> </div>  ); } } export default App;

 

③修改 src/App.css，在文件頂部引入 antd/dist/antd.css。

 

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

 

④執行npm run start，結果如圖

 

3.高級配置

 

咱們如今已經把組件成功運行起來了，可是在實際開發過程當中還有不少問題，例如上面的例子實際上加載了所有的 antd 組件的樣式（對前端性能是個隱患）。

此時咱們須要對 create-react-app 的默認配置進行自定義，這裏咱們使用 react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）。

引入 react-app-rewired 並修改 package.json 裏的啓動配置。因爲新的 react-app-rewired@2.x 版本的關係，咱們還須要安裝 customize-cra。

 

①npm install react-app-rewired customize-cra --save-dev

 

②更改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

 

③而後在項目根目錄建立一個 config-overrides.js 用於修改默認配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config; };

 

④引入babel插件，執行指令：npm install babel-plugin-import --save-dev

 

⑤更改config-overrides.js文件

const { override, fixBabelImports } = require('customize-cra');


module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );

 

⑥移除前面在 src/App.css 裏全量添加的 @import '~antd/dist/antd.css',而且修改App.js

import React, { Component } from 'react';
import { Button } from 'antd'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Button type="primary">Button</Button> </div>  ); } } export default App;

  

⑦執行命令npm run start，發覺服務已正常啓動，至此咱們的react+antd框架已搭建完畢

 

---

 

後臺nodejs+express框架搭建與服務合一

 

1.express骨架搭建

 

①咱們在react根目錄下創建server文件夾，如圖

 

②咱們cd進server文件夾，執行express骨架生成器指令：npm install express-generator -g

 

③執行語句：express --view=pug .

 

④執行語句：npm install，執行完了後，咱們執行npm run start（這裏先關掉react的服務），執行結果如圖：

 

2.服務合一

 

①到這一步，讓咱們想一想，先後端一樣是以nodejs+server爲基礎的，難道咱們須要起兩個服務不成？固然不對啊。

　咱們從新進到react的根目錄，執行指令：npm run build

 

②咱們將根目錄build目錄下的文件所有拷貝至server/public目錄，而後咱們刷新一下網頁。誒，出來了。

 

③在最終部署服務環節時，咱們即須要用服務合一的方法來部署運行服務（非開發階段使用，開發階段使用在下一章會講解）。

 

---

 

 

後續：誒，標題不是有router麼？怎麼沒有router相關的麼？到這裏，其實咱們已經把相關框架大體都搭好啦。

 

下一章咱們講具體該如何運用這個框架進行開發，就不放在這章講了，否則太長啦！！