CN110580152A - 一种前端自动化脚手架 - Google Patents

Abstract

本发明公开了一种前端自动化脚手架，包括INIT模块、SEVER模块、MIN模块、私有源依赖设置模块以及基于WEEX的APP脚手架设计模块，INIT模块进行的内容包括项目模板上传、以某个项目模板为基础创建项目、更新现有项目模板以及创建项目并对项目依赖进行下载，MIN模块包括根据配置进行依赖检查、基于eslint做代码语法校验、前端接口自动化测试、代码编译与混淆压缩、根据代码内容生成版本号以及将生成的版本号填入html中。本前端自动化脚手架，前端自动化脚手架技术可使得项目更加规范化、模块化、组件化、自动化，进而实现前端的工程化，让整个系统更加灵活，由此将传统的前端开发人员解放出来，减少人力与时间投入，降低开发成本，提高整体前端项目开发效率。

Description

一种前端自动化脚手架

技术领域

本发明涉及到一种前端脚手架，特别涉及一种前端自动化脚手架。

背景技术

脚手架是一个或者一套搭建工具的总称，有助于更好的完成前端代码的构建，减少重复的构建工作。当下前端开发过程中，仍存在开发到上线的流程环境复杂、基础设施不完善、没有规范的整套流程、多套脚手架并行、重复配置浪费时间等问题，上述问题已经严重阻碍了前端产品的发展。目前，前端发展迅速，技术更替很快，项目开发每次都需要手动创建项目，然后配置各种编译环境，开发期间又需要多种服务配合完成开发，整个周期基本上都需要手动配置，然后才能进行开发，效率非常低下。现有技术还存在以下问题：首先，自动化程度现有相关技术中，定制化程度都非常高，自动化浏览器开发的脚手架不能作为APP开发的脚手架，没有整套解决方案的脚手架；其次，前端技术技术栈更新较快，新技术栈升级之后，老的项目迁移新的自动化工具繁琐而且需要逐个检查，目前技术无法一套全部升级并对现有项目升级更新。

发明内容

为了解决现有的问题，本发明的目的在于提供一种前端自动化脚手架，将整套开发流程自动化、规范化，并且做到兼容PC端、移动端、APP端等多端开发，避免重复配置，提高整体前端项目开发效率，降低项目创建成本，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种前端自动化脚手架，包括INIT模块、SEVER模块、MIN模块、私有源依赖设置模块以及基于WEEX的APP脚手架设计模块，所述INIT模块进行的内容包括项目模板上传、以某个项目模板为基础创建项目、更新现有项目模板以及创建项目并对项目依赖进行下载；

所述SEVER模块包括模拟线上服务、模拟后端数据返回、正向代理避免跨越、跨越标识跳过浏览器阻断、拦截请求将一些固定的转到开发环境、对https的服务支持、基于gulp做编译流程管理、基于eslint做代码的检查、基于webpack+babel做代码的编译管理以及开发便捷的配置；

所述MIN模块包括根据配置进行依赖检查、基于eslint做代码语法校验、前端接口自动化测试、代码编译与混淆压缩、根据代码内容生成版本号以及将生成的版本号填入html中；

所述私有源依赖设置模块包括向私有源提交库和组件，从私有源中加载依赖以及从项目中卸载依赖。

优选的，所述INIT模块中的以某个项目模板为基础创建项目，通过项目底层积累，得到通用的前端开发模板，创建项目并对项目依赖进行下载为项目开发的第一个阶段，当有新的业务来时，通过对业务的判断使用对应的模板，通过脚手架bm init进行一键项目创建，通过git关联即可进行后续业务开发。

优选的，所述基于WEEX的APP脚手架设计模块进行的步骤为：首先进行脚本的创建，进而加载IOS与Android的依赖并完成项目的更新，此外进行项目启动时的实时浏览，并将修改的配置文件打包放入客户端中，最后发布上线APP。

优选的，所述MIN模块采用多线程的方式打包，最终将版本号填入HTML文档中。

与现有技术相比，本发明的有益效果是：本发明提出的前端自动化脚手架，前端自动化脚手架技术可使得项目更加规范化、模块化、组件化、自动化，并且做到兼容PC端、移动端、APP端多端开发，进而实现前端的工程化，让整个系统更加灵活，以应对各种各样的业务需求，由此将传统的前端开发人员解放出来，减少人力与时间投入，降低开发成本，提高整体前端项目开发效率。

附图说明

