React項目實踐系列一

DC_er 發(fā)布于2019-08-26 12:01 / 1030人閱讀

摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠程的其實還有個關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團隊提供了平臺。

數(shù)據(jù)分析平臺-實踐系列一

項目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項目的實踐過程以及自己對前端的學(xué)習(xí)與體悟。

技術(shù)選型

框架： React

路由： React-Router 4

狀態(tài)管理： Redux

UI組件庫： Ant Design

搭建工程

因為平臺的前端技術(shù)選型，因此挑選了React為技術(shù)框架。并使用create-react-app快速搭建工程。create-react-app為fackbook官方出品的快速搭建React工程的命令行工具，可以減少寫各種配置的過程，似于vue的vue-cli和angular的angular-cli。

而在使用create-react-app，需要使用eject暴露所有配置項，好自定義個人的Webpack配置。

首先我們并不打算將React讓Webpack打包，而使用第三方的CDN，直接在HTML文件以script標(biāo)簽引入。在此我們選用用友的tinper公共靜態(tài)資源庫。

改動Webpack配置文件

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "react-router-dom": "ReactRouterDOM",
  "redux": "Redux",
  "react-redux": "ReactRedux"
}

而若引入第三方CDN，需要分引入為生產(chǎn)環(huán)境還是開發(fā)環(huán)境的代碼。
如在生產(chǎn)環(huán)境下要引入//design.yonyoucloud.com/static/react/16.0.0/umd/react.production.min.js
而在開發(fā)環(huán)境引入//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js。

選用ejs-compiled-loader，這樣另我們可以在HTML文件使用ejs模板引擎。

繼續(xù)改動Webpack配置文件

new HtmlWebpackPlugin({
  inject: true,
  template: `!!ejs-compiled-loader!${paths.appHtml}`,
}),

在HTML使用模板引擎

  <% if (process.env.NODE_ENV === "production") { %>
    
    
  <% } %>
  <% if (process.env.NODE_ENV === "development") { %>
    
    
  <% } %>

最后，設(shè)置Webpack的別名，讓后續(xù)引用的地方減少路徑的復(fù)雜度。

alias: {
  "root": path.resolve(__dirname, "../src"),
  "@": path.resolve(__dirname, "..")
},

如在src文件夾下有兩個文件夾a和b，倘若b下的m.js需要引用a下的n.js，需要import X from ‘../a/n.js’，設(shè)置別名后可寫為root/a/n.js。

前后端分離

在知乎上面找了張圖片，前后端分離，簡單的說，就是前端負責(zé)頁面交互，顯示后臺提供的數(shù)據(jù)，而后端負責(zé)數(shù)據(jù)的處理，提供給前臺數(shù)據(jù)。

可以看出前后端是有很強的耦合關(guān)系，后端需要依賴前端請求，前端需要依賴后端響應(yīng)。不過此處后端是可以輕松模擬前端請求，如POSTMAN等。剩下的解決要點為如何給前端模擬數(shù)據(jù)。因此，我們在設(shè)計接口約定數(shù)據(jù)后構(gòu)建另一個簡單的Server，這個Server會簡單的響應(yīng)前端請求，根據(jù)約定返回模擬的數(shù)據(jù)。我們將這個Server成為Mock Server。

其中Mock Server可分成本地及遠程。

本地的Mock Server需要每個前端在自己電腦上部署服務(wù)器，且若后臺改動API，后臺無法同步維護Mock Server與Real Server。

因此打算建立遠程的Mock Server(其實還有個關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。)不過此步驟我們也可以省略了，用友的大前端技術(shù)團隊提供了Mock平臺。

他的功能十分齊全，具備權(quán)限管理，Mock Server，數(shù)據(jù)導(dǎo)入等等的功能。