CN111680253B

CN111680253B - 页面应用数据包生成方法、装置、计算机设备及存储介质

Info

Publication number: CN111680253B
Application number: CN202010512301.8A
Authority: CN
Inventors: 许晓钦; 彭杰; 石迎春
Original assignee: Nanjing Leading Technology Co Ltd
Current assignee: Nanjing Leading Technology Co Ltd
Priority date: 2020-06-08
Filing date: 2020-06-08
Publication date: 2022-06-28
Anticipated expiration: 2040-06-08
Also published as: CN111680253A

Abstract

本发明实施例公开了一种页面应用数据包生成方法、装置、计算机设备及存储介质。所述方法包括：获取页面类型，其中，所述页面类型包括多页类型或者单页类型；获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配；根据所述配置数据，生成页面应用数据包。本发明实施例可以快速生成单页应用或多页应用，提高页面应用的生成效率。

Description

页面应用数据包生成方法、装置、计算机设备及存储介质

技术领域

本发明实施例涉及网络领域，尤其涉及一种页面应用数据包生成方法、装置、计算机设备及存储介质。

背景技术

单页应用(Single Page Web Application，SPA)是指只有一个主页面的应用程序，可以通过加载单个超文本标记语言(Hyper Text Markup Language，HTML)页面并在用户与应用程序交互时动态更新该页面。所有的内容都包含在主页面，页面跳转仅刷新局部网页资源，公共资源(层叠样式表和脚本语言(JavaScript)等)仅需加载一次，常用于网站。而多页应用(Multiple Page Web Application，MPA)包括很多个HTML文件，每个页面必须重复加载公共资源等。多页应用跳转，需要整页资源刷新，常用于应用程序或客户端等。

实际上，不同应用场景适用于不同类型的应用。目前，现有方法只能生成多页应用或只能生成单页应用。如果需要生成不同页面类型的页面应用，需要开发多个前端工程项目，导致页面应用的生成效率低。

发明内容

本发明实施例提供一种页面应用数据包生成方法、装置、计算机设备及存储介质，可以快速生成单页应用或多页应用，提高页面应用的生成效率。

第一方面，本发明实施例提供了一种页面应用数据包生成方法，包括：

获取页面类型，其中，所述页面类型包括多页类型或者单页类型；

获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配；

根据所述配置数据，生成页面应用数据包。

第二方面，本发明实施例还提供了一种页面应用数据包生成装置，包括：

页面类型获取模块，用于获取页面类型，其中，所述页面类型包括多页类型或者单页类型；

配置数据获取模块，用于获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配；

页面应用数据包生成模块，用于根据所述配置数据，生成页面应用数据包。

第三方面，本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序所述处理器执行所述程序时实现如本发明实施例中任一所述的页面应用数据包生成方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的页面应用数据包生成方法。

本发明实施例通过根据页面类型，选择匹配的配置数据，生成页面应用数据包，可以选择生成单页应用或者多页应用，解决了现有技术中一个前端工程项目只能生成一类页面应用的问题，可以在一个前端工程项目中实现生成单页应用或多页应用，减少页面应用开发的重复性工作，可以提高页面应用的生成效率。

附图说明

图1是本发明实施例一中的一种页面应用数据包生成方法的流程图；

图2a是本发明实施例二中的一种页面应用数据包生成方法的流程图；

图2b是本发明实施例所适用的一种页面应用项目目录结构的示意图；

图2c是本发明实施例所适用的一种页面应用项目目录结构的示意图；

图2d是本发明实施例所适用的一种页面应用数据包生成应用场景的示意图；

图3是本发明实施例三中的一种页面应用数据包生成装置的结构示意图；

图4是本发明实施例四中的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一中的一种页面应用数据包生成方法的流程图的示意图，本实施例可适用于根据需要生成单页应用数据包括或者多页应用数据包的情况，该方法可以由本发明实施例提供的页面应用数据包生成装置来执行，该装置可采用软件和/或硬件的方式实现，并一般可集成计算机设备。如图1所示，本实施例的方法具体包括：

