CN106293827A - 一种通过配置文件来控制web前端发布的方法与系统 - Google Patents

Abstract

本发明涉及一种通过配置文件来控制web前端发布的方法与系统，包括：配置开发环境、编写项目源代码和配置文件并进行特定处理步骤处理得到待发布文件;采用EJS模板技术将待发布文件转换成EJS文件并将其固定文件最终路径更换成可配置变量，并编写实现代码;通过webpack读取配置变量的实现代码来读取文件路径变量，并读取设置文件最终路径的配置文件;通过EJS解析技术解析待发布EJS文件，按照配置文件设置的文件最终路径发布文件。本发明将web前端发布系统中的处理源码环节中待发布文件的固定路径修改成可配置的变量，使web前端发布过程中文件路径可配置，只需要修改对应的配置文件即可批量设置文件路径，显著缩短了跨平台web前端发布的时间。

Description

一种通过配置文件来控制web前端发布的方法与系统

技术领域

本发明涉及一种通过配置文件来控制web前端发布的方法与系统，尤其涉及一种互联网开发技术，web前端技术领域的方法与系统。

背景技术

现在前端开发部署环境的相关技术有很多，比如： grunt，gulp， webpack等等。目前互联网行业前端领域用以上三种的最多，目前使用这三种技术开发出来的前端部署环境基本固定的步骤：编写源代码并调试开发环境，生成html格式文件并在文件内部设置相对路径或者固定的cnd路径，接着对源文件进行编译、校验、压缩的操作形成待发布文件，最后选择目标发布平台进行web前端发布。

采用该方式发布需要将文件的最终发布路径固定在源文件内，即，一旦文件形成并经过后续处理步骤形成待发布文件后，该文件的路径就无法在被改变，而目前的发布平台很多，各个平台对文件路径设置的要求也不一样。如云主机，在云端发布，文件路径多用cdn路径；企业机房的服务器，在本地发布；独立网络环境无法与公网相通，则本地文件路径。这种固定地址格式设置同时在多个平台发布产品或者从一个平台换到另一个平台发布的情况带了很大的困扰，通常需要重新修改源代码，生成新的发布文件，极为不便。

发明内容

针对目前web前端发布中存在的上述问题，本发明一种通过配置文件来控制web前端发布的方法与系统，提出一种通过配置文件来设置文件地址的方式来适配不同发布平台的方法与系统。采用本发明可以实现在不同的发布环境无需修改源代码文件中的固定路径而只需修改对应的配置文件即可批量设置文件路径，大大减少了不同发布环境带来的代码修改工作，有效提高了开发效率并显著缩短跨平台web前端发布的时间。

本发明解决其技术问题所采用的技术方案包括以下步骤：

项目开发步骤，配置调试开发环境nodejs，并在所述开发环境上编写代码文件和路径配置文件并对所述文件编译、调试、修改和校验形成最终代码文件和路径配置文件。

优选的，所述项目开发步骤中，所述配置文件根据发布平台的差异包括Saas配置文件、独立服务器配置文件和开发环境配置文件。

优选的，所述项目开发步骤中，所述配置文件根据发布要求，可以是一个或者多个，以满足在不同发布平台发布的需求。

项目部署步骤，对源代码文件进行资源重组和整合得到待发布文件。

Webpack处理源码步骤，将待发布文件转换成EJS文件，并将文件路径替换成变量代码。

优选的，所述Webpack处理源码步骤，包括采用EJS模板技术将源代码转换成EJS文件、设置路径配置变量和替换源文件中的固定文件路径。

优选的，所述替换源文件中的固定文件路径需要编写代码来实现所述替换过程，所述Webpack处理源码步骤中，所述代码将在发布过程中引导解析器利用webpack技术查找指定的配置文件，读取配置文件中的最终路径来替换所述路径变量值。

web前端发布步骤，读取EJS文件，并按照路径变量代码加载指定配置文件，获得文件最终路径，形成发布文件。

优选的，所述web前端发布步骤中，读取EJS文件是指采用EJS解析器，解析所述待发布文件转换形成的EJS文件。

优选的，所述web前端发布步骤中，所述解析所述待发布文件转换形成的EJS文件过程需要读取读取路径配置代码，根据路径配置代码加载指定的配置文件，根据所述配置文件将待发布文件中的路径变量替换成最终路径值，从而生成可发布的html文件。

本发明还公开了一种通过配置文件来控制web前端发布的系统，该系统包括以下子系统：

项目开发子系统，用于提供代码开发环境，并提供对项目代码源文件和配置文件的编译、调试、校验等功能。

项目部署子系统，用于对项目代码源文件和配置文件进行资源整合和重组。

Webpack处理源码子系统，采用EJS模板技术将项目代码源文件转换成EJS文件，并提供对所述EJS文件进行固定路径替换功能。

优选的，所述Webpack处理源码子系统中，所述固定路径替换是指将所述EJS文件中的固定路径替换成路径变量，并编写代码实现该替换过程。

web前端发布子系统，用于将待发布文件中的路径变量替换成最终发布路径，形成最终发布文件。

