CN115016785A - 一种用于多环境共用的前端项目打包方法及装置 - Google Patents

Abstract

本发明公开了一种用于多环境共用的前端项目打包方法及装置，涉及web前端开发技术领域。该方法包括：定义应用中不同环境场景中使用的变量名称；创建多个项目环境，获取定义的变量名称并赋予各个环境的具体值，自动保存为各个环境的配置信息文件；选择某个项目环境进行打包，读取环境关键字，生成该环境的打包命令；执行当前环境构建命令构建当前项目环境；执行当前环境打包命令进行详情项目的打包；拷贝打包后的可部署前端文件夹到指定目录。本发明解决前端项目无法在不同应用环境中重复使用的技术问题，极大地提高了打包并部署前端项目的效率。

Description

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

技术领域

本发明涉及web前端开发技术领域，更具体的说，它涉及一种用于多环境共用的前端项目打包装置及方法。

背景技术

互联网产品的前端项目在多个客户群体中应用场景下，特别是政府类项目，往往有百分之七八十的业务类似，只是部分业务和相同业务的部分逻辑存在差异，同时每个项目的部署环境也不一致，每个项目的通用信息也不一致，如系统名称、接口调用域名等，当有多个项目需要完成时，根据每个项目的业务进行部分业务逻辑调整进行项目应用，会导致很多前端模块不能重复使用，或者某个模块存在问题，所有的项目都需要相应的修复调整，导致重复工作，开发维护成本较大。

发明内容

针对现有技术的上述技术问题，本发明的目的是提供一种用于多环境共用的前端项目打包方法及装置，以实现不同应用环境的项目共用同一个前端，快速打包，提高项目交付部署更新效率。其具体技术方案如下：

一种用于多环境共用的前端项目打包方法，包括如下步骤：

步骤一、选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；

步骤二、定义该前端项目的变量名称；

步骤三、创建某项目应用环境，输入项目名称及项目KEY；

步骤四、获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；

步骤五、保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；

步骤六、选择对创建的某项目应用环境进行打包，自动生成打包命令；

步骤七、依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；

步骤八、拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

步骤九、点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

进一步的，步骤二中，所述变量名称分为公共变量和自定义业务变量名称，公共变量名称为不可编辑的默认变量，自定义业务变量名称根据各项目业务场景进行自定义添加。

进一步的，步骤五中，所述变量信息写入到环境配置文件中。

进一步的，步骤六中，所述打包命令包括：基于npm构建项目命令、基于npm的打包项目命令、备份上次部署包和拷贝部署文件命令。

进一步的，执行所述基于npm构建项目命令，运行npm install函数进行安装项目依赖包来编译构建项目；执行所述基于npm的打包项目命令，基于npm和webpack，运行npmrun demo函数，读取环境配置文件定义的变量信息，加载到该项目中，运行vue-cli-service build函数命令，将项目打包生成可运行的前端静态页面文件夹部署包。

进一步的，执行备份上次部署包和拷贝部署文件命令，先通过list函数检查存储部署包的文件夹是否存在上次打包存储的部署包，存在则先执行mv命令来备份上次文件夹部署包到备份文件夹，不存在则直接执行cp拷贝部署文件命令。

一种用于多环境共用的前端项目打包装置，包括如下模块：

前端项目选择模块，用于选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；

变量名称定义模块，用于定义该前端项目的变量名称；

项目应用环境创建模块，用于创建某项目应用环境，输入项目名称及项目KEY；

变量值设定模块，用于获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；

文件夹创建模块，用于保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；

打包命令生成模块，用于选择对创建的某项目应用环境进行打包，自动生成打包命令；

打包命令执行模块，依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；

存储模块，用于拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

前端项目部署模块，用于点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

有益效果

本发明的用于多环境共用的前端项目打包方法及装置，可应用到任何前端项目，而与某个具体前端项目无关，并通过标准规范化的统一定义、赋值、执行打包的方式，保证整个前端项目的全部模块可以重复使用，并也能保证指定某模块在不同环境下呈现不同功能，提升了前端项目在不同项目环境中部署上线的交付能力，极大地提高了打包并部署前端项目的效率。

附图说明

为了更清楚地说明本发明的技术方案，下面将对技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。

图1为本发明的用于多环境共用的前端项目打包方法的流程图。

具体实施方式

下面将结合本发明的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。

如图1所示，本发明的用于多环境共用的前端项目打包方法，包括如下步骤：

选择前端项目，即输入前端项目的git源代码地址，从该git仓库下载该前端项目；

具体的，选择名称为 bluesky-scms-web的前端项目，该前端项目用于交付公共信用信息平台的前端应用，输入git源代码地址，从该git仓库下载该前端项目。

定义该前端项目的变量名称，变量名称分为公共变量和自定义业务变量名称，公共变量名称为默认变量，如：系统名称、系统LOGO、接口URL前缀、系统技术支持公司、项目上下文等，公共变量名称不可进行编辑，自定义业务变量名称根据各项目业务场景进行自定义添加，如：系统登录形式、页面主题样式、是否拥有某模块，某业务流程是否需要初审终审等；

具体的，定义前端项目bluesky-scms-web的变量名称：

公共变量名称：

业务变量名称：

。

创建某项目应用环境，输入项目名称及项目KEY，如项目名称为示例项目，项目KEY为demo。

获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值，如系统名称填写为某信息化平台。

保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，文件名可为.evn.项目KEY，如.env.demo，这样变量信息就写入到.env.demo环境配置文件中，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹，如demo文件夹。

