CN112199080A

CN112199080A - vuejs项目webpack构建方法及设备

Info

Publication number: CN112199080A
Application number: CN202011043743.9A
Authority: CN
Inventors: 丁亚飞
Original assignee: Shanghai Suninfo Technology Co ltd
Current assignee: Shanghai Suninfo Technology Co ltd
Priority date: 2020-09-28
Filing date: 2020-09-28
Publication date: 2021-01-08
Anticipated expiration: 2040-09-28
Also published as: CN112199080B

Abstract

本发明的目的是提供一种vuejs项目webpack构建方法及设备，本发明将大型项目拆分为多个项目，而多个项目采用独立构建的方案，彻底解决了大型项目构建慢的问题。另外，本发明充分利用了私有npm仓库对webpack外部包进行了管理，实现了主项目和子项目的松耦合，能够动态的替换主项目中的子项目代码。大大提高了项目的灵活程度，实现了页面级别的动态替换，使得项目可维护性和扩展性更高。

Description

vuejs项目webpack构建方法及设备

技术领域

本发明涉及计算机领域，尤其涉及一种vuejs项目webpack构建方法及设备。

背景技术

随着越来越多的应用采用单页的开发模式，在国内的前端社区非常流行采用vuejs作为框架、webpack作为构建工具的项目越来越多。在这样的项目，在项目级别很小的情况下，使用webapck构建应用会响应很快，但随着项目的扩大，包含的需要编译的文件越来越多，构建的速度随着文件的增加越来越慢，虽然社区了给出了很多优化的方案，但文件数量随着项目的不断扩展，变得越来越大，优化已经无法从根本上解决构建速度慢的问题。

现有的大型vuejs项目在webpack构建过程中，存在构建速度慢，编译打包后无法实现部分模块替换的问题。

发明内容

本发明的一个目的是提供一种vuejs项目webpack构建方法及设备。

根据本发明的一个方面，提供了一种vuejs项目webpack构建方法，该方法包括：

将vuejs项目拆分为主项目和子项目，修改主项目，以保证主项目具有接受来自外部组件的能力；修改子项目，以使子项目具有打组件包的能力，并具有独立运行的能力；

在所述子项目开发测试完成后，将开发测试完成后的子项目发布某一版本的数据包到私有npm仓库中；

所述主项目通过npm install命令从所述私有npm仓库中获取子项目的某一版本的数据包；

在主项目的extension目录下运行npm run config命令，将已经获取的某一版本的数据包与主项目关联；

将修改完成主项目启动或重启，测试修改是否正确。

进一步的，上述方法中，在主项目的extension目录下运行npm run config命令，将已经获取的某一版本的数据包与主项目关联的之前，还包括：

备份node_modules目录和package.json文件。

进一步的，上述方法中，将修改完成主项目启动或重启，测试修改是否正确之前，还包括：

在后台修改路由对应的组件。

进一步的，上述方法中，修改主项目，以保证主项目具有接受来自外部组件的能力，包括：

在主项目的静态目录中添加一个配置文件config.js，所述配置文件config.js的作用是为编译生成的文件提供ajax根路径、配置已经构建好的组件主文件和为这些主文件载入提供一个缓存机制。

进一步的，上述方法中，修改子项目，以使子项目具有打组件包的能力，包括：

在子项目中，将想要作为一个模块的vue文件放在一个目录中，在目录中创建一个第一main.js文件，所述第一main.js文件的作用是将所述目录中的vue文件作为一个库进行打包。

对子项目的webpack打包成库脚本进行配置，以编写webpack打包脚本。

在主项目的源代码根目录下存在一个第二main.js文件，作为主项目的主文件或入口文件。

根据本发明的另一方面，还提供一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以上述任一项所述的方法。

根据本发明的另一方面，还提供一种用于在网络设备端信息处理的设备，该设备包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该设备执行上述任一项所述的方法。

与现有技术相比，本发明提出了一种大型vue项目webpack构建方案，将大型项目拆分为多个项目，而多个项目采用独立构建的方案，彻底解决了大型项目构建慢的问题。

另外，本发明充分利用了私有npm仓库对webpack外部包进行了管理，实现了主项目和子项目的松耦合，能够动态的替换主项目中的子项目代码。大大提高了项目的灵活程度，实现了页面级别的动态替换，使得项目可维护性和扩展性更高。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1示出本发明一实施例的vuejs项目webpack构建方法及设备的示意图；

图2示出本发明一实施例的项目拆分示意图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本发明作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

如图1和2所示，本发明提供一种vuejs项目webpack构建方法，所述方法包括：