优选的，所述web前端发布子系统中，所述替换成最终发布路径包括，所述子系统通过解析所述EJS文件，并加载对应的路径配置文件替换所述EJS文件中的路径变量，形成最终发布文件。

优选的，所述web前端发布子系统中，所述加载对应的路径配置文件，是指通过解析路径变量代码来确定选择的配置文件。

优选的，所述web前端发布子系统中，所述替换所述EJS文件中的路径变量，包括解析所述配置文件，根据所述路径变量代码获取文件最终路径，并采用该路径替换所述EJS文件中的路径变量代码，形成最终可发布文件。

采用上述技术方案，本发明具有以下优点：

本发明涉及一种通过配置文件来控制web前端发布的方法，通过配置开发环境、编写项目源代码和配置文件并进行特定处理步骤处理得到待发布文件，然后采用EJS模板技术将待发布文件转换成EJS文件并将所述固定文件最终路径更换成可配置变量，编写可配置变量的实现代码，进一步通过webpack读取配置变量的实现代码来读取文件路径变量，并读取设置文件最终路径的配置文件最后通过EJS解析技术解析待发布EJS文件，按照配置文件设置的文件最终路径发布文件。采用将web前端发布系统中的处理源码环节中待发布文件的固定路径修改成可配置变量的方式，并编写特定配置代码，使web前端发布过程中文件最终路径可配置，通过读取特定的配置文件，可实现对文件最终路径的获取，形成最终可发布文件，不同的发布环境无需修改源代码文件中的固定路径而只需修改对应的配置文件即可批量设置文件路径，大大减少了不同发布环境带来的代码修改工作，有效提高了开发效率并显著缩短了跨平台web前端发布的时间。

附图说明

图1为本发明较佳实施方式的通过配置文件来控制web前端发布的方法与系统的示意图。

图2为本发明较佳实施方式的通过配置文件来控制web前端发布的方法与系统的系统结构图。

图3为本发明较佳实施方式的通过配置文件来控制web前端发布的方法与系统的详细步骤流程图。

具体实施方式

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

本发明公开了通过配置文件来控制web前端发布的方法，参见图1所示，该方法包括：

步骤S101：配置开发环境、编写项目源代码和配置文件并进行特定处理步骤处理得到待发布文件;

步骤S102：采用EJS模板技术将待发布文件转换成EJS文件并将所述固定文件最终路径更换成可配置变量，并编写实现代码;

步骤S103：通过webpack读取配置变量的实现代码来读取文件路径变量，并读取设置文件最终路径的配置文件;

步骤S104：通过EJS解析技术解析待发布EJS文件，按照配置文件设置的文件最终路径发布文件。

本实施例中，本发明涉及一种通过配置文件来控制web前端发布的方法，所述方法通过配置开发环境、编写项目源代码和路径设置的配置文件并通过检验、压缩、合并等处理步骤得到待发布文件，利用EJS模板技术将待发布文件转换成EJS文件并将所述文件固定最终路径更换成可配置变量，编写所述可配置变量实现代码，通过webpack读取所述配置变量的实现代码来读取文件路径变量，并读取设置文件最终路径的配置文件最后通过EJS解析技术解析待发布EJS文件，按照配置文件设置的文件最终路径发布文件。

可见，在本实施例中采用将web前端发布系统中的处理源码环节中待发布文件的固定路径修改成可配置变量的方式，并编写特定配置代码，使web前端发布过程中文件最终路径可配置，通过读取特定的配置文件，可实现对文件最终路径的获取，形成最终可发布文件，不同的发布环境无需修改源代码文件中的固定路径而只需修改对应的配置文件即可批量设置文件路径，大大减少了不同发布环境带来的代码修改工作，有效提高了开发效率并显著缩短了跨平台web前端发布的时间。

本发明实施例公开了一种通过配置文件来控制web前端发布的系统，参见图2、3，相对上一实施例，本实施例对技术方案作了进一步的说明和优化。具体的，本实施例中通过配置文件来控制web前端发布的系统包含以下子系统：

S20：项目开发子系统。

优选的，通过对开发环境nodejs的调试配置，并在所述平台上完成代码编辑工作，经过编译、校验等处理步骤后得到待发布html格式产品文件。

优选的，除源代码编写外，还需完成步骤S201对路径配置文件进行编写和调试，所述文件编写要求满足指定的发布平台对发布文件提出的路径设置要求。

优选的，根据不同的发布平台，需要编写不同的配置文件，所述待发布html格式文件可以有一个或者多个配置文件，实现在一个或者多个平台上进行web前端发布。

S21：项目部署子系统。

优选的，对所述html文件按照发布平台已经项目属性的要求进行压缩、校验、合并等处理步骤得到待发布文件。

S22：Webpack处理源码子系统。

优选的，通过EJS模板技术，对所述待发布文件进行模板化处理得到EJS文件S221，接着执行步骤S222编写路径变量的配置代码，通过webpack技术执行步骤S223查找并读取所述EJS文件S221中的文件固定路径，将所述固定路径替换成S222步骤中的路径变量配置代码。