S110，获取页面类型，其中，所述页面类型包括多页类型或者单页类型。

页面类型用于确定生成的页面应用的类型。页面类型可以包括多页类型或单页类型。其中，多页类型用于生成多页应用，单页类型用于生成单页应用。页面应用数据包与页面类型匹配。相应的，页面应用数据包可以包括单页应用数据包或者多页应用数据包。

S120，获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配。

配置数据用于生成页面应用数据包。具体的，配置数据可以是指针对页面应用配置项的输入数据。

目标数量可以是页面入口文件的数量。通常，单页应用包括一个页面入口文件，多页应用包括多个页面入口文件。相应的，单页类型对应的目标数量为一个，多页类型对应的目标数量为多个。

S130，根据所述配置数据，生成页面应用数据包。

页面应用数据包可以用于浏览器渲染页面，并显示；或者页面应用数据包可以安装在电子设备中，生成客户端并显示。页面应用数据包可以包括第三方程序依赖文件、工程代码依赖文件和业务代码依赖文件。

具体的，可以通过脚手架结合模块打包程序，实现根据配置数据，生成页面应用数据包。其中，脚手架用于开发应用程序代码，具体的，脚手架可以是预先搭建的应用程序的框架，可以将脚手架理解为各应用程序中重复性的代码抽离出来的代码。通过脚手架可以减少开发应用程序的重复性开发工作。模块打包程序用于将脚本语言(如JavaScript)文件打包在一起，打包后的文件用于在浏览器中使用。

可选的，所述页面类型为单页类型，所述页面入口文件的数量为一个；所述根据所述配置数据，生成页面应用数据包，包括：根据所述配置数据，获取一个页面入口文件；根据所述页面入口文件，生成单页应用数据包。

页面入口文件用于指向页面应用数据包关联的其他文件，即页面入口文件中指定单页应用依赖的全部数据，或者指定多页应用中匹配的页面依赖的全部数据。针对单页应用，仅需要配置一个页面入口文件。

获取页面应用数据包中的依赖关系，是从页面入口文件开始解析。可以从该页面入口文件开始，构建单页应用的依赖关系，形成单页应用数据包。

而针对多页应用，各页面是相互独立的，每个页面需要一个页面入口文件。

可选的，所述页面类型为多页类型，所述页面入口文件的数量为至少两个；所述根据所述配置数据，生成页面应用数据包，包括：根据所述配置数据，获取多个页面入口文件；根据各所述页面入口文件，生成多页应用数据包。

在多页应用打包的应用场景中，需要在配置数据中指定多个页面入口文件，可以分别从多个页面入口文件开始，构建多页应用的依赖关系，形成多页应用的数据包。

具体的，可以通过遍历目录结构下的所有页面入口文件，然后将页面入口文件对应的名称作为该页面的入口标识信息。其中，可以通过glob模块查询多页应用关联的全部页面入口文件。

通过根据页面类型，获取与页面类型匹配的目标数量个页面入口文件，并基于页面入口文件，对页面应用关联的数据进行打包，可以准确区分单页应用和多页应用的数据，在同一个前端工程中实现单页应用或者多页应用的打包，提高页面应用的打包效率。

可以预设页面入口文件模板，页面入口文件模板包括默认的页面应用的配置数据，例如，包括页面应用依赖的组件。用户在页面入口文件模板中可配置区域中输入信息，以添加或者删除页面应用依赖的组件，从而实现配置页面依赖的组件，形成自定义的页面入口文件。同时用户可以将自定义的页面入口文件存放在指定位置处，例如，存入指定文件夹中。并在后续运行页面入口文件时，用户输入页面入口文件的文件名称(title)，以实现脚手架根据文件名称查询到页面入口文件，并获取页面入口文件中的内容。

通过脚手架，可以灵活配置页面应用的内容。具体的，可配置项的内容即为配置数据。通常在脚手架中，用户可以输入的配置数据包括目录结构、基本配置项、扩展配置项和运行打包指令等内容。

