CN112732328A - webpack打包系统、方法及相应设备和存储介质 - Google Patents

Abstract

本申请公开了webpack打包系统、方法及相应设备和存储介质，其中所述系统包括：接收模块，用于接收目标工程标识；显示模块，用于根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；树状结构生成模块，用于确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；渲染模块，用于根据JavaScript属性树状结构渲染webpack属性输入页面；创建模块，用于根据webpack属性输入页面的属性选择和填写创建webpack配置文件；打包模块，用于根据webpack配置文件对目标工程进行打包。本发明可减少webpack打包的工作量，降低操作复杂程度，提高效率。

Description

webpack打包系统、方法及相应设备和存储介质

技术领域

本申请涉及电数字数据处理领域，尤其涉及webpack打包系统、方法及相应设备和存储介质。

背景技术

一个项目在不同实体实施，或多或少都有一定的业务需求变更，每一实体的实施对应一个业务场景。在多业务场景下，一般采取针对每个业务场景创建一个对应的工程的方式。然而，不同业务场景相关的代码之间的区别通常只占整个工程代码的一小部分。当更新相同部分代码时，需要每个都去更新一遍，比较易产生混乱。因此，一种做法是不为每个不同业务都创建对应的业务工程文件，而是合并成一个大的工程，将业务不同的代码文件拆分出来放到对应目录下，公共代码部分放到对应的目录下。然而，在执行webpack打包器时无法分辨现在应该编译哪部分对应的业务需求下的对应项目工程的代码，这样就需要去修改对应的webpack打包器配置文件，这时又出现了不同的业务场景就得配置一份对应的打包器配置文件的情况，每次调用对应业务场景下的代码时就要将对应的配置文件覆盖一次，存在多份代码编译多次、工作繁琐、无法应对多业务场景的缺点。而且，webpack打包器的可配置文件都是一些代码，应用者需要非常熟悉其中的配置原理才能进行修改，对使用者技术水平有一定的要求。

发明内容

为了克服现有技术中存在的不足，本发明提供一种webpack打包系统、方法及相应设备和存储介质，其可实现多业务场景下，一份代码编译多次，减少工作量，同时对webpack打包器的可配置文件可进行可视化处理，降低操作复杂程度。

在本发明的第一方面，提供一种webpack打包系统，该系统包括：

接收模块，用于接收目标工程标识；

显示模块，用于根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；

树状结构生成模块，用于确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；

渲染模块，用于根据JavaScript属性树状结构渲染webpack属性输入页面；

创建模块，用于根据webpack属性输入页面的属性选择和填写创建webpack配置文件；

打包模块，用于根据webpack配置文件对目标工程进行打包。

在实施例中，所述树状结构生成模块包括：版本确定子模块，用于确定目标工程文件根目录下安装的webpack打包器的版本；页面抓取子模块，用于根据确定的版本从webpack官方网站网页抓取相应版本的属性实例部分；提取子模块，用于从属性实例部分提取对应的代码结构；转换子模块，用于将代码结构的标签符号转换为JavaScript语言符号；过滤子模块，用于将JavaScript语言符号的数组中结构重复的数据过滤掉；标注子模块，用于对JavaScript语言符号的数组中的结构类型进行标注；树状结构生成子模块，用于基于标注后的JavaScript数组生成JavaScript属性树状结构。

在实施例中，所述渲染模块包括：组件结构渲染子模块，用于根据所述结构类型渲染对应类型的组件结构；自定义渲染子模块，用于渲染自定义属性输入界面。

在实施例中，所述创建模块包括：拼接子模块，用于将webpack属性输入页面的组件结构中的字段拼接成树状结构；插件子模块，用于循环调用树状结构中的插件，将require部分抽取保存到新的数组中并更改插件结构；创建子模块，用于基于更改后的树状结构在目标工程的根目录下创建配置文件；写入子模块，用于将配置文件的相应模块数据写入api。

在实施例中，所述系统还包括：转换模块，用于响应于将目录结构的一目录拖曳到webpack属性输入页面的一组件结构，将相应目录转换并填写为相应组件结构内的目录地址。

在实施例中，所述渲染模块还包括：文件匹配渲染子模块，用于渲染目标目录与插入目录的匹配输入界面。

在实施例中，所述显示模块包括：全工程显示子模块，用于显示所有目标工程的目标文件的目录结构。

在实施例中，所述创建模块包括：线程分配子模块，用于响应于输入的webpack属性包含checkImport数组对象，为该部分分配一个单独的线程来处理相应逻辑，将checkImport数据单独保存；地址获得子模块，用于遍历checkImport数组，响应于遇到import引入地址，调用nodejs文件读取api，找到对应地址的文件；扩展名确定子模块，用于判断对应地址的文件的扩展名；直接引入子模块，用于响应于扩展名为.css、.scss、.less，将相应文件直接引入到目标文件中；询问引入子模块，用于响应于扩展名为.js或.ts或自定义扩展名，将文件内容中的出口程序记录为export类，查看目标地址文件是否含有引入文件与export类相同的名称，如果有，替换from后的地址即可，否则，询问是否可以插入。

