企業級React專案的個人構建總結

ruichengping發表於2019-03-04

前言

距離上篇文章已經好長一段時間了，這兩個星期公司派駐到京東方這邊出差負責入駐專案團隊的前端工作。這段時間從零搭建一下前端專案，這次給的時間比較充裕，思考的也比較多。以前也常有搭過前端專案，但是給的時間都比較緊，因此很多問題都忽略掉了。這次正好對以前的進行一次優化，並總結了一些經驗分想給大家。如果大家有更好的想法，歡迎留言交流。

溫馨提示：

這個專案是以PC端前端專案為視角，移動端前端專案並不完全適用。這點各位小夥們還需要注意一下。
該專案已分不同方向去維護，每個分支與之對應的方向可在CONTRIBUTING.md裡檢視

專案說明

專案地址： https://github.com/ruichengping/react-webpack-pc

該專案可以用我自己寫的腳手架工具asuna-cli完成專案構建，我自己寫的腳手架工具地址如下：

https://github.com/ruichengping/asuna-cli

以上是示例專案的目錄結構，下面我們將逐一進行分析**

build

這個檔案主要放了一些與webpack打包的相關檔案。

build.js ---- webpack打包指令碼，用於構建生產環境的包
check-versions.js ---- 主要檢測當前打包環境的node以及npm的版本是否符合要求
utils.js ---- webpack打包所需要的一些工具庫
webpack.base.conf.js ---- webpack的一些基礎配置，不同環境的webpack配置都是基於此
webpack.dev.conf.js ---- 開發環境的webpack配置
webpack.prod.conf.js ---- 生產環境的webpack配置

這個專案的webpack配置我是在vue-cli的專案上進行修改的，可以用於React的專案構建。目前只要開發環境和生產環境這兩個環境，可能一些公司有多個環境，每個環境下webpack的配置還不同，此時可以根據不同環境建一個檔名格式為“webpack.<環境名>.conf.js”的webpack配置使用。webpack.base.conf.js裡面有一些基本配置比如rules、input、output的等配置，一般來說每個環境下這些大致都是相同，一些不同之處可以用webpack-merge外掛進行合併。一般來說大多數專案來說開發環境和生產環境兩個webpack配置足夠了。

config

這裡存放著不同環境webpack所需要的配置引數。

dev.env.js ---- 向外暴露開發環境下的環境變數NODE_ENV
index.js ---- 存放不同環境的配置引數
prod.env.js ---- 向外暴露生產環境下的環境變數NODE_ENV

如果你需要再加一個環境的話，可以建一個檔名為“<環境名>.env.js”並向外暴露環境變數NODE_ENV，然後在index.js中匯入，進行相關引數設定。

mock

這裡是用來做介面的mock的，可能很多公司都不太用，我在工作也很少去mock。這裡介紹一下自己的介面mock思路，這裡我選擇mockjs加上json-server的組合。二者具體的使用，大家可以檢視其官方文件。

api ---- 存放不同api所對應的資料
index.js ---- json-server的主檔案
routes.json ---- 路由的對映

package.json我配置一個script，如下：

 "mock": "json-server mock/index.js  --port 3000 --routes mock/routes.json"
複製程式碼

控制檯執行“npm run mock“即可。

src

api

url.js

export default {
  fetchUserInfo:{
    method:'get',
    url:'/api/user'
  },
  fetchAuthorInfo:{
    method:'get',
    url:'/api/author'
  },
  fetchUserList:{
    method:'get',
    url:'/api/userList'
  }
}
複製程式碼

index.js

import _ from 'lodash'
import http from '@/utils/http'
import API_URL from './url';

function mapUrlObjToFuncObj(urlObj){
  const API = {};
  _.keys(urlObj).forEach((key)=>{
    const item = urlObj[key]
    API[key]=function(params){
      return http[item.method](item.url,params)
    }
  });
  return API;
}

function mapUrlObjToStrObj(urlObj){
  const Url = {};
  _.keys(urlObj).forEach((key)=>{
    const item = urlObj[key]
    Url[key]=item.url
  });
  return Url;
}

export const API = mapUrlObjToFuncObj(API_URL);
export const URL = mapUrlObjToStrObj(API_URL);
複製程式碼

