CN111638870A - 一种基于react和redux的前端开发基础平台 - Google Patents

Abstract

本发明提供了一种基于react和redux的前端开发基础平台，涉及前端开发平台技术领域，能够解决前端开发环境配置繁琐，重复劳动过多、规范不统一、代码质量不一及IE浏览器低版本兼容问题；该平台通过对现有的apollo、apollo‑cli和apollo‑build进行改进，再将三者结合构建出所述基础平台；在apollo中新增redux‑thunk；apollo‑cli提供新建项目、生成路由和页面、生成model的功能，项目、路由和页面采用apollo框架，model具有thunk支持；apollo‑build提供多入口打包和CSS按需加载功能。本发明提供的技术方案适用于前端开发的过程中。

Description

一种基于react和redux的前端开发基础平台

【技术领域】

本发明涉及前端开发平台技术领域，尤其涉及一种基于react和redux生态的灵活高效的前端开发基础平台。

【背景技术】

对于react(react为用于构建用户界面的JavaScript库)开发者而言，现有的前端开发基础平台一般是基于Create React App脚手架工具、Redux状态管理工具构建的。Create React App可用于初始化项目、启动项目，内置了基础配置，缺点是配置不够灵活，无法自由配置项目，内置模板也不够丰富。redux是JavaScript状态容器，提供可预测化的状态管理。redux为数据状态管理提供了便利，缺点是直接使用起来比较繁琐，修改一处逻辑需要涉及Action、Reducer、Store三部分文件。

现有技术中还经常使用到dva、dva-cli和roadhog。其中，dva是基于基于redux和redux-saga的数据流方案，能够简化redux开发，缺点是引入了ES6 Generator的概念，学习曲线更高，对IE浏览器不够友好；dva-cli是dva命令行工具，支持两种命令：new和init，缺点是支持的模板不够丰富；此项目维护力度不够，作者的精力转向其他项目；roadhog是可配置版的create-react-app，提供了dev、build和test命令，缺点是维护力度不够，作者的精力转向其他项目。

因此，有必要研究一种基于react和redux生态的灵活高效的前端开发基础平台来应对现有技术的不足，以解决或减轻上述一个或多个问题。

【发明内容】

有鉴于此，本发明提供了一种基于react和redux生态的灵活高效的前端开发基础平台，能够解决前端开发环境配置繁琐，重复劳动过多、规范不统一、代码质量不一及IE浏览器低版本兼容问题。

一方面，本发明提供一种基于react和redux的前端开发基础平台，所述基础平台在开源技术的基础上构建而成，其特征在于，对现有的apollo、apollo-cli和apollo-build进行改进，再通过结合改进后的apollo、apollo-cli和apollo-build构建出所述基础平台；

通过对apollo的改进实现对前端开发流程的简化，提高开发效率；通过对apollo-cli的改进能够快速生成路由、页面、model代码，并遵循统一标准；通过对apollo-build的改进提高平台的配制灵活度以及页面访问速度。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，对apollo的改进内容包括：在dva的基础上新增redux-thunk替代redux-saga，并对redux、redux-thunk和react-router进行整合，实现前端项目开发流程的简化。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，对apollo-cli的改进内容包括：提供根据模板新建项目、生成路由和页面、生成model的功能；

新建的项目采用apollo框架；生成的路由和页面是基于apollo框架的路由和页面；生成的model具有thunk支持。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，对apollo-build的改进内容包括：提供server、build、buildDll命令，分别用于本地调试、构建、打包dll；

buildDll命令实现多入口打包dll功能；

所述apollo-build支持CSS按需加载。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，新增redux-thunk的具体内容包括：

通过createApolloMiddleware方法封装redux中间件，redux中间件内部包含用于返回thunks的getThunks方法；

run方法用于把传入的thunks跟已有的thunks合并；

middleware对象用于执行对应的thunks方法，并传入“dispatch，getState”参数，最后返回middleware对象及run方法。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，对redux、redux-thunk和react-router进行整合的内容包括：

使用redux提供的applyMiddleware方法为redux中的createStore方法注入中间件apolloMiddleware和reduxThunk；使用run方法把传入的thunks合并到中间件apolloMiddleware；