在本发明的第二方面，提供一种一种webpack打包方法，该方法包括：

接收目标工程标识；

根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；

确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；

根据JavaScript属性树状结构渲染webpack属性输入页面；

根据webpack属性输入页面的属性选择和填写创建webpack配置文件；

根据webpack配置文件对目标工程进行打包。

在本发明的第三方面，提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现根据本发明的第一方面方面的系统的功能或者实现根据本发明的第二方面的方法的步骤。

根据本发明的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据本发明的第一方面方面的系统的功能或者实现根据本发明的第二方面的方法的步骤。

本发明通过对webpack打包的可视化，可实现多业务场景下，一份代码编译多次，减少工作量，同时降低操作复杂程度。此外，通过在创建配置文件时引入特别的处理机制，可大幅提高处理速度，提高效率。

结合附图阅读本发明实施方式的详细描述后，本发明的其它特点和优点将变得更加清楚。

附图说明

图1为根据本发明系统的一实施例的框图；

图2为根据本发明系统显示和生成的目录结构及webpack属性输入页面的一示例；

图3为根据本发明方法的一实施例的流程图。

为清晰起见，这些附图均为示意性及简化的图，它们只给出了对于理解本发明所必要的细节，而省略其他细节。

具体实施方式

下面参照附图对本发明的实施方式和实施例进行详细说明。

通过下面给出的详细描述，本发明的适用范围将显而易见。然而，应当理解，在详细描述和具体例子表明本发明优选实施例的同时，它们仅为说明目的给出。

使用webpack打包器打包一个项目工程必须要配置对应的配置文件。配置文件主要是告诉webpack打包器，要调用哪些格式的文件进行什么样的编译和转换、这些文件的入口有哪些、最后编译生成具体叫什么。要了解这些具体的内容，必须读取文档，对于初级操作者而言难度较大。

图1示出了根据本发明的webpack打包系统的一优选实施例的框图。该实施例的系统包括：

接收模块102，用于接收目标工程标识。目标工程标识可以是目标工程的目标文件根目录地址，也可以是先前已创建的项目的别名。前者可直接进行填写，后者可通过下拉菜单进行选择。

显示模块104，用于根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构，如图2中左部所示。

树状结构生成模块106，用于确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构。在实施例中，树状结构生成模块包括：

版本确定子模块，用于在输入了目标项目工程的计算机根目录地址后，使用nodejs中的文件读取功能，将目标工程根目录下安装的“webpack打包器”的对应版本查询出来；

页面抓取子模块，用于根据确定的版本利用爬虫工具从webpack官方网站(webpack.js.org或者www.webpackjs.com)网页抓取相应版本的属性实例部分；

提取子模块，用于利用搜索引擎从属性实例部分提取对应的代码结构并存入一个数组里边；

转换子模块，用于对数组里面的数据循环遍历，将代码结构的html标签符号如<pre></pre>、<code></code>等转换为JavaScript语言符号；

过滤子模块，用于将JavaScript语言符号的数组中结构重复的数据过滤掉。例如，{entry:”xxxxa”}和{entry:”bbb”}，虽然entry的值不同，但是都是字符串类型，因而结构相同。又例如，{entry:”xxxxa”}和{entry:{ma:xxx}}，由于后一entry的值是一个对象，因而它们的结构不同；

标注子模块，用于对JavaScript语言符号的数组中的结构类型进行标注。例如，“string”标注为字符串类型、“object”标注为对象类型、array标注为数组类型等；

树状结构生成子模块，用于基于标注后的JavaScript数组生成JavaScript属性树状结构。

渲染模块108，用于根据JavaScript属性树状结构，使用react框架、antd组件渲染webpack属性输入页面的页面布局，如图2中右部所示。在实施例中，渲染模块包括：

组件结构渲染子模块，用于根据标注的结构类型渲染对应类型的组件结构，例如字符串类型组件、对象类型组件、数组类型组件、数组对象类型组件等。当然有可能有新增属性，这时也会根据实例给出分析的类型结构，进行渲染；

自定义渲染子模块，用于渲染自定义属性输入界面，给出自定义方式，以防止结构分析的结果不完整；

文件匹配渲染子模块，用于渲染目标目录与插入目录的匹配输入界面。