可选的，所述配置数据包括依赖包版本号、依赖包锁定版本号、打包运行配置数据、层叠样式表配置数据、编译器版本及编译配置数据、语言校验配置数据和业务代码配置数据；与所述多页类型匹配的配置数据包括：多个标题配置信息。

具体的，依赖包版本号、依赖包锁定版本号、打包运行配置数据、层叠样式表配置数据、编译器版本及编译配置数据、语言校验配置数据和业务代码配置数据等配置数据均在目录结构中以文件形式进行存储。

目标结构中的包文件用于存储依赖包版本号，即前端工程的依赖包对应的版本号。

目标结构中的锁包文件用于存储依赖包锁定版本号，即前端工程的依赖包对应的锁定版本号。

目标结构中的Vue配置文件用于存储打包运行配置数据，打包运行配置数据可以是指针对Vue语言生成的配置项，可以包括打包时的配置项和运行时的配置项。

目标结构中的PostCss配置文件用于存储层叠样式表(Cascading Style Sheets，CSS)配置数据，CSS配置数据可以是指针对不同浏览器的CSS的配置项，例如针对不同的浏览器加入不同的前缀，或者针对不同的手机尺寸，生成不同的字体大小等。

目标结构中的Babel配置文件用于存储编译器版本及编译配置数据，编译器版本及编译配置数据可以是指根据编译应用的高阶语言时，需要配置的编译器版本和相对应的编译器配置项。

目标结构中的Eslint配置文件用于存储语言校验配置数据，语言校验配置数据可以是指针对JS语言和/或Vue语言等脚本语言，执行的语法、格式和风格等的校验操作和处理操作。

目标结构中的SRC文件夹用于存储业务代码配置数据，业务代码配置数据可以是指单页应用或多页应用的业务代码，可以包括页面代码、工具库代码、配置项代码、组件代码、样式代码、存储代码、应用程序编程接口(Application Programming Interface，API)代码、过滤器代码、指令代码等代码。

针对多页应用，目录结构还包括Title文件，用于存储标题配置信息，通常针对每个页面都会配置一个标题配置信息，多页应用包括至少两个页面，相应的，匹配的标题配置信息的数量为至少两个。具体配置代码内容如下所示：

三个页面标题分别为：组织、测试和用户。

通过设置多个配置数据，并根据配置数据生成页面应用数据包，可以实现灵活配置页面应用。

可选的，所述配置数据包括复用配置数据；与所述单页类型匹配的复用配置数据包括下述至少一项：路由配置数据、存储配置数据、工具配置数据、组件配置数据、指令配置数据和过滤器配置数据；与所述多页类型匹配的配置数据包括：工具配置数据、组件配置数据、指令配置数据和过滤器配置数据。

具体的，不同的页面应用可以复用基本配置数据。

例如，不同单页应用可以复用路由、存储、工具、组件、指令和过滤器等。相应的，模块打包程序可以获取前述通用的配置数据，添加到单页应用关联的依赖关系，最终形成单页应用数据包。相应的，单页应用匹配的单页类型对应的通用配置数据可以包括：路由配置数据、存储配置数据、工具配置数据、组件配置数据、指令配置数据和过滤器配置数据等。

不同多页应用可以复用工具、组件、指令和过滤器等。相应的，模块打包程序可以获取前述通用的配置数据，添加到多页应用关联的依赖关系，最终形成多页应用数据包。相应的，多页应用匹配的多页类型对应的通用配置数据可以包括：工具配置数据、组件配置数据、指令配置数据和过滤器配置数据。

其中，路由配置数据用于配置可切换的至少一个路径。

存储配置数据用于配置存储位置等。

工具配置数据用于配置页面应用中的函数等。

组件配置数据用于配置页面应用中的组件。

指令配置数据用于配置页面应用中可响应的指令。

过滤器配置数据用于配置过滤条件，以筛选出需要的数据。