优选的，S222中针对应用要求不同，需要编写一个或者多个路径变量配置代码，实现引导解析器对一个或多个S201中所述的配置文件读取。

S23：前端发布子系统。

优选的，通过EJS解析技术，解析EJS文件S221，读取并解析S222中所述的路径变量设置代码，根据所述代码要求，读取S201中所述配置文件，通过解析所述配置文件，获取文件最终路径，并用所述路径值替换S222中所述的路径变量设置代码形成发布文件，发布到指定平台。

优选的，根据发布要求的不同，需要读取一个或者多个所述配置文件，实现在指定平台或者跨平台同时发布。

综上所述，通过配置、调试开发环境，实现在所述环境上代码源文件和设置文件路径的配置文件编写，对代码源文件及配置文件进行校验、编译等操作得到html格式产品文件和最终配置文件，对代码源文件进行合并、校验、压缩的步骤得到待发布源文件，接着采用EJS模板技术，将待发布源文件转化成EJS文件，查找并读取文件固定路径值，通过编写路径变量设置代码来替换所述固定路径值完成对源代码的处理工作，在web前端发布过程中采用EJS解析器解析所述EJS文件，并根据所述路径变量设置代码加载指定配置文件，解析并读取配置文件中的最终文件路径，采用所述路径替换所述路径变量设置代码得到发布文件，实现在指定平台上的web前端发布。相比传统web前端发布，本实施例采用将web前端发布系统中的处理源码环节中待发布文件的固定路径修改成可配置变量的方式，并编写特定配置代码，使web前端发布过程中文件最终路径可配置，通过读取特定的配置文件，可实现对文件最终路径的获取，形成最终可发布文件，不同的发布环境无需修改源代码文件中的固定路径而只需修改对应的配置文件即可批量设置文件路径，大大减少了不同发布环境带来的代码修改工作，有效提高了开发效率并显著缩短了跨平台web前端发布的时间。

以上所述仅为举例性，而非为限制性。本领域的技术人员可以对发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包括这些改动和变型在内。

Claims (10)

1.一种通过配置文件来控制web前端发布的方法，其特征在于，该

方法包含以下步骤：

项目开发步骤，配置调试开发环境nodejs，并在所述开发环境上编写代码文件和路径配置文件并对所述文件编译、调试、修改和校验形成最终代码文件和路径配置文件；

项目部署步骤，对源代码文件进行资源重组和整合得到待发布文件；

Webpack处理源码步骤，将待发布文件转换成EJS文件，并将文件路径替换成变量代码；

web前端发布步骤，读取EJS文件，并按照路径变量代码加载指定配置文件，获得文件最终路径，形成发布文件。

2.如权利要求1所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述项目开发步骤中，所述配置文件根据发布平台的差异包括Saas配置文件、独立服务器配置文件和开发环境配置文件。

3.如权利要求1所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述项目开发步骤中，所述配置文件根据发布要求，可以是一个或者多个，以满足在不同发布平台发布的需求。

4.如权利要求1所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述Webpack处理源码步骤，包括采用EJS模板技术将源代码转换成EJS文件、设置路径配置变量和替换源文件中的固定文件路径。

5.如权利要求4所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述Webpack处理源码步骤中，所述替换源文件中的固定文件路径需要编写代码来实现所述替换过程，所述代码将在发布过程中引导解析器利用webpack技术查找指定的配置文件，读取配置文件中的最终路径来替换所述路径变量值。

6.如权利要求1所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述web前端发布步骤中，读取EJS文件是指采用EJS解析器，解析所述待发布文件转换形成的EJS文件。

7.如权利要求6所述的一种通过配置文件来控制web前端发布的方法，其特征在于，所述web前端发布步骤中，所述解析所述待发布文件转换形成的EJS文件过程需要读取读取路径配置代码，根据路径配置代码加载指定的配置文件，根据所述配置文件将待发布文件中的路径变量替换成最终路径值，从而生成可发布的html文件。

8.一种通过配置文件来控制web前端发布的系统，其特征在于，所述系统包含以下子系统：

项目开发子系统，用于提供代码开发环境，并提供对项目代码源文件和配置文件的编译、调试、校验等功能；

项目部署子系统，用于对项目代码源文件和配置文件进行资源整合和重组；

Webpack处理源码子系统，采用EJS模板技术将项目代码源文件转换成EJS文件，并提供对所述EJS文件进行固定路径替换功能；

web前端发布子系统，用于将待发布文件中的路径变量替换成最终发布路径，形成最终发布文件。

9.如权利要求8所述的一种通过配置文件来控制web前端发布的系统，其特征在于，所述Webpack处理源码子系统中，所述固定路径替换是指将所述EJS文件中的固定路径替换成路径变量，并编写代码实现该替换过程。

10.如权利要求8所述的一种通过配置文件来控制web前端发布的系统，其特征在于，所述web前端发布子系统中，所述替换成最终发布路径包括，所述子系统通过解析所述EJS文件，并解析文件中的路径变量代码来自动加载对应的路径配置文件，通过解析路径配置文件获取文件最终路径，采用该路径替换所述EJS文件中的路径变量，形成最终发布文件。