注入过程为把中间件apolloMiddleware和reduxThunk传入setupMiddlewares方法。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，中间件apolloMiddleware内部判断action的async属性；async为异步时，在next方法中执行当前action对应的thunk；async不传或不为异步时，直接调用下一个apolloMiddleware中间件的dispatch。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，新建项目的具体实现内容包括：“apollo new myapp--template tmpName”命令行通过“--template”传入模板名字，NodeJS脚本获取到模板名称参数，拼装上“apollo-template-”前缀，运行“npminstall apollo-template-tmpName”安装模板到本地，然后再把安装完成的模板拷贝到当前目录；

在apollo-ast中新增IE8组件和页面函数组件的模板。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，生成的路由和页面的具体过程包括：S1、在命令行输入“apollo g route user-list”；其中，参数g和route为固定字段，代表生成路由和页面，参数user-list代表目录名、路由名或组件名；S2、执行命令，在项目根目录下的第一目录新增一个“user-list”路由，关联到“UserListPage”组件，并在项目根目录下的第二目录创建“user-list”目录，根据apollo-ast内置的模板自动创建“UserListPage.js”、“UserListView.js”、“UserListView.less”三个文件。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，生成model的实现过程包括：运行命令“apollo g model modelName”自动生成apollo的model文件，在编辑model文件内部的state，reducer，thunk属性；

其中，参数g和model为固定字段，参数modelName为model文件的名字。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，实现多入口打包dll功能的具体过程包括：配置“templatePath”时，传入数组或对象配置项，由apollo-build把该配置传入“html-webpack-plugin”插件；如果是多入口应用，循环使用该配置，并分别调用“html-webpack-plugin”插件；

CSS按需加载的实现过程包括：配置“commonChunks”时，传入一个数组，由apollo-build读取该配置，循环该数组的每一项，跟webpack splitChunks插件的配置进行合并，然后将合并后的配置传入webpack内置的属性中。

另一方面，本发明提供一种存储介质，所述存储介质上存储有计算机程序，其特征在于，运行所述计算机程序时，能够实现如上任一所述的基于react和redux的前端开发基础平台的内容。

与现有技术相比，本发明可以获得包括以下技术效果：能够解决前端开发环境配置繁琐，重复劳动过多、规范不统一、代码质量不一及IE浏览器低版本兼容问题；

开发者可以利用丰富的内置项目模板快速创建、开发、构建项目；通过灵活的配置项自由配置apollo-build构建工具，满足不同的构建需求；通过“apollo g”命令快速生成路由、页面、model代码；利用apollo简便地管理维护复杂项目的数据状态，从而大大提高项目的开发效率，解放前端开发人员的生产力；通过命令生成的初始项目及页面代码遵循统一标准的编码规范，集成了统一的代码规范检查工具，从而提高开发人员的代码质量。

当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有技术效果。

【附图说明】

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明一个实施例提供的前端开发基础平台构建原理框图；

图2是本发明一个实施例提供的apollo数据流程原理图。

【具体实施方式】

为了更好的理解本发明的技术方案，下面结合附图对本发明实施例进行详细描述。

应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。

为了解决前端开发环境配置繁琐，重复劳动过多；团队开发规范不统一，代码质量不一；复杂的redux开发，及IE浏览器低版本兼容等问题，本发明在开源技术的基础上构建了该前端开发平台。

如图1所示，本发明对现有的apollo、apollo-cli和apollo-build进行改进，弥补现有技术的不足，再采用改进后的高效易用的数据流解决方案(apollo)，模板丰富、兼容IE8浏览器、配置灵活简便的开发、构建工具apollo-cli和apollo-build，通过3者结合以及其他需要的工具构建出前端开发基础平台。

本发明采用改进后的apollo、apollo-cli和apollo-build相结合构建前端开发基础平台，基于下面三点考虑：

1)dva是基于redux和redux-saga实现的数据流方案，引入了ES6 Generator的概念，学习曲线更高，对IE浏览器不够友好；而apollo是基于redux和redux-thunk的数据流解决方案，使用redux-thunk替换了redux-saga中间件，可以使用Promise来控制数据流，Promise技术相对成熟，学习成本更低，且对低版本的IE浏览器支持更好；