通过复用配置数据，可以减少页面应用的重复性开发工作，提高页面应用的开发效率。

可选的，在生成页面应用数据包之后，还包括：在接收到与所述页面类型匹配的运行指令时，通过浏览器加载所述页面应用数据包，渲染形成网页。

运行指令用于将页面应用数据包加载到内存中并运行，具体可以用于对页面应用数据包的代码进行调试等。页面应用数据包可以包括网页资源数据，网页资源数据用于通过浏览器解析和渲染，形成网页并显示。

具体的，网页资源数据可以包括超文本标记语言(Hyper Text Markup Language，HTML)文件、层叠样式表(Cascading Style Sheets，CSS)和脚本语言(JavaScript)代码。其中，HTML文件是网页内容的载体，通常是由标签组成。CSS用于描述网页元素的样式和布局，例如标题元素的字体、颜色、尺寸和标题背景图像等，其中，CSS可以包括独立的文件和/或嵌入在HTML文件中的代码。JavaScript代码用于实现用户与网页的动态交互操作，例如，鼠标点击配置项图标，配置项图标弹出下拉菜单等。

其中，网页渲染过程可以是：对HTML文件进行解析，生成文档对象模型树(Document Object Model Tree，DOM Tree)；对CSS进行解析，生成CSS对象模型树(CSSObject Model Tree，CSSOM Tree)，其中，DOM Tree的结构与CSSOM Tree的结构对应；根据DOM Tree的结构与CSSOM Tree的结构的对应关系，对DOM Tree和CSSOM Tree进行合成，形成渲染树；计算渲染树中各节点的布局信息；根据渲染树中各节点的布局信息，对渲染树中各节点进行绘制，生成至少一个图层，各图层用于按照设定顺序合成，生成图像，在浏览器窗口中进行显示，形成一个完整的网页效果。

脚本语言代码在执行过程中可以通过DOM应用程序编程接口(ApplicationProgramming Interface，API)对DOM Tree进行操作，以及通过CSSOM API对CSSOM Tree进行操作，操作可以包括添加、删除和修改等操作。此外脚本语言文件还可以对网页中生成的事件进行响应。

通过运行指令可以快速运行页面应用数据包，可以实现快速对页面应用程序进行测试。

实施例二

图2a为本发明实施例二中的一种页面应用数据包生成方法的流程图，本实施例以上述实施例为基础进行具体化，具体将所述模块打包程序具体化为Webpack程序。

S210，获取页面类型，其中，所述页面类型包括多页类型或者单页类型。

本实施方式中未详细描述的内容，可以参考上述任意实施方式中的描述。

S220，获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配。

具体的，配置数据可以是代码文件。在代码文件中，与不同页面类型匹配的代码不同。可以根据页面类型，执行不同代码，以在目录结构中确定匹配的文件夹，不同文件夹匹配的页面类型不同。遍历与页面类型匹配的文件夹，可以获取与页面类型匹配的页面入口文件。

S230，通过模块打包程序，根据所述配置数据，生成页面应用数据包，所述模块打包程序包括Webpack程序。

模块打包程序用于生成页面应用数据包，具体是用于将页面应用关联的数据进行打包。通常模块打包程序处理应用程序时，会从入口文件开始递归地构建依赖关系图，其中包括应用程序需要的每个模块，然后将所有这些模块打包成一个或者多个文件包，具体可以是Bundle文件。

Webpack程序用于分析目录结构，找到js模块(包括浏览器不能直接识别的代码，typescrip或tsass等)，打包成合适的格式供浏览器访问。

通常模块打包程序获取页面应用数据包中的依赖关系，是从页面入口文件开始解析。

具体的，本发明实施例中的页面应用数据包生成方法可以应用在基于脚手架结合Webpack程序搭建的工程项目中。本发明实施例的应用于软件(Node)包的管理系统(NodePackage Manager，NPM)的应用场景中。其中，NPM是一种Node.js默认的、以JavaScript编写的软件包管理系统。

