React項目實踐系列一

2019年8月24日 209次阅读 来源: quietwait

數據剖析平台-實踐系列一

項目創建於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.0.0/umd/react.production.min.js"></script>
    <script src="//design.yonyoucloud.com/static/react-dom/16.0.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平台。《React項目實踐系列一》

他的功用非常完全，具有權限治理，Mock Server，數據導入等等的功用。

    原文作者：quietwait
    原文地址: https://segmentfault.com/a/1190000015206912
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