這裡我們用來放置api的介面地址，為了後續的介面維護，我們在使用的過程中不會直接寫死介面地址，而是將介面請求封裝成一個個方法。通過對介面的統一維護，我們就可以做到在執行修改介面地址、修改請求方法、新增介面等等操作時，就不用在整個專案裡到處找了，只要維護好url.js向外暴露的物件即可。使用方法如下：

import {API} from '@/api'
//params為請求引數
API.fetchUserInfo(params).then(response=>{
    //response為返回值
    ...
})
複製程式碼

assets

這裡我們會放專案的所需要圖片資源，這些圖片資源一般來說都是做圖示的，都比較小。webpack會將其轉化成BASE64去使用。如果你不想以這種方式使用，可以在static目錄下存放圖片資源。

components

這裡存放整個專案所用到的公共元件。定一個元件，這裡要求是新建一個資料夾，資料夾名為元件名，另外在這個資料夾下新建index.jsx和style.scss檔案。例如做一個HelloWorld元件，則應該是如下結構。

HelloWorld

index.jsx
style.scss //存放元件的樣式

index.js

import React from 'react';
import './style.scss';
class HelloWorld extends React.PureComponent{
  render(){
    return (
      <h4 className="u-text">Hello World</h4>
    )
  }
}
export default HelloWorld;
複製程式碼

style.scss

.u-text{
  color: red;
}
複製程式碼

layouts

這裡存放著佈局檔案。關於這個佈局檔案我是這麼去定義它的，我在開發過程中有一些頁面他們的某一部分都是相同，早之前可能大家可能會在一個React元件加和去實現這個功能，可以這麼幹，沒毛病。但是這個有一個不好點就是你的路由沒法做統一的管理，分散在各個元件中，給後續的維護帶來很多問題。為了解決這個，我選擇利用props.children結合標籤巢狀的方式去完成。舉個例子：

先定一個layout（本職也是React元件）BasicLayout.jsx

import React from 'react';
class BasicLayout extends React.PureComponent{
    render(){
        const {children} = this.props;
        return (
            <div>
                <div>隔壁老王今日行程：</div>
                <div>{children}</div>
            </div>
        )
    }
}
export default BasicLayout;
複製程式碼

定義完之後我們可以這麼使用：

import React from 'react';
import BasicLayout from '<BasicLayout的路徑>'
class Work extends React.PureComponent{
    render(){
        return (
            <BasicLayout>
                <div>今天隔壁老王比較累，不工作！</div>
            <BasicLayout>
        )
    }
}
export default BasicLayout;
複製程式碼

最後在的dom結構如下：

<div>
    <div>隔壁老王今日行程：</div>
    <div>
        <div>今天隔壁老王比較累，不工作！</div>
    </div> 
</div>
複製程式碼

這樣我們可以基於BasicLayout做出很多個像下面的頁面。

<div>
    <div>隔壁老王今日行程：</div>
    <div>
       //<不同的內容>
    </div> 
</div>
複製程式碼

使用這種方法就可以將我們得所有路由寫在一起了，可能有人覺得每次都要寫引入BasicLayout很麻煩，有沒有其他更好用的辦法，在講App.jsx的時候會說到這裡就先跳過。

scss

這裡存放共有的scss檔案，比較一些常用的功能類、@mixin、@function等等。

store

這裡有四個檔案：

actions.js
actionTypes.js
reducer.js
index.js

我們知道每個頁面都有自己的actions.js、actionTypes.js、reducer.js，但是這裡是全域性的，另外index.js會向外暴露store，然後再main.js中引入使用。

import {createStore,combineReducers,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import API from '@/api';
import user from './reducer';
import author from '@/pages/PageOne/redux/reducer';
const rootReducer = combineReducers({
    user,
    author
  });
const store=createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument({
    API
  }))
)
export default store;
複製程式碼

這裡有一個小細節，redux-thunk是可以攜帶一些額外的物件或者方法的，這裡，我攜帶API物件。當我們需要在actions.js裡面使用API物件時，就不需要再import匯入進來。下面我們做個對比：

修改前

import * as actionTypes from './actionTypes';
import API from '../api';