具体的，可以使用脚手架Vue-cli搭建前端工程项目，生成目录结构。其中，目录结构中包括src文件夹和tips文件夹。其中，src文件夹用于存储打包前的数据，tips文件夹用于存储打包后形成的页面应用数据包，即打包完成后，页面应用程序数据默认输出至目录结构项目中的tips文件中。在项目初始化之后，自动创建package.json文件，用于描述项目内容以及配置项目可执行命令。可以在目录结构中自定义或者自动生成index.js和main.js入口文件。

此外，目录结构还可以包括其他内容，具体可以如图2b-2c所示。

其中，如图2b所示，目录结构可以包括Npm配置文件(.npmrc)、Npm锁包依赖(package-lock.json)、Vue配置文件(vue.config.js)、多页应用标题映射文件(.huskyrc)、单元测试(.lintstagedrc)、Babel转义配置项(babel.config.js)、Css插件(postcss.config.js)、应用静态资源(public)、应用打包生成文件(package.json)、源代码文件夹(src)和测试文件夹等(tests)。具体的，如图2c所示，源代码文件夹(src)具体可以包括：应用程序(API)、静态资源(commonPages)、组件(components)、配置文件(config)、指令(directives)、过滤器(filters)、混入(mixins)、路由(pages)、缓存(store)和页面(styles)等。其中，路由(pages)还可以包括多页应用(multiple)和单页应用(spa)。

用户可以通过配置一个config.js的配置文件，即本发明实施例中所述的配置数据。通过Webpack程序执行config.js的配置文件，对页面应用程序数据进行打包。

具体的，该config.js的配置文件中配置有页面入口文件。用户可以将页面入口文件添加到指定目录中，通过Webpack程序执行config.js的配置文件，自动获取一个页面入口文件，并从该页面入口文件开始，生成单页应用数据包；或者通过Webpack程序执行config.js的配置文件，调用glob函数，查询目录结构下包括的全部页面入口文件，并从各所述页面入口文件开始，形成多页应用数据包。

具体的，config.js的配置文件的页面入口文件获取代码如下所示：

其中，SPA为页面类型参数，是全局变量。如果页面类型参数为'0'，则确定页面类型为多页类型。如果页面类型参数为'1'，则确定页面类型为单页类型。其中，entry指的是编译时入口文件。多页类型中，需要通过glob函数查询全部页面入口文件并返回名称，单页类型中，页面入口文件只有一个。outputDir表明输出到哪个文件中，单页类型中，输出到out_spa，多页类型中，输出到out_multiple中。其中，页面入口文件通常命名为main.js，多个页面入口文件分别存放于不同的文件夹中，文件夹的名称不同，文件夹的名称即为页面的title。此外，还可以包括plugins，用于配置插件，例如，采用htmlWebpackPlugin创建html入口文件。具体可以根据需要进行设定，对此，本发明实施例不作具体限制。

同时需要配置变量文件：.env.development_spa文件、.development_multiple文件、.env.production_spa文件和.env.production_multiple，脚手架在利用Webpack进行打包时，可以识别到变量文件里面的全局变量，变量默认会归属于process.env全局对象，该对象可以包含很多自定义的全局变量和内部自带属性。

用户可以在config.js的配置文件输入代码，实现自定义配置，Webpack程序通过执行config.js的配置文件实现用户自定义配置内容。例如，Webpack程序可以指定页面应用的pages属性。示例性的，针对单页应用，pages属性可以为空；针对多页应用，通过插件技术，提供一个完整的对象作为pages。

具体的，Webpack程序可以结合插件和配置的entry文件，再根据指定的平台特性，来编译、转化、打包以及生成复合代码。

其中，target指的是平台，针对不同的平台，Webpack程序可以生成通用平台特性的模块；Webpack程序可以获取插件，并识别出插件的内容，应用在脚手架中。

工程项目可以在package.json文件中配置，是运行页面应用数据包还是仅进行打包操作。具体命令可以如下所示：