2)dva-cli是dva命令行工具，只支持两种命令，支持的模板不够丰富，且项目作者不再积极维护；apollo-cli在此基础上新增了一种命令用于生成路由，生成页面、生成model等功能，且内置了pc、mobile、小程序、微前端等丰富的项目模板；

3)roadhog比create-react-app配置更灵活，但由于作者不再维护，很少有新特性增加；apollo-build在此基础上增加了buildDll命令，通过引入DllPlugin插件提升编译速度。

下面依次对改进后的apollo、apollo-cli和apollo-build进行说明。

1、apollo：基于redux和redux-thunk的数据流解决方案

通过对redux、redux-thunk、react-router进行整合实现改进，能够极大的简化前端项目的开发流程。

(1)数据流向

数据的改变一般是用户交互行为或者浏览器行为(如路由跳转等)触发的，在这类事件发生时会通过dispatch发起一个Action，如果是同步行为会直接通过Reducer改变State，如果是异步行为会先触发Thunk然后流向Reducer最终改变State，因此在apollo中，数据流向将严格遵循单向数据流的理念，从而保证项目的可维护性。如图2所示。

(2)实现原理

本发明在dva的基础上做优化，新增redux-thunk模块，使用它替换redux-saga模块，再将redux、redux-thunk、react-router进行整合，具体整合过程见下文优化细节；redux-thunk基于Promise，相对于redux-saga使用的Generator更易于学习掌握，低版本浏览器对其支持性更好，优化实现的细节包括：

a)新增对thunk的支持

首先，通过createApolloMiddleware方法封装redux中间件，redux中间件内部包含getThunks方法用于返回thunks，run方法用于把传入的thunks跟已有的thunks合并，middleware对象用于执行对应的thunks方法，并传入“dispatch，getState”参数，最后返回middleware对象及run方法。

然后，使用redux提供的applyMiddleware方法为redux的createStore方法注入createApolloMiddleware创建的中间件apolloMiddleware及reduxThunk，注入过程就是把apolloMiddleware和reduxThunk传入setupMiddlewares方法。

apolloMiddleware中间件内部判断action的async属性，async为true代表异步，在next方法中执行当前action对应的thunk；async不传或为false时，直接调用下一个apolloMiddleware中间件的dispatch。run方法会把传入的thunks合并到中间件apolloMiddleware。

开发者调用apollo实例的start方法时，内部会调用createApolloMiddleware方法，然后执行返回实例的run方法，并把当前作用域的thunks作为参数传入，在原有dva的基础上加入了thunk的支持。

b)增加onThunk支持

在dva原有hooks的基础上增加了onThunk支持，在thunk执行时拦截并进入回调函数。

2、apollo-cli：apollo命令行工具

2.1、功能说明

提供根据模板新建项目，生成路由，页面、生成model等功能。生成的模板项目改为使用apollo框架，生成的路由、页面改为基于apollo框架，生成的model新增了thunk支持。

2.2、实现原理

a)根据模板新建项目

改进点：生成的模板项目由dva框架改为使用apollo框架。

“apollo new myapp--template tmpName”命令行通过“--template”传入模板名字，NodeJS脚本获取到模板名称参数，拼装上“apollo-template-”前缀，运行“npm installapollo-template-tmpName”安装模板到本地，然后再把安装完成的模板拷贝到当前目录。

apollo-ast中新增IE8组件(routeComponents-ie8.create.handlebars)和页面函数组件(routeViews.create.handlebars)的模板。

b)自动生成路由、页面文件

改进点：生成的路由、页面从基于dva框架改为基于apollo框架。

当命令行输入“apollo g route user-list”时，参数“g”和“route”都是固定字段，代表生成路由和页面，会执行apollo-ast中生成路由(router.createRoute)、页面(routeComponents.create)、组件(routeViews.create)的方法，最后一个参数“user-list”用于目录名、路由名和组件名。执行命令后，会在项目根目录的“src/router/router.js”中新增一个“user-list”路由，关联到“UserListPage”组件，并在项目根目录的“src/pages/”中自动创建“user-list”目录，根据apollo-ast内置的模板自动创建“UserListPage.js”、“UserListView.js”、“UserListView.less”三个文件，开发者可以基于这几个文件继续开发，省去了手动创建路由和页面的麻烦，这三个文件都是基于apollo框架创建的。