export const fecthUserName=(params)=> async (dispatch,getState)=>{
  const response =await API.fetchUserInfo(params);
  const {success,data} = response;
  if(success){
    dispatch({
      type:actionTypes.CHANGE_USER_NAME,
      payload:data
    });
  }
}
複製程式碼

修改後

import * as actionTypes from './actionTypes';

export const fecthUserName=(params)=> async (dispatch,getState,{API})=>{
  const response =await API.fetchUserInfo(params);
  const {success,data} = response;
  if(success){
    dispatch({
      type:actionTypes.CHANGE_USER_NAME,
      payload:data
    });
  }
}
複製程式碼

utils

這裡會存放一些自己的封裝的js工具檔案，比如我在專案基於axios封裝了一個http.js,簡化了axios的操作。

router/index.js

這裡以配置化的防止去註冊路由，並app.js裡面去渲染路由標籤。

import Loadable from 'react-loadable';
import createHistory from 'history/createBrowserHistory';
import BasicLayout from '@/layouts/BasicLayout';
import NavTwoLayout from '@/layouts/NavTwoLayout';
import Loading from '@/components/Loading';
import NotFound from '@/pages/Exception/404';


const Home = Loadable({loader: () => import('@/pages/Home'),loading: Loading});
const Teachers = Loadable({loader: () => import('@/pages/Teachers'),loading: Loading});

export const history = createHistory();

export const routes = [
  {
    path:'/',
    redirect:'/navone/home'
  },
  {
    path:'/navone',
    redirect:'/navone/home',
    children:[{
      path:'/home',
      layout:BasicLayout,
      component:Home
    }]
  },
  {
    path:'/navtwo',
    redirect:'/navtwo/teachers',
    children:[{
      path:'/teachers',
      layout:NavTwoLayout,
      component:Teachers
    }]
  },
  {
    path:'*',
    component:NotFound
  }
]
複製程式碼

App.js

這裡根據路由配置用來渲染路由標籤，先放程式碼：

import React from 'react';
import {Router} from 'react-router-dom';
import {Switch, Route ,Redirect} from 'react-router';
import {history,routes} from '@/router';



function getRouterByRoutes(routes){
  const renderedRoutesList = [];
  const renderRoutes = (routes,parentPath)=>{
    Array.isArray(routes)&&routes.forEach((route)=>{
      const {path,redirect,children,layout,component} = route;
      if(redirect){
        renderedRoutesList.push(<Redirect key={`${parentPath}${path}`} exact from={path} to={`${parentPath}${redirect}`}/>)
      }
      if(component){
        renderedRoutesList.push(
          layout?<Route 
            key={`${parentPath}${path}`} 
            exact path={`${parentPath}${path}`}
            render={(props)=>React.createElement(layout,props,React.createElement(component,props))} />:
          <Route 
              key={`${parentPath}${path}`} 
              exact 
              path={`${parentPath}${path}`} 
              component={component}/>)
      }
      if(Array.isArray(children)&&children.length>0){
        renderRoutes(children,path)
      }
    });
  }  
  renderRoutes(routes,'')
  return renderedRoutesList;
 
}
class App extends React.PureComponent{
  render(){
    return (
      <Router history={history}>
        <Switch>
          {getRouterByRoutes(routes)}
        </Switch>
      </Router>
    )
  }
}
export default App;
複製程式碼

這裡我們需要重點講的是之間在layouts中我們跳過的內容，能不能不每次都用layout元件去包裹程式碼，答案是可以的。這裡我選擇中的render屬性。

main.js

webpack入口檔案，主要一些全域性js或者scss的匯入，並執行react-dom下的render方法，程式碼如下：

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import store from '@/store';
import App from '@/App';
import '@/scss/reset.scss';
import '@/scss/base.scss';


render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('app')
)

複製程式碼

static

這是一個靜態資源目錄，一般存放一些第三方工具庫。這個目錄主要兩方面考慮：

有些第三方工具庫沒有npm包，我們無法用npm install 或者 yarn add方式新增
一些比較大的第三方工具庫會影響我們的打包速度，可以把它拿出來通過script的方式引入

