一种前端工程化方法及系统技术方案

本申请公开了一种前端工程化方法及系统，本方法首先根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；然后在前端开发项目中配置与目标工程的后端框架建立连接API接口，最后根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。本发明专利技术将项目开发自动化、智能化，进一步提升了开发效率。进一步提升了开发效率。进一步提升了开发效率。

【技术实现步骤摘要】
一种前端工程化方法及系统


[0001]本专利技术涉及网络货运行业诚信评估领域，特别涉及一种前端工程化方法及系统。

技术介绍

[0002]随着网络的发展，出现了越来越多智能设备中的应用程序，现有的各种应用程序大多需要经过前端开发工程化系统来进行开发，以方便技术人员。
[0003]通常前端开发人员在项目日常迭代中会遇到以下几种情况：
[0004]1、创建前端项目：创建前端项目的时候要去下载一个前端框架并安装依赖经常会遇到框架太老没办法运行或者安装依赖的时候由于版本号混乱导致各种报错；
[0005]2、新建页面：新建页面的时候需要修改路由然后添加页面入口整个操作需要各种切换编辑页面流程重复繁琐经常忘记步骤且容易出错；
[0006]3、创建后端项目：开发人员想创建后端项目但是网上鱼龙混杂(如express koaegg)等没有一个标准可用的后端框架就算找到了运行以后也要进行二次封装和修改才能达到可用的状态极其复杂；
[0007]4、缺少统一规范：有的项目启动命令是npmrunstart有的项目是npmrun dev当多个项目切换容易忘记；
[0008]然而现有业界前端框架vuereact都有内置的cli工具vue
‑
cli、react
‑
cli此类工具也仅仅是基于框架做了简单的封装，对于业务的复杂性和定制化并没有做过多干预。

技术实现思路

[0009]基于此，本申请实施例提供了一种前端工程化方法及系统，能够解决现有技术存在的问题，并将项目开发自动化、智能化，进一步提升了开发效率。
[0010]第一方面，提供了一种前端工程化方法，该方法包括：
[0011]根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
[0012]在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
[0013]根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
[0014]可选地，所述根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目，包括：
[0015]根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
[0016]根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
[0017]可选地，所述创建目标工程的可视化前端开发项目，还包括：
[0018]根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
[0019]可选地，所述方法还包括：
[0020]在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
[0021]可选地，所述目标工程的后端框架至少可以包括koa2。
[0022]第二方面，提供了一种前端工程化系统，该系统包括：
[0023]创建模块，用于根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
[0024]连接模块，用于在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
[0025]生成模块，用于根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
[0026]可选地，所述创建模块包括：
[0027]根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
[0028]根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
[0029]可选地，所述创建目标工程的可视化前端开发项目，还包括：
[0030]根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
[0031]可选地，所述系统还包括：
[0032]构建模块，用于在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
[0033]可选地，所述目标工程的后端框架至少可以包括koa2。
[0034]本申请实施例提供的技术方案带来的有益效果至少包括：
[0035]本申请实施例提供的技术方案中首先根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；然后在前端开发项目中配置与目标工程的后端框架建立连接API接口，最后根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。可以看出，本专利技术的有益效果在于：
[0036]1、有利于团队技术栈统一特别针对团队项目过多的问题，前端技术栈通过基于模板生成项目有利于团队技术栈统一，便于团队后续协作和针对统一技术栈做深入的学习；
[0037]2、降低开发搭建成本一键生成脚手架可及时响应新的项目可以立刻投入到业务开发中降低新项目搭建成本；
[0038]3、减少人为操作导致的项目问题本专利技术支持快速生成页面和生成接口，正常开发中需要手动去创建页面，创建路由操作多个文件，特别容易出错通过系统创建保证效率的同时也保证了准确性；
[0039]4、减少运维成本一键发布，工具内集成了对项目的编译和打包并部署到测试环境
的脚本通过一键部署，可以及时更新到测试环境。
附图说明
[0040]为了更清楚地说明本专利技术的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引申获得其它的实施附图。
[0041]图1为本申请实施例提供的前端工程化方法步骤流程图；
[0042]图2为本申请实施例提供的开发流程示意图；
[0043]图3为本申请实施例提供的Node服务框架示意图；
[0044]图4为本申请实施例提供的开发者工具示意图；
[0045]图5为本申请实施例提供的技术端实现示意图。
具体实施方式
[0046]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0047]在本专利技术的描述中，术语“包括”、“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包括了一系列步骤或单元的过程、方法、系统、产品或设备不必限于已明确列出的那些步骤或单元，而是还可包含虽然并未明确列出的但本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端工程化方法，其特征在于，所述方法包括：根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。2.根据权利要求1所述的方法，其特征在于，所述根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目，包括：根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。3.根据权利要求1所述的方法，其特征在于，所述创建目标工程的可视化前端开发项目，还包括：根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。5.根据权利要求1所述的方法，其特征在于，所述目标工程的后端框架至少可以包括ko...

【专利技术属性】
技术研发人员：李军，
申请(专利权)人：金茂云科技服务北京有限公司，
类型：发明
国别省市：