图1为本发明的系统设计示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，一种前端自动化脚手架，包括INIT模块、SEVER模块、MIN模块、私有源依赖设置模块以及基于WEEX的APP脚手架设计模块，INIT(初始化)模块进行的内容包括项目模板上传、以某个项目模板为基础创建项目、更新现有项目模板以及创建项目并对项目依赖进行下载，以某个项目模板为基础创建项目为，通过项目底层积累，得到通用的前端开发模板，多套模板以应对不同业务的开发，使业务项目能快速落地，快速启动，快速开发，快速上线，规范化的项目底层也能提高项目的规范化；更新现有项目模板为，随着项目的发展，项目模板也会有适当的更新，如果遇到项目模板中有bug，上面两种情况都可以通过脚手架命令bm update进行更新，可以不影响现有业务代码，通过脚手架进行底层升级；创建项目并对项目依赖进行下载为项目开发的第一个阶段，当有新的业务来时，通过对业务的判断使用对应的模板，通过脚手架bm init进行一键项目创建，通过git关联即可进行后续业务开发。

SEVER(代码编译与服务模拟)模块包括模拟线上服务、模拟后端数据返回、正向代理避免跨越、跨越标识跳过浏览器阻断、拦截请求将一些固定的转到开发环境、对https的服务支持、基于gulp做编译流程管理、基于eslint做代码的检查、基于webpack+babel做代码的编译管理以及开发便捷的配置，前端新型语法和框架语法落地、模块化的实现都依赖着webpack、gulp等自动化工具链，脚手架也集成了相应的工具，并且会启动对应的http/https服务，来模拟线上环境进行开发和代码的编译，真实的模拟线上服务，得到和线上一样的工作环境，可以达到真实的开发环境与上线一样。其中，mock服务模块，模拟线上服务：当没有后端进入时，前端开发过程中与后端约定好接口之后可以模拟后端的服务接口，前端开发不再受后端开发时间的限制，前端可以进行独立开发，与后端联调时只需要将代理服务停掉，即可完成与真实后端数据的对接。其中，正向代理模块，正向代理避免跨越：前端浏览器开发一直都存在跨域问题，而刚开始的开发环境，为了能完整的模拟后端的服务，域名可能存在跨域问题，正向代理可以规避这个问题，让开发的流程更加顺畅；其中，线上劫持模块，拦截请求将一些固定的转到开发环境：由于测试环境数据和用例有限，难免会遇到发布线上之后发现bug，当线上出现问题时启动服务能将线上服务代理到本地，通过线上的数据来调试前端的问题，迅速定位问题，能迅速修复线上问题。

MIN模块包括根据配置进行依赖检查、基于eslint做代码语法校验、前端接口自动化测试、代码编译与混淆压缩、根据代码内容生成版本号以及将生成的版本号填入html中，随着项目的发展，项目越大团队代码质量越难以控制，所以通过现有技术ESLint做代码的强校验，上线前做代码的校验，让项目的代码质量能在可控的范围内，使代码的维护性增强；其中，打包压缩与版本生成为，代码如果不进行打包压缩，直接放到线上一方面不安全，一方面也会特别大，并且如果没有版本的控制，整个代码被浏览器缓存，新发布的代码不会生效，脚手架通过命令的方式进行一键打包，并且为了加速，采用多线程的方式进行打包，最终将版本号填入HTML文档中。

私有源依赖设置模块包括向私有源提交库和组件，从私有源中加载依赖以及从项目中卸载依赖。

基于WEEX的APP脚手架设计模块进行的步骤为：首先进行脚本的创建，进而加载IOS与Android的依赖并完成项目的更新，此外进行项目启动时的实时浏览，并将修改的配置文件打包放入客户端中，最后发布上线APP。此后，线上代码的稳定性和线上代码的性能需要自动化的监控报警，通过脚手架对代码进行自动化的部署监控，业务代码对监控的部分完全无感知，也不会影响业务代码的监控，整块自动化完成对代码的监控部署。

整个技术方案包括项目创建、项目开发、项目测试以及项目发布四个步骤：其中项目创建及初始化主要根据已有模板初始化一个工程；开发阶段主要通过脚手架启动编码环境，并提供各种开发时需要的支持；测试以及发布阶段完成一键部署到各个环境中，提供测试和发布。要完成上面四个阶段，围绕着的关键点有：命令设计、初始化设计、服务模拟、代码编译、多线程打包。

命令设计：命令设计最大的重点在于扩展，设计可扩展的命令方式，在扩展命令时对现有逻辑没有影响最重要。