其中，multiple指多页应用，spa指单页应用，没有指明多页应用或者单页应用，实际是不区分单页应用或者多页应用，可以对打包的页面应用。development是指开发环境，用于表示本地运行，即前三个指令用于本地运行页面应用数据包，其中，"dev"和"dev_spa"均用于本地运行单页应用数据包。production是指生成环境，用于表示打包成可执行文件，即后三个指令用于生成页面应用数据包即可。页面应用数据包括可以部署到网络上发布，其中，"build"和"build_spa"均用于本地运行单页应用数据包。此外还有其他指令，对此，本发明实施例不作具体限制。

具体的，用户可以将spa和multiple替换为自定义的名称，以使脚手架自动查询到自定义的名称匹配的页面入口文件，从而获取页面应用依赖的各组件，并将依赖的各组件数据和关联的数据，进行打包，形成页面应用数据包，并根据配置的命令判断是否运行或者发布。

具体的，页面应用数据包生成流程可以如图2d所示。通过Vue-li脚手架结合Webpack模块打包程序搭建项目工程。在Webpack中定义变量：页面类型。在软件包管理系统中注册运行命令，存储在指令存储文件(如package.json文件)，从而，脚手架可以执行指令存储文件中与页面类型匹配的运行命令，以实现运行或者打包单页应用数据包或者多页应用数据包。Webpack根据定义的页面类型，执行config.js中匹配的代码部分。具体是，读取变量文件，并针对变量，确定在目录结构中匹配的文件，并进行遍历，获取与页面类型匹配的文件。根据获取到的页面类型匹配的文件，分别相应生成插件，并获取页面入口文件，建立插件之间的依赖关系，生成入口HTML文件，其中，页面入口文件为JS文件，入口HTML文件是用来运行JS文件的页面载体，入口HTML文件提供基础浏览器可以识别的标签和语言，JS文件提供功能，插入到入口HTML文件中，可以实现渲染、布局、解析和运行等。。从页面入口文件开始对页面应用数据进行打包。分别通过产物输出配置，模块分级打包配置，文件压缩、变量替换和别名替换，文件识别以及CSS打包和脚本打包等步骤实现打包。同时，通过运行时和编译时配置、代理和转译源码等步骤实现编译和运行。

本发明实施例通过模块打包程序实现对页面应用进行打包，可以将网页资源数据进行模块化，并置于依赖关系中，形成数据包，可以减少浏览器和服务器的交互次数，提高页面应用的资源数据获取效率，从而提高页面应用的运行速度。

实施例三

图3为本发明实施例三中的一种页面应用数据包生成装置的示意图。实施例三是实现本发明上述实施例提供的页面应用数据包生成方法的相应装置，该装置可采用软件和/或硬件的方式实现，并一般可集成计算机设备中。

页面类型获取模块310，用于获取页面类型，其中，所述页面类型包括多页类型或者单页类型；

配置数据获取模块320，用于获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配；

页面应用数据包生成模块330，用于根据所述配置数据，生成页面应用数据包。

进一步的，所述页面类型为单页类型，所述页面入口文件的数量为一个；所述页面应用数据包生成模块330，包括：单页面入口文件获取单元，用于根据所述配置数据，获取一个页面入口文件；根据所述页面入口文件，生成单页应用数据包。

进一步的，所述页面类型为多页类型，所述页面入口文件的数量为至少两个；所述页面应用数据包生成模块330，包括：多页面入口文件获取单元，用于根据所述配置数据，获取多个页面入口文件；根据各所述页面入口文件，生成多页应用数据包。

进一步的，所述页面应用数据包生成模块330，包括：模块打包程序打包单元，用于通过模块打包程序，根据所述配置数据，生成页面应用数据包，所述模块打包程序包括Webpack程序。

进一步的，所述页面应用数据包生成装置，还包括：本地运行模块，在生成页面应用数据包之后，在接收到与所述页面类型匹配的运行指令时，通过浏览器加载所述页面应用数据包，渲染形成网页。