其實第三方工具庫最好的方式是CDN，但是有些公司就是沒有，無奈只能如此。你加入的第三工具庫都可在當前伺服器下”/static/*“路徑下獲取到。

templates

這裡存放著頁面和元件級別構建所需要的模板檔案，頁面級別構建提供了兩種模板PageReducer（整合了reducer）和PageSample（不整合reducer），而元件只提供了一種模板ComSample。頁面和元件級別的構建是需要配合asuna-cli才能構建，目前專案已經整合了asuna-cli。package.json寫了兩個script：npm run newPage（頁面構建）和npm run newComponent（元件構建）。開發可根據實際需要選擇構建，asuna-cli具體使用可以去https://github.com/ruichengping/asuna-cli檢視。

其他檔案

.babelrc ---- babel轉換的配置檔案
.gitignore ---- git操作所需要忽略的檔案
.postcssrc.js ---- postcss的配置檔案
index.html ---- 模板index.html,webpack會根據此生成新的index.html,配合html-webpack-plugin使用
package.json ---- 家喻戶曉的東西
README.md ---- 專案說明
theme.js ---- ant-design的主題色配置檔案，具體使用可以參考ant-design
asuna.config.js ---- asuna-cli的配置檔案
yarn.lock ---- 鎖定包的版本

結語

這個只是個人搭建企業級React專案的一些總結。當然存在不足的地方，後面在工作過程中如果有一些好的想法也會在這上面進行更新。歡迎大家Star關注！如果你也有好的想法歡迎留言交流，希望這篇拙文能給大家一些啟發。

分享 | Laravel重構企業級電商專案
2020-12-31
Laravel
vue個人小專案總結
2018-06-22
Vue
專案總結 | 對【時間】構建的特徵工程
2020-07-27
特徵工程
基於React企業級SPA專案搭建全記錄
2019-10-28
React
React移動專案總結
2016-05-02
React
專案總結之個人失誤
2005-04-07
React構建個人部落格
2019-03-03
React
maven 學習總結(三)——使用Maven構建專案
2015-09-22
Maven
使用Vite快速構建前端React專案
2023-02-28
Vite前端React
一個React專案總結（toB）
2019-11-13
React
React-Native專案總結
2018-10-23
React
如何構建「大型 Node.js 專案」的專案結構？
2018-05-15
Node.js
TypeScript在React專案中的使用總結
2021-04-21
TypeScriptReact
React17+React Hook+TS4 最佳實踐仿 Jira 企業級專案
2021-07-04
ReactHook
企業內部即時通訊系統專案總結
2012-06-18
建築企業專案管理的研究（轉）
2007-08-15
專案管理
企業級專案管理體系
2019-03-25
專案管理
淺論專案管理型企業的組織結構（轉）
2007-08-15
專案管理
DvaJS構建配置React專案與使用
2019-07-20
JSReact
利用TypeScript構建優雅的React Native專案
2019-03-02
TypeScriptReact Native
構建一個簡單的react-typescript專案
2017-10-20
ReactTypeScript
React 專案結構和元件命名之道
2018-11-25
React元件
maven 學習總結(八)——使用Maven構建多模組專案
2015-09-22
Maven
輕鬆開發企業級中後臺專案，順手掌握工程化的react開發架構
2018-08-13
React架構
10 分鐘構建企業級雲原生框架
2020-02-12
框架
個人專案 20114 總結
2014-09-25
Harbor企業級倉庫錯誤總結
2019-07-07
實戰專案後對 React Hooks 總結
2019-07-08
ReactHook
快速構建企業級應用的開發平臺
2022-07-18
引入SOA架構分級模型提高企業專案成功率
2008-07-23
架構模型
「譯」React 專案結構和元件命名之道
2018-10-21
React元件
react-native專案結構介紹
2015-10-30
React
maven 學習總結(二)——Maven專案構建過程練習
2015-09-22
Maven
專案管理心得：一個專案經理的個人體會、經驗總結
2014-08-05
專案管理
建築施工企業專案管理初探(轉)
2007-08-15
專案管理
基於create-react-app 和 koa2 快速搭建react同構渲染專案總結
2018-01-21
ReactAPP
使用distillery 構建專業的 phoenix 專案軟體包
2018-04-19
MongoDB專案過程中的總結與建議
2016-05-13
MongoDB