具体的，将前端项目bluesky-scms-web交付部署于xx市智慧信用平台项目，创建xx市智慧信用平台环境，KEY为hzzl，然后获取需要配置的变量名称，填写如下具体值：

公共变量名称：

业务变量名称：

。

保存后创建.env.hzzl文件，并将变量信息写入。同时将"hzzl"打包脚本注册到项目的package.json文件的scripts配置项中，然后该项目下创建hzzl文件夹作为存储部署包的文件夹。

选择对创建的某项目应用环境进行打包，如选择示例项目，点击打包按钮，根据选择项目的项目KEY，自动生成打包命令，命令包括：基于npm构建项目命令、基于npm的打包项目命令、备份上次部署包和拷贝部署文件命令。

依次执行生成的打包命令：基于npm构建项目命令，运行npm install函数进行安装项目依赖包来编译构建项目；基于npm的打包项目命令，基于npm和webpack，运行npm rundemo函数，读取.env.demo环境配置文件定义的变量信息，加载到该项目中，运行vue-cli-service build函数命令，将项目打包生成可运行的前端静态页面文件夹部署包。

打包后，先通过list函数检查存储部署包的文件夹是否存在上次打包存储的部署包，存在则先执行mv命令来备份上次文件夹部署包到备份文件夹，不存在则直接执行cp拷贝部署文件命令，拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

全部命令执行成功后，点击下载部署包，即可从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

具体的：选择xx市智慧信用平台环境进行打包，读取其KEY为hzzl，然后运行npminstall函数进行安装项目依赖包来编译构建项目，构建完成后再运行npm run hzzl命令，该命令先会加载.env.hzzl文件的变量信息到项目中，最后运行vue-cli-service build函数命令，将变量名称的值替换到前端应用的每个前端页面和前端JS，最终将项目打包生成可运行的前端静态页面文件夹部署包。最后下载部署包，把部署包拷贝到xx市智慧信用平台部署的真实服务器环境中，即可上线交付项目。

本发明的用于多环境共用的前端项目打包装置，包括如下模块：

前端项目选择模块，用于选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；

变量名称定义模块，用于定义该前端项目的变量名称；

项目应用环境创建模块，用于创建某项目应用环境，输入项目名称及项目KEY；

变量值设定模块，用于获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；

文件夹创建模块，用于保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；

打包命令生成模块，用于选择对创建的某项目应用环境进行打包，自动生成打包命令；

打包命令执行模块，依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；

存储模块，用于拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

前端项目部署模块，用于点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

Claims (7)

1.一种用于多环境共用的前端项目打包方法，其特征在于包括如下步骤：

步骤一、选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；

步骤二、定义该前端项目的变量名称；

步骤三、创建某项目应用环境，输入项目名称及项目KEY；

步骤四、获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；

步骤五、保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；

步骤六、选择对创建的某项目应用环境进行打包，自动生成打包命令；

步骤七、依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；

步骤八、拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

步骤九、点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

2.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤二中，所述变量名称分为公共变量和自定义业务变量名称，公共变量名称为不可编辑的默认变量，自定义业务变量名称根据各项目业务场景进行自定义添加。

3.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤五中，所述变量信息写入到环境配置文件中。

4.根据权利要求1所述的用于多环境共用的前端项目打包方法，其特征在于：步骤六中，所述打包命令包括：基于npm构建项目命令、基于npm的打包项目命令、备份上次部署包和拷贝部署文件命令。

5.根据权利要求4所述的用于多环境共用的前端项目打包方法，其特征在于：执行所述基于npm构建项目命令，运行npm install函数进行安装项目依赖包来编译构建项目；执行所述基于npm的打包项目命令，基于npm和webpack，运行npm run demo函数，读取环境配置文件定义的变量信息，加载到该项目中，运行vue-cli-service build函数命令，将项目打包生成可运行的前端静态页面文件夹部署包。

6.根据权利要求4所述的用于多环境共用的前端项目打包方法，其特征在于：执行备份上次部署包和拷贝部署文件命令，先通过list函数检查存储部署包的文件夹是否存在上次打包存储的部署包，存在则先执行mv命令来备份上次文件夹部署包到备份文件夹，不存在则直接执行cp拷贝部署文件命令。

7.一种用于多环境共用的前端项目打包装置，其特征在于包括如下模块：

前端项目选择模块，用于选择前端项目，输入该前端项目的git源代码地址，从git仓库下载该前端项目；

变量名称定义模块，用于定义该前端项目的变量名称；

项目应用环境创建模块，用于创建某项目应用环境，输入项目名称及项目KEY；

变量值设定模块，用于获取并展示该前端项目配置定义的变量名称，填写当前项目应用环境对应的每个变量名称的具体值；

文件夹创建模块，用于保存填写的该项目应用环境的项目名称和变量信息，在项目根目录下会创建该项目应用环境的环境配置文件，同时将该项目应用环境打包脚本注册到前端项目的package.json文件的scripts配置项中，然后创建以该项目应用环境的项目KEY命名的存储部署包的文件夹；

打包命令生成模块，用于选择对创建的某项目应用环境进行打包，自动生成打包命令；

打包命令执行模块，依次执行生成的打包命令，将项目打包生成可运行的前端静态页面文件夹部署包；

存储模块，用于拷贝打包生成的前端静态页面文件夹部署包到当前选择的项目应用环境的部署包文件夹下存储；

前端项目部署模块，用于点击下载部署包，从项目应用环境的部署包文件夹下载该前端项目环境的部署包，将该前端项目部署到对应真实环境中。

Images