步骤S1，将vuejs项目拆分为主项目和子项目，修改主项目，以保证主项目具有接受来自外部组件的能力；修改子项目，以使子项目具有打组件包的能力，并具有独立运行的能力，方便测试和开发；

步骤S2，在所述子项目开发测试完成后，将开发测试完成后的子项目发布某一版本的数据包到私有npm仓库中；

步骤S3，所述主项目通过npm install命令从所述私有npm仓库中获取子项目的某一版本的数据包；

步骤S4，在主项目的extension目录下运行npm run config命令，将已经获取的某一版本的数据包与主项目关联。考虑到版本回退问题，可以在此时考虑先备份node_modules目录和package.json文件。

步骤S5，在后台修改路由对应的组件；

在此，如果需要调整路由信息，这时候可以考虑在后台修改路由对应的组件。

步骤S6，将修改完成主项目启动或重启，测试修改是否正确。

在此，目前存在如何替换部分js文件的需求。一个项目在webpack构建过程中会把所有模块打在一起，虽然这些文件可以通过异步组件的方式引入，在编译的过程中生成一个独立的文件，但由于所有的模块在编译的过程中会生成一定的依赖关系。直接替换部分文件是无法实现替换的。

本发明的目的在于将部分业务和项目进行解耦。将项目拆分为主项目和n个子项目，主项目可以在不重新编译的情况下，对业务部分模块(来自子项目)进行替换。而由于各个主项目是单独编译的，所以而每次打包不需要对没有修改的子项目进行编译打包，对于项目整体来说编译速度会更快。对于已经实施的项目如果不修改主项目的情况下，可以考虑直接替换扩展目录中的子项目实现业务功能替换。从而彻底解决编译慢，无法部分替换的问题。考虑到数据包的版本维护和快速引入的问题，本发明在开发中在内部环境里引入私有npm仓库。每次替换某一个具体包时，采用npm进行安装和卸载。具体结构可如图1。

图1中的sunflower组件库，包括：SiCAP主项目，DBA子项目、OMA子项目、IAM子项目、流程子项目，本地仓库为所述的私有npm仓库。

在webpack构建的过程中，开发模式下不需要编译那些本次开发中不需要关注的业务代码，生产模式下编译速度能够更快一些。

本发明的vuejs项目webpack构建方法一实施例中，步骤S1，修改主项目，以保证主项目具有接受来自外部组件的能力，包括：

在主项目的静态目录(一般为staitc目录)中添加一个配置文件config.js，配置文件config.js的作用是为编译生成的文件提供ajax根路径、配置已经构建好的组件主文件和为这些主文件载入提供一个缓存机制。配置文件config.js的主要内容如下：

其中

这部分为配置文件包裹机制，为了让该文件能够兼容wepback构建，无功能上的作用。SunflowerConfig为模块的名称。为了webpack在构建时能将它载入，需要将它配置为外部扩展，需要首先将它在index.html中引入

并在wepback.confg.js中进行配置

这样做的目的是可以保证config.js作为我们的配置文件，并且不会被主项目webpack编译。

这部分代码用来处理组件的动态载入。

pushComponent函数用于将载入的模块临时存放入componentAry数组中。

getComponents函数用于将所有已经载入并存放在componentAry数组中的模块返回。

getComponentUrls函数用于配置所有动态模块文件的路径。

本发明的vuejs项目webpack构建方法一实施例中，步骤S1，修改子项目，以使子项目具有打组件包的能力，包括：

在子项目中，将想要作为一个模块的vue文件放在一个目录中，在目录中创建一个第一main.js文件，所述第一main.js文件的作用是将所述目录中的vue文件作为一个库进行打包。具体内容如下：

这个文件首先引入了我们的全局配置文件'SunflowerConfig'(在config.js中)，并获得了它的pushComponent方法，在export导出之前进行了调用。将install方法和一个key组成一个对象存入全局数组中。Vue.component('hello-world',()＝>import('./PageIndex'))是一个示例，它将hello-world这个异步全局组件封装在库中。在实际应用中install方法中会有若干个彼此相关异步组件。

对子项目的webpack打包成库脚本进行配置，以编写webpack打包脚本。为了能够对子项目进行打包，需要编写webpack打包脚本。具体代码如下：

这里需要注意的是publicPath:'static/extension/node_modules/sunflower-portlets/',需要设置为该子项目未来在主项目的具体位置。调用webpack编译打包后，会中生成一个单独目录，目录中会有若干个js文件，同时有一个main.js的库入口文件。这个main.js会被配置在主项目的config.js文件的getComponentUrls返回数组中。

