從零搭建React+TypeScript的后台項目(一)

這段特殊時期，在家閑暇時間比較多，就系統學習了React+Ts的語法邏輯，以及如何從零搭建一個簡易的后台管理項目。技術棧包括React、React-router-dom、Redux、Axios、TypeScript、Ant Design。剛好公司項目重構也是基於React+ts開發的。話不多說，直接開擼。

一、create-react-app構建TypeScript項目

yarn create react-app react-admin-demos --template typescript

然后我們進入項目並啟動

cd react-admin-demos/
yarn start

項目啟動成功，瀏覽器會默認打開http://localhost:3000/，看到官方實例就算成功了。

二、引入antd並修改配置

下面我們引入相應的UI框架

yarn add antd

安裝成功后，我們可以在項目中使用antd中組件，但是目前項目中引入了全部組件的樣式，需要做按需加載。

按需加載

這里我們使用create-app-rewired對create-react-app 進行自定義配置，同時還需要安裝customize-cra：

yarn add react-app-rewired customize-cra

修改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",
}

然后再安裝babel-plugin-import，是一個按需加載組件和代碼樣式的babel插件。

yarn add babel-plugin-import

安裝成功后，在根目錄下新建config-overrides.js 用於修改默認配置。

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

// 使用ant-design搭建React+ts項目，可在此重重定義antd全局樣式
const overConfig  = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

module.exports = function (config, env) {
    return overConfig(config, env)
}

現在antd的組件的js和css代碼都會在項目中按需加載。

自定義主題

自定義主題需要用到 less 變量覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件如下。

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

const overConfig  = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
-       style: 'css',
+      style: true,
    }),
+  addLessLoader({
+     javascriptEnabled: true,
+     modifyVars: { '@primary-color': '#009688' },
+ }),
);

根據報錯安裝less相關模塊，然后啟動項目，發現antd中組件的配色方案變成我們設置的顏色。

三、配置env環境及接口代理

一般項目在開發過程中，本地環境、測試環境、線上環境啟動和打包的域名不同，線上也要關掉本地調試logger日志。這就需要我們配置環境變量，自動化控制打包啟動命令。在根目錄下新建如下三個文件，可自定義變量然后在項目中使用：

HOST=0.0.0.0
PORT=8888
REACT_APP_MODE=development

這里我們在.env.development中自定義啟動端口，聲明REACT_APP_MODE變量指定運行環境，作為邏輯判斷。

接口代理

在React中我們使用http-proxy-middleware來解決接口代理的問題

yarn add http-proxy-middleware

然后在src下新建setupProxy.js文件，注意這里不能是ts文件，否則無法識別：

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(proxy('/public', {
    target:yourHost,
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/public": "/"
    }
  }))
}

配置成功后，前端發送的請求就會被代理到文件中配置的host域名下。

到現在為止，一個React+Ts+Ant Design+proxy的簡易框架就搭建完畢，下面的章節會講解如何將Route、Redux狀態管理以及Ts語法的常規寫法集成到項目中！

官方文檔地址：在TypeScript中使用Ant Design

這是一個系列文章：

從零搭建React+TypeScript的后台項目(一)--構建基礎React+TypeScript項目

從零搭建React+TypeScript的后台項目(二)--后台router實現方案

從零搭建React+TypeScript的后台項目(三)--Redux基本配置