c)自动生成model文件

改进点：生成的model文件新增了thunk支持。

开发者输入“apollo g model modelName”可以自动生成apollo的model文件，参数“g”和“model”为固定字段，modelName为model文件的名字，随后继续编辑model文件内部的state，reducer，thunk属性即可。

3、apollo-build：可灵活配置的react开发、构建工具

3.1、功能简介

提供server、build、buildDll命令，分别用于本地调试、构建、打包dll。本申请在roadhog原有功能的基础上做了改进。

改进点包括：

a)底层的构建工具webpack升级到4.x；

b)相对于roadhog仅支持单文件构建，apollo-build增加了多入口打包的支持；

c)相对于roadhog只能构建出一个css文件，apollo-build支持按照按需加载的模块构建多个css文件，提高页面资源加载效率。

3.2、实现原理

a)内置webpack构建工具升级

apollo-build内置了webpack打包工具，本申请把webpack的版本从3.x升级到了4.x，构建效率随之提升。

b)新增了多入口打包支持

开发者配置“templatePath”时，可以传入数组或对象配置项，每一项均包含“template，filename，inject，chunks”四个属性，apollo-build会把此配置传入“html-webpack-plugin”插件，如果是多入口应用，先循环这个配置数组，分别调用“html-webpack-plugin”插件，“html-webpack-plugin”插件本身会读取传入的属性，并配置好该模板。该项配置的优势是可以灵活配置单入口、多入口应用的HTML模板，以前是固定的无法灵活配置。

c)支持CSS按需加载

开发者配置“commonChunks”时，会传入一个数组，数组每一项均包含“name，chunks”属性，name字符串代表chunk名，也对应最后生成的文件名，chunks数组代表需要抽取的包名，apollo-build会读取该项配置，循环这个数组的每一项，跟webpacksplitChunks插件的配置进行合并，放到splitChunks插件配置的末尾，然后将合并后的配置传入webpack内置的“optimization.splitChunks.cacheGroups”属性。配置“commonChunks”的作用是把通用的不常变化的代码库抽取出来，浏览器加载一次后会缓存下来，不重复发送请求，从而提高页面的访问速度。

本发明的技术关键点为：高效易用的数据流解决方案(apollo)，模板丰富、兼容IE8浏览器、配置灵活简便的开发、构建工具(apollo-cli，apollo-build)，通过3者结合构建的前端开发基础平台。

开发者可以利用丰富的内置项目模板快速创建、开发、构建项目；通过灵活的配置项自由配置apollo-build构建工具，满足不同的构建需求；通过“apollo g”命令快速生成路由、页面、model代码；利用apollo简便地管理维护复杂项目的数据状态，从而大大提高项目的开发效率，解放前端开发人员的生产力。通过命令生成的初始项目及页面代码遵循统一标准的编码规范，集成了统一的代码规范检查工具，从而提高开发人员的代码质量。

以上对本申请实施例所提供的一种基于react和redux生态的灵活高效的前端开发基础平台，进行了详细介绍。以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

如在说明书及权利要求书当中使用了某些词汇来指称特定组件。本领域技术人员应可理解，硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求书并不以名称的差异来作为区分组件的方式，而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求书当中所提及的“包含”、“包括”为一开放式用语，故应解释成“包含/包括但不限定于”。“大致”是指在可接收的误差范围内，本领域技术人员能够在一定误差范围内解决所述技术问题，基本达到所述技术效果。说明书后续描述为实施本申请的较佳实施方式，然所述描述乃以说明本申请的一般原则为目的，并非用以限定本申请的范围。本申请的保护范围当视所附权利要求书所界定者为准。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

上述说明示出并描述了本申请的若干优选实施例，但如前所述，应当理解本申请并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述申请构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本申请的精神和范围，则都应在本申请所附权利要求书的保护范围内。

Claims (10)

1.一种基于react和redux的前端开发基础平台，所述基础平台在开源技术的基础上构建而成，其特征在于，对现有的apollo、apollo-cli和apollo-build进行改进，再通过结合改进后的apollo、apollo-cli和apollo-build构建出所述基础平台；