对主项目的入口文件进行修改，包括在主项目的源代码根目录(src)下存在一个第二main.js文件，它是主项目的主文件或入口文件。这里一般会引入项目使用的第三方库，并进行安装。由于外部组件并没有一个统一的组件名称，这里需要通过前面保存在'SunflowerConfig'中的组件路径和组件名称，而这些组件的异步引入又需要引入一个动态载入组件，通过动态载入组件将这些组件进行安装，具体代码如下：

loadPromise是一个动态载入js文件自定义组件，具体代码如下：

通过Promise完成所有的vue组件的全局安装。下面对如何使用这些全局组件进行说明。

步骤S5，在后台修改路由对应的组件之前，还包括：

设置动态路由机制。对于vue项目，动态路由的机制，可以实现页面级别的组件的是否可以访问。这里采用后台传来路由表，前端通过调接口拿到路由表后进行处理的方式进行控制。具体代码如下：

首先通过路由守卫这里先通过接口获得所有路由信息，具体返回数据格式如下：

然后对路由进行处理，处理函数(filterAsyncRouter)中比较特殊的地方是并不是所有的组件都在主项目中，所有标记为extension的组件都是外部组件，对于这些组件的处理可以查看filterAsyncRouter函数，它内部有个判断是否为固定字符串‘extension’，如果是，则都要采用组件BaseComponent。这个组件内部会对要显示的页面进行选择性的展示。BaseComponent具体代码如下：

这里在组件初始化和路由变化时进行了同样的处理，通过传入的路由名称name判断全局组件中是否注册有组件，有则展示，没有则显示找不到页面组件。

具体的，私有npm仓库的使用方面：可以在主项目和子项目中做了相应修改后，便实现了组件的动态载入和修改。为了方便管理和记录外部组件(来自子项目)，引入了私有npm仓库对子项目发布组件进行管理。每次子项目改动时，子项目在私有npm仓库中发布一个数据包，然后在主项目中对该数据包进行安装。然后通过npm脚本完成配置。在主项目的static目录里，增加一个子目录为extension，在这个目录中，提供一个package.json文件，具体内容如下：

这里只需要关注scripts和dependencies两处的配置。scripts为自定义脚本，dependencies为来自自由npm仓库的依赖包。在终端中，执行npm install-S‘name’后会从私有仓库获得相应的包，包安装完成后，执行npm run config后，会将dependencies中所有依赖安装到config.js中。具体代码如下。

为了方便使用，这里还编写备份脚本，完成对extension目录中node_modules目录的备份；恢复脚本，完成对已有备份进行的恢复。这里不再详细描述。

综上所述，本发明提出了一种大型vue项目webpack构建方案，将大型项目拆分为多个项目，而多个项目采用独立构建的方案，彻底解决了大型项目构建慢的问题。

本发明的各设备和存储介质实施例的详细内容，具体可参见各方法实施例的对应部分，在此，不再赘述。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

需要注意的是，本发明可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本发明的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本发明的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本发明的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本发明的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本发明的方法和/或技术方案。而调用本发明的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本发明的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本发明的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims

1.一种vuejs项目webpack构建方法，其中，该方法包括：

所述主项目通过npminstall命令从所述私有npm仓库中获取子项目的某一版本的数据包；

将修改完成主项目启动或重启，测试修改是否正确。

2.根据权利要求1所述的方法，其中，在主项目的extension目录下运行npm runconfig命令，将已经获取的某一版本的数据包与主项目关联的之前，还包括：

备份node_modules目录和package.json文件。

3.根据权利要求1所述的方法，其中，将修改完成主项目启动或重启，测试修改是否正确之前，还包括：

在后台修改路由对应的组件。

4.根据权利要求1所述的方法，其中，修改主项目，以保证主项目具有接受来自外部组件的能力，包括：

在主项目的静态目录中添加一个配置文件config.js，所述配置文件config.js的作用是为编译生成的文件提供ajax根路径、配置已经构建好的组件的主文件和为所述主件的主文件载入提供一个缓存机制。

5.根据权利要求1所述的方法，其中，修改子项目，以使子项目具有打组件包的能力，包括：

6.根据权利要求1所述的方法，其中，修改子项目，以使子项目具有打组件包的能力，包括：

7.根据权利要求1所述的方法，其中，修改主项目，以保证主项目具有接受来自外部组件的能力，包括：

8.一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现权利要求1至7中任一项所述的方法。

9.一种用于在网络设备端信息处理的设备，该设备包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该设备执行权利要求1至7中任一项所述的方法。