所有渲染子模块渲染得到的界面组合成例如如图2中右部所示的webpack属性输入页面，即所确定的webpack打包器版本的所有配置属性的可视化填写和选择操作按钮。可针对每个属性进行对应的注释说明，当点击查看某一属性时，可显示该属性的注释说明和/或实例，便于理解。在渲染webpack属性输入页面之后，既可进行相应属性的填写和选择。例如，当需要编译图2左边对应目录下的文件时，可将其选中然后拖曳到右侧对应的属性配置部分的输入框即可，后台将自动把相应目录转换并填写为相应属性配置部分的目录地址。webpack属性输入页面还可包括loader部分和plugin(插件)部分，可用于选择先前已存在/使用过的loader或plugin进行添加，也可以自定义loader或plugin然后添加。

创建模块110，用于根据webpack属性输入页面的属性选择和填写创建webpack配置文件。在实施例中，创建模块包括：

拼接子模块，用于在webpack属性输入页面填写、选择、自定义好要配置的属性后，将页面的所有组件结构中的字段拼接成树状结构；

插件子模块，用于循环调用拼接的树状结构中的插件，将require部分抽取保存到新的数组中并更改插件结构；

创建子模块，用于基于更改后的树状结构，利用nodejs文件在目标工程的根目录下创建名称为webpack.config.js的配置文件；

写入子模块，用于利用nodejs将配置文件的相应模块数据写入api。

打包模块112，用于根据webpack配置文件对目标工程进行打包。

一个工具系统或其它系统，提供给各个单位使用。但每个单位都会对工具进行部分的特定化更改，以适应该单位的特殊业务需求，此时就产生了维护多个版本的现象。随着所承接单位的数量越多，维护压力变得越大，每次都要记录，占用人力过多。一旦相关人员离职，新入职的人员很难马上接手。而使用本发明的webpack打包系统，可很好地解决以上难题，效果良好。

在实施例中，显示模块还可包括全工程显示子模块，用于显示所有目标工程的目标文件的目录结构。所有目标工程的目标文件可分为公共目标文件和特定目标文件并分别显示相应的目录结构，便于选择编译。

在实施例中，创建模块还可包括：

线程分配子模块，用于在确定输入的webpack属性包含checkImport数组对象时，为该部分分配一个单独的线程来处理相应逻辑，将checkImport数据单独保存；

地址获得子模块，用于遍历checkImport数组，在遇到import引入地址时，调用nodejs文件读取api，找到对应地址的文件；

扩展名确定子模块，用于判断对应地址的文件的扩展名，如.js、.css等；

直接引入子模块，用于在扩展名为.css、.scss或.less时，将相应文件直接引入到目标文件中(在目标文件中直接写一样的代码，即import“./App.css”文件)；

询问引入子模块，用于在扩展名为.js或.ts或自定义扩展名时，将文件内容中的出口程序记录为export类，查看目标地址文件是否含有引入文件与export类相同的名称，如果有，替换from后的地址即可，否则，返回具体的说明(提醒框)，询问是否要插入，如果前端确认插入，则直接插入。为此，可大大提高处理速度。

图3示出了根据本发明的webpack打包方法的一优选实施例的流程图。该实施例的方法包括：

在步骤S302，接收目标工程标识；

在步骤S304，根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；

在步骤S306，确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；

在步骤S308，根据JavaScript属性树状结构渲染webpack属性输入页面；

在步骤S310，根据webpack属性输入页面的属性选择和填写创建webpack配置文件；

在步骤S312，根据webpack配置文件对目标工程进行打包。

在另一实施例中，本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现结合图1所示和所述的系统实施例或其它相应系统实施例的功能或者实现结合图2所示和所述的方法实施例或其它相应方法实施例的步骤，在此不再赘述。

在另一实施例中，本发明提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现结合图1所示和所述的系统实施例或其它相应系统实施例的功能或者实现结合图2所示和所述的方法实施例或其它相应方法实施例的步骤，在此不再赘述。

在此所述的多个不同实施方式或者其特定特征、结构或特性可在本发明的一个或多个实施方式中适当组合。另外，在某些情形下，只要适当，流程图中和/或流水处理描述的步骤顺序可修改，并不必须精确按照所描述的顺序执行。另外，本发明的多个不同方面可使用软件、硬件、固件或者其组合和/或执行所述功能的其它计算机实施的模块或装置进行实施。本发明的软件实施可包括保存在计算机可读介质中并由一个或多个处理器执行的可执行代码。计算机可读介质可包括计算机硬盘驱动器、ROM、RAM、闪存、便携计算机存储介质如CD-ROM、DVD-ROM、闪盘驱动器和/或具有通用串行总线(USB)接口的其它装置，和/或任何其它适当的有形或非短暂计算机可读介质或可执行代码可保存于其上并由处理器执行的计算机存储器。本发明可结合任何适当的操作系统使用。

