一种用于多环境共用的前端项目打包方法及装置.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN115016785A(43)申请公布日2022.09.06(21)申请号202210950257.8(22)申请日2022.08.09(71)申请人杭州湛联科技有限公司地址310012浙江省杭州市西湖区西斗门路3号天堂软件园A幢1楼1150室(72)发明人田友滨赵利民吴晔斌林江(74)专利代理机构杭州浙科专利事务所(普通合伙)33213专利代理师孙孟辉(51)Int.Cl.G06F8/36(2018.01)G06F8/71(2018.01)权利要求书2页说明书5页附图1页(54)发明名称一种用于多环境共用的前端项目打包方法及装置(57)摘要本发明公开了一种用于多环境共用的前端项目打包方法及装置，涉及web前端开发技术领域。该方法包括：定义应用中不同环境场景中使用的变量名称；创建多个项目环境，获取定义的变量名称并赋予各个环境的具体值，自动保存为各个环境的配置信息文件；选择某个项目环境进行打包，读取环境关键字，生成该环境的打包命令；执行当前环境构建命令构建当前项目环境；执行当前环境打包命令进行详情项目的打包；拷贝打包后的可部署前端文件夹到指定目录。本发明解决前端项目无法在不同应用环境中重复使用的技术问题，极大地提高了打包并部署前端项目的效率。CN115016785ACN115016785A权利要求书1/2页1.一种用于多环境共用的前端项目打包方法，其特征在于包括如下步骤：步骤一、选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；步骤二、定义该前端项目的变量名称；步骤三、创建某项目应用环境，输入项目名称及项目KEY；步骤四、获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；步骤五、保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；步骤六、选择对创建的某项目应用环境进行打包，自动生成打包命令；步骤七、依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；步骤八、拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；步骤九、点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。2.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤二中，所述变量名称分为公共变量和自定义业务变量名称，公共变量名称为不可编辑的默认变量，自定义业务变量名称根据各项目业务场景进行自定义添加。3.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤五中，所述变量信息写入到环境配置文件中。4.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤六中，所述打包命令包括：基于npm构建项目命令、基于npm的打包项目命令、备份上次部署包和拷贝部署文件命令。5.根据权利要求4所述的用于多环境共用的前端项目打包方法，其特征在于：执行所述基于npm构建项目命令，运行npminstall函数进行安装项目依赖包来编译构建项目；执行所述基于npm的打包项目命令，基于npm和webpack，运行npmrundemo函数，读取环境配置文件定义的变量信息，加载到该项目中，运行vue‑cli‑servicebuild函数命令，将项目打包生成可运行的前端静态页面文件夹部署包。6.根据权利要求4所述的用于多环境共用的前端项目打包方法，其特征在于：执行备份上次部署包和拷贝部署文件命令，先通过list函数检查存储部署包的文件夹是否存在上次打包存储的部署包，存在则先执行mv命令来备份上次文件夹部署包到备份文件夹，不存在则直接执行cp拷贝部署文件命令。7.一种用于多环境共用的前端项目打包装置，其特征在于包括如下模块：前端项目选择模块，用于选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；变量名称定义模块，用于定义该前端项目的变量名称；2CN115016785A权利要求书2/2页项目应用环境创建模块，用于创建某项目应用环境，输入项目名称及项目KEY；变量值设定模块，用于获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；文件夹创建模块，用于保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KE