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.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。

先后端分离

在知乎上面找了张图片，先后端分离，简单的说，就是前端负责页面交互，显示后台提供的数据，然后端负责数据的处理，提供给前台数据。

能够看出先后端是有很强的耦合关系，后端须要依赖前端请求，前端须要依赖后端响应。不过此处后端是能够轻松模拟前端请求，如POSTMAN等。剩下的解决要点为如何给前端模拟数据。所以，咱们在设计接口约定数据后构建另外一个简单的Server，这个Server会简单的响应前端请求，根据约定返回模拟的数据。咱们将这个Server成为Mock Server。

其中Mock Server可分红本地及远程。

本地的Mock Server须要每一个前端在本身电脑上部署服务器，且若后台改动API，后台没法同步维护Mock Server与Real Server。

所以打算创建远程的Mock Server(其实还有个关键是我使用用友配的电脑开发，在本地部署的话电脑配置。。。)不过此步骤咱们也能够省略了，用友的大前端技术团队提供了Mock平台。

他的功能十分齐全，具有权限管理，Mock Server，数据导入等等的功能。