除非明确指出，在此所用的单数形式“一”、“该”均包括复数含义(即具有“至少一”的意思)。应当进一步理解，说明书中使用的术语“具有”、“包括”和/或“包含”表明存在所述的特征、步骤、操作、元件和/或部件，但不排除存在或增加一个或多个其他特征、步骤、操作、元件、部件和/或其组合。如在此所用的术语“和/或”包括一个或多个列举的相关项目的任何及所有组合。

前面说明了本发明的一些优选实施例，但是应当强调的是，本发明不局限于这些实施例，而是可以本发明主题范围内的其它方式实现。本领域技术人员可以在本发明技术构思的启发和不脱离本发明内容的基础上对本发明做出各种变型和修改，这些变型或修改仍落入本发明的保护范围之内。

Claims (11)

1.一种webpack打包系统，其特征在于，所述系统包括：

接收模块，用于接收目标工程标识；

显示模块，用于根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；

树状结构生成模块，用于确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；

渲染模块，用于根据JavaScript属性树状结构渲染webpack属性输入页面；

创建模块，用于根据webpack属性输入页面的属性选择和填写创建webpack配置文件；

打包模块，用于根据webpack配置文件对目标工程进行打包。

2.根据权利要求1所述的系统，其特征在于，所述树状结构生成模块包括：

版本确定子模块，用于确定目标工程文件根目录下安装的webpack打包器的版本；

页面抓取子模块，用于根据确定的版本从webpack官方网站网页抓取相应版本的属性实例部分；

提取子模块，用于从属性实例部分提取对应的代码结构；

转换子模块，用于将代码结构的标签符号转换为JavaScript语言符号；

过滤子模块，用于将JavaScript语言符号的数组中结构重复的数据过滤掉；

标注子模块，用于对JavaScript语言符号的数组中的结构类型进行标注；

树状结构生成子模块，用于基于标注后的JavaScript数组生成JavaScript属性树状结构。

3.根据权利要求2所述的系统，其特征在于，所述渲染模块包括：

组件结构渲染子模块，用于根据所述结构类型渲染对应类型的组件结构；

自定义渲染子模块，用于渲染自定义属性输入界面。

4.根据权利要求1所述的系统，其特征在于，所述创建模块包括：

拼接子模块，用于将webpack属性输入页面的组件结构中的字段拼接成树状结构；

插件子模块，用于循环调用树状结构中的插件，将require部分抽取保存到新的数组中并更改插件结构；

创建子模块，用于基于更改后的树状结构在目标工程的根目录下创建配置文件；

写入子模块，用于将配置文件的相应模块数据写入api。

5.根据权利要求1所述的系统，其特征在于，所述系统还包括：

转换模块，用于响应于将目录结构的一目录拖曳到webpack属性输入页面的一组件结构，将相应目录转换并填写为相应组件结构内的目录地址。

6.根据权利要求3所述的系统，其特征在于，所述渲染模块还包括：

文件匹配渲染子模块，用于渲染目标目录与插入目录的匹配输入界面。

7.根据权利要求1所述的系统，其特征在于，所述显示模块包括：

全工程显示子模块，用于显示所有目标工程的目标文件的目录结构。

8.根据权利要求1所述的系统，其特征在于，所述创建模块包括：

线程分配子模块，用于响应于输入的webpack属性包含checkImport数组对象，为该部分分配一个单独的线程来处理相应逻辑，将checkImport数据单独保存；

地址获得子模块，用于遍历checkImport数组，响应于遇到import引入地址，调用nodejs文件读取api，找到对应地址的文件；

扩展名确定子模块，用于判断对应地址的文件的扩展名；

直接引入子模块，用于响应于扩展名为.css、.scss、.less，将相应文件直接引入到目标文件中；

询问引入子模块，用于响应于扩展名为.js或.ts或自定义扩展名，将文件内容中的出口程序记录为export类，查看目标地址文件是否含有引入文件与export类相同的名称，如果有，替换from后的地址即可，否则，询问是否可以插入。

9.一种webpack打包方法，其特征在于，所述方法包括：

接收目标工程标识；

根据目标工程标识确定目标工程文件目录并在页面上显示目标文件的目录结构；

确定目标工程文件根目录下安装的webpack打包器的版本并基于webpack官方网站网页内容生成相应版本的JavaScript属性树状结构；

根据JavaScript属性树状结构渲染webpack属性输入页面；

根据webpack属性输入页面的属性选择和填写创建webpack配置文件；

根据webpack配置文件对目标工程进行打包。

10.一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现根据权利要求1-8任一所述的系统的功能或者实现根据权利要求9所述的方法的步骤。

11.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据权利要求1-8任一所述的系统的功能或者实现根据权利要求9所述的方法的步骤。

Images