初始化设计：项目初始化是工程化的第一步，通过脚手架在项目初始化时规范工程目录结构，降低项目间切换成本，规范项目框架和模板。

服务模拟：前后端分离之后，前端的代码最终也会发布到服务器上，不管最终以怎样的形式展现，至少需要一个服务才能访问到，在开发阶段能完整模拟整个项目环境，会降低开发过程中的差异。

代码编译：代码编译通过采用gulp+webpack+babel的方式，现在前端语言发展很快，但是由于用户的浏览器发展一直都没有跟上，所以想要使用先进的属性和语法就需要这些方式的编译。

多线程打包：当对外暴露的代码越来越多时，打包的效率也会是有性能问题，为了让整个代码编译更快，采用多线程的方式对代码进行打包，大大节约了发布部署的时间。

整个脚手架通过工具的方式，让整个项目变得稳定，让开发流程变得更加快速，脚手架也让系统项目更加规范化、模块化、组件化、自动化，这四个方面也就是前端的工程化，让整个系统更加灵活，以应对各种各样的业务需求。

模块化：前端工程本身没有模块化，为了能更好的组织前端代码，需要引入模块化的规范，如CMD，AMD，ES6的import，脚手架本身集成webpack的工具，也具有babel的编译方式，模块化的方式是不需要任何扩展就可以支持。

组件化：团队的技术积累和沉淀应该转化成收益，组件化就是最好的体现，在技术栈稳定的情况下，业务过程中的积累所形成的可复用的组件应该相当多，除了复制粘贴，还可以通过脚手架的方式进行快速插拔，进行复用，整个这套机制就是内部包管理，通过这套脚手架也能做深度定制的包管理工具。

自动化：通过脚手架完成从项目创建到项目上线间的所有自动化功能，如：自动化编译、语法检查、打包、版本控制、监控部署等，都是可以通过脚手架命令对项目进行自动化的支持，让整体的开发流程效率更高。

规范化：前端相对来说更泛一点，发展相对于现在主流的后端语言也是比较晚，前端规范的形成过程中没有绝对的规范，更多是适应当前团队的风格，规范能给项目工程带来稳定性、可维护性、可扩展性等，也能让工程效率更高。

综上所述，本发明提出的前端自动化脚手架，前端自动化脚手架技术可使得项目更加规范化、模块化、组件化、自动化，并且做到兼容PC端、移动端、APP端多端开发，进而实现前端的工程化，让整个系统更加灵活，以应对各种各样的业务需求，由此将传统的前端开发人员解放出来，减少人力与时间投入，降低开发成本，提高整体前端项目开发效率。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护范围之内。

Claims (4)

1.一种前端自动化脚手架，包括INIT模块、SEVER模块、MIN模块、私有源依赖设置模块以及基于WEEX的APP脚手架设计模块，其特征在于：所述INIT模块进行的内容包括项目模板上传、以某个项目模板为基础创建项目、更新现有项目模板以及创建项目并对项目依赖进行下载；

所述SEVER模块包括模拟线上服务、模拟后端数据返回、正向代理避免跨越、跨越标识跳过浏览器阻断、拦截请求将一些固定的转到开发环境、对https的服务支持、基于gulp做编译流程管理、基于eslint做代码的检查、基于webpack+babel做代码的编译管理以及开发便捷的配置；

所述MIN模块包括根据配置进行依赖检查、基于eslint做代码语法校验、前端接口自动化测试、代码编译与混淆压缩、根据代码内容生成版本号以及将生成的版本号填入html中；

所述私有源依赖设置模块包括向私有源提交库和组件，从私有源中加载依赖以及从项目中卸载依赖。

2.根据权利要求1所述的一种前端自动化脚手架，其特征在于：所述INIT模块中的以某个项目模板为基础创建项目，通过项目底层积累，得到通用的前端开发模板，创建项目并对项目依赖进行下载为项目开发的第一个阶段，当有新的业务来时，通过对业务的判断使用对应的模板，通过脚手架bm init进行一键项目创建，通过git关联即可进行后续业务开发。

3.根据权利要求1所述的一种前端自动化脚手架，其特征在于：所述基于WEEX的APP脚手架设计模块进行的步骤为：首先进行脚本的创建，进而加载IOS与Android的依赖并完成项目的更新，此外进行项目启动时的实时浏览，并将修改的配置文件打包放入客户端中，最后发布上线APP。

4.根据权利要求1所述的一种前端自动化脚手架，其特征在于：所述MIN模块采用多线程的方式打包，最终将版本号填入HTML文档中。