框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs做前后端server）

本文轉載自查看原文 2019-06-30 12:18 1041 框架相關/ 前端React/ express/ nodejs/ html、css、js/ 日常

前提： 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文件夾，如圖