通过对apollo的改进实现对前端开发流程的简化，提高开发效率；通过对apollo-cli的改进实现快速生成路由、页面和model代码，并遵循统一标准；通过对apollo-build的改进提高平台的配制灵活度以及页面访问速度。

2.根据权利要求1所述的基于react和redux的前端开发基础平台，其特征在于，对apollo的改进内容包括：在dva的基础上新增redux-thunk替代redux-saga，并对redux、redux-thunk和react-router进行整合，实现前端项目开发流程的简化。

3.根据权利要求1所述的基于react和redux的前端开发基础平台，其特征在于，对apollo-cli的改进内容包括：提供根据模板新建项目、生成路由和页面、生成model的功能；

新建的项目采用apollo框架；生成的路由和页面是基于apollo框架的路由和页面；生成的model具有thunk支持。

4.根据权利要求1所述的基于react和redux的前端开发基础平台，其特征在于，对apollo-build的改进内容包括：提供server、build、buildDll命令，分别用于本地调试、构建、打包dll；

buildDll命令实现多入口打包dll功能；

所述apollo-build支持CSS按需加载。

5.根据权利要求2所述的基于react和redux的前端开发基础平台，其特征在于，新增redux-thunk的具体内容包括：

通过createApolloMiddleware方法封装redux中间件，redux中间件内部包含用于返回thunks的getThunks方法；

run方法用于把传入的thunks跟已有的thunks合并；

middleware对象用于执行对应的thunks方法，并传入“dispatch，getState”参数，最后返回middleware对象及run方法。

6.根据权利要求2所述的基于react和redux的前端开发基础平台，其特征在于，对redux、redux-thunk和react-router进行整合的内容包括：

使用redux提供的applyMiddleware方法为redux中的createStore方法注入中间件apolloMiddleware和reduxThunk；使用run方法把传入的thunks合并到中间件apolloMiddleware；

注入过程为把中间件apolloMiddleware和reduxThunk传入setupMiddlewares方法；

中间件apolloMiddleware内部判断action的async属性；async为异步时，在next方法中执行当前action对应的thunk；async不传或不为异步时，直接调用下一个apolloMiddleware中间件的dispatch。

7.根据权利要求3所述的基于react和redux的前端开发基础平台，其特征在于，新建项目的具体实现内容包括：“apollo new myapp--template tmpName”命令行通过“--template”传入模板名字，NodeJS脚本获取到模板名称参数，拼装上“apollo-template-”前缀，运行“npm installapollo-template-tmpName”安装模板到本地，然后再把安装完成的模板拷贝到当前目录；

在apollo-ast中新增IE8组件和页面函数组件的模板。

8.根据权利要求3所述的基于react和redux的前端开发基础平台，其特征在于，生成的路由和页面的具体过程包括：S1、在命令行输入“apollo g route user-list”；其中，参数g和route为固定字段，代表生成路由和页面，参数user-list代表目录名、路由名或组件名；S2、执行命令，在项目根目录下的第一目录新增一个“user-list”路由，关联到“UserListPage”组件，并在项目根目录下的第二目录创建“user-list”目录，根据apollo-ast内置的模板自动创建“UserListPage.js”、“UserListView.js”、“UserListView.less”三个文件；

生成model的实现过程包括：运行命令“apollo g model modelName”自动生成apollo的model文件，在编辑model文件内部的state，reducer，thunk属性；

其中，参数g和model为固定字段，参数modelName为model文件的名字。

9.根据权利要求4所述的基于react和redux的前端开发基础平台，其特征在于，实现多入口打包dll功能的具体过程包括：配置“templatePath”时，传入数组或对象配置项，由apollo-build把该配置传入“html-webpack-plugin”插件；如果是多入口应用，循环使用该配置，并分别调用“html-webpack-plugin”插件；

CSS按需加载的实现过程包括：配置“commonChunks”时，传入一个数组，由apollo-build读取该配置，循环该数组的每一项，跟webpack splitChunks插件的配置进行合并，然后将合并后的配置传入webpack内置的属性中。

10.一种存储介质，所述存储介质上存储有计算机程序，其特征在于，运行所述计算机程序时，能够实现如权利要求1-9任一所述的基于react和redux的前端开发基础平台的内容。

Images