进一步的，所述配置数据包括依赖包版本号、依赖包锁定版本号、打包运行配置数据、层叠样式表配置数据、编译器版本及编译配置数据、语言校验配置数据和业务代码配置数据；与所述多页类型匹配的配置数据包括：多个标题配置信息。

进一步的，所述配置数据包括复用配置数据；与所述单页类型匹配的复用配置数据包括下述至少一项：路由配置数据、存储配置数据、工具配置数据、组件配置数据、指令配置数据和过滤器配置数据；与所述多页类型匹配的配置数据包括：工具配置数据、组件配置数据、指令配置数据和过滤器配置数据。

上述装置可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例四

图4为本发明实施例四提供的一种计算机设备的结构示意图。图4示出了适于用来实现本发明实施方式的示例性计算机设备12的框图。图4显示的计算机设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。计算机设备12可以是挂接在总线上的设备。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(PerIPheral Component Interconnect，PCI)总线。

计算机设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)，数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(Input/Output，I/O)接口22进行。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local AreaNetwork，LAN)，广域网(Wide Area Network，WAN)通信。如图所示，网络适配器20通过总线18与计算机设备12的其它模块通信。应当明白，尽管图4中未示出，可以结合计算机设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列(Redundant Arrays of Inexpensive Disks，RAID)系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明任意实施例所提供的方法。

实施例五

本发明实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的页面应用数据包生成方法：

也即，该程序被处理器执行时实现：获取页面类型，其中，所述页面类型包括多页类型或者单页类型；获取与所述页面类型匹配的配置数据，所述配置数据用于指定目标数量个页面入口文件，所述目标数量包括一个或多个，所述目标数量与页面类型参数匹配；根据所述配置数据，生成页面应用数据包。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、RAM、只读存储器(Read OnlyMemory，ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、无线电频率(RadioFrequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括LAN或WAN——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims

1.一种页面应用数据包生成方法，其特征在于，包括：

根据所述配置数据，生成页面应用数据包。

2.根据权利要求1所述的方法，其特征在于，所述页面类型为单页类型，所述页面入口文件的数量为一个；

所述根据所述配置数据，生成页面应用数据包，包括：

根据所述配置数据，获取一个页面入口文件；

根据所述页面入口文件，生成单页应用数据包。

3.根据权利要求1所述的方法，其特征在于，所述页面类型为多页类型，所述页面入口文件的数量为至少两个；

所述根据所述配置数据，生成页面应用数据包，包括：

根据所述配置数据，获取多个页面入口文件；

根据各所述页面入口文件，生成多页应用数据包。

4.根据权利要求1所述的方法，其特征在于，所述根据所述配置数据，生成页面应用数据包，包括：

通过模块打包程序，根据所述配置数据，生成页面应用数据包，所述模块打包程序包括Webpack程序。

5.根据权利要求1所述的方法，其特征在于，在生成页面应用数据包之后，还包括：

在接收到与所述页面类型匹配的运行指令时，通过浏览器加载所述页面应用数据包，渲染形成网页。

6.根据权利要求1所述的方法，其特征在于，所述配置数据包括依赖包版本号、依赖包锁定版本号、打包运行配置数据、层叠样式表配置数据、编译器版本及编译配置数据、语言校验配置数据和业务代码配置数据；与所述多页类型匹配的配置数据包括：多个标题配置信息。

7.根据权利要求1所述的方法，其特征在于，所述配置数据包括复用配置数据；与所述单页类型匹配的复用配置数据包括下述至少一项：路由配置数据、存储配置数据、工具配置数据、组件配置数据、指令配置数据和过滤器配置数据；与所述多页类型匹配的配置数据包括：工具配置数据、组件配置数据、指令配置数据和过滤器配置数据。

8.一种页面应用数据包生成装置，其特征在于，包括：

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7中任一所述的页面应用数据包生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的页面应用数据包生成方法。