React專案實踐系列一

DYS1230發表於2018-06-06
React

資料分析平臺-實踐系列一

專案建立於2018年1月底，到現在已經接近半年，在此寫下半年來專案的實踐過程以及自己對前端的學習與體悟。

技術選型

框架： React

路由： React-Router 4

狀態管理： Redux

UI元件庫： Ant Design

搭建工程

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

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

首先我們並不打算將React讓Webpack打包，而使用第三方的CDN，直接在HTML檔案以script標籤引入。在此我們選用用友的tinper公共靜態資源庫。

改動Webpack配置檔案

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router-dom': 'ReactRouterDOM',
  'redux': 'Redux',
  'react-redux': 'ReactRedux'
}
複製程式碼

而若引入第三方CDN，需要分引入為生產環境還是開發環境的程式碼。 如在生產環境下要引入//design.yonyoucloud.com/static/react/16.0.0/umd/react.production.min.js 而在開發環境引入//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js。

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

繼續改動Webpack配置檔案

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

在HTML使用模板引擎

  <% if (process.env.NODE_ENV === 'production') { %>
    <script src="//design.yonyoucloud.com/static/react/16.2.0/umd/react.production.min.js"></script>
    <script src="//design.yonyoucloud.com/static/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
  <% } %>
  <% if (process.env.NODE_ENV === 'development') { %>
    <script src="//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js"></script>
    <script src="//design.yonyoucloud.com/static/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <% } %>
複製程式碼

最後，設定Webpack的別名，讓後續引用的地方減少路徑的複雜度。

alias: {
  'root': path.resolve(__dirname, '../src'),
  '@': path.resolve(__dirname, '..')
},
複製程式碼

如在src資料夾下有兩個資料夾a和b，倘若b下的m.js需要引用a下的n.js，需要import X from ‘../a/n.js’，設定別名後可寫為root/a/n.js。

前後端分離

React專案實踐系列一
在知乎上面找了張圖片，前後端分離，簡單的說，就是前端負責頁面互動，顯示後臺提供的資料，而後端負責資料的處理，提供給前臺資料。

可以看出前後端是有很強的耦合關係，後端需要依賴前端請求，前端需要依賴後端響應。不過此處後端是可以輕鬆模擬前端請求，如POSTMAN等。剩下的解決要點為如何給前端模擬資料。因此，我們在設計介面約定資料後構建另一個簡單的Server，這個Server會簡單的響應前端請求，根據約定返回模擬的資料。我們將這個Server成為Mock Server。

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

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

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

mock

他的功能十分齊全，具備許可權管理，Mock Server，資料匯入等等的功能。

相關文章