基于webpack的代码管理方法及其装置、存储介质与流程

1.本技术实施例涉及但不限于计算机处理技术领域，尤其涉及一种基于webpack的代码管理方法及装置、电子设备、计算机可读存储介质。


背景技术：

2.目前，代码仓库的管理方式可以分为multi-repo和mono-repo两种，multi-repo是指每个代码模块各使用一个git仓库，mono-repo是指多个模块共用一个git仓库，而在实践中，通常使用mono-repo方式管理代码仓库，以保证代码结构清晰，易于进行依赖管理和版本控制，有利于团队协作。lerna作为一种最常用的mono-repo解决工具，应用较为广泛，但仍然存在若干缺点，例如由于使用lerna需要安装工具，然后学习lerna相关的启动、创建、添加和发布等命令，且在发布和部署时服务端也需要额外支持相关的环境，否则无法使用lerna，这造成了额外的学习和安装的成本，此外其业务模块的管理不够灵活，导致项目维护成本升高，也无法扩展和添加更多的自定义功能。因此，如何控制代码管理成本、提升代码仓库的管理灵活度，成为了亟待解决的技术问题。


技术实现要素：

3.以下是对本文详细描述的主题的概述。本概述并非是为了限制权利要求的保护范围。
4.本技术实施例的主要目的在于提出一种基于webpack的代码管理方法及装置、电子设备、计算机可读存储介质，旨在控制代码管理成本，并提升代码仓库的管理灵活度。
5.为实现上述目的，本技术实施例的第一方面提出了一种基于webpack的代码管理方法，所述方法包括：
6.预配置环境变量module_name，其中，所述module_name＝modulename，所述modulename为待执行打包或运行的当前代码模块；
7.在webpack的loader配置中建立预处理文件，以通过所述预处理文件将webpack中的打包结果内容字符串pai_module_name替换为所述环境变量module_name；
8.在vue-router的初始化配置文件中导入替换后的所述打包结果内容字符串pai_module_name；
9.将目标路由信息添加到所述当前代码模块的路由配置中，其中，所述目标路由信息为所述modulename对应的router文件中所记录的路由信息。
10.根据本技术实施例提供的代码管理方法，至少具有如下有益效果：
11.基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理
灵活度。
12.在一些实施例，当前代码模块由以下步骤构建得到：
13.在package.json的执行脚本scripts配置项中，生成开发环境的第一命令和生产环境的第二命令；
14.将所述环境变量module_name分别添加到所述第一命令和所述第二命令中；
15.在router文件夹中添加目标路由表项；
16.基于所述第一命令、所述第二命令和所述目标路由表项，构建得到所述当前代码模块。
17.在基于webpack和vue框架构建项目管理系统内容的前提下，只需通过简单的命令配置、router配置等操作即可实现基于mono-repo的代码模块的构建，这对于项目的改造成本低，并且新建的代码模块可以方便的复用已有的组件和工具库，保证了代码结构的清晰度，方便依赖管理和版本管理控制。
18.在一些实施例，在构建得到所述当前代码模块之后，还包括：
19.增加与所述当前代码模块对应的模块文件夹，以通过所述模块文件夹对所述当前代码模块进行开发迭代。
20.通过增加与当前代码模块对应的模块文件夹，使得在后续项目管理中可以通过所增加的模块文件夹以对当前代码模块进行开发迭代，从而能够提升对于当前代码模块的管理效率。
21.在一些实施例，当所述当前代码模块为多个时，各个所述当前代码模块对应的所述模块文件夹不相同。
22.由于当前代码模块为多个，因此存在同时管理多个当前代码模块的可能性，因此为了避免管理多个当前代码模块之间产生冲突或响应不及时等情况，可以将各个当前代码模块对应的模块文件夹设置为不同的，这样也有利于提高分别对于各个当前代码模块的项目管理效率。
23.在一些实施例，所述目标路由表项配置为`modulename.js`文件。
24.将目标路由表项配置为待执行打包或运行的当前代码模块对应的路由表项，能够进一步地优化完善router文件夹的路由配置。
25.在一些实施例，所述在webpack的loader配置中建立预处理文件之前，还包括：
26.在webpack配置中读取所述环境变量module_name。
27.在webpack配置中预先读取并加载环境变量module_name，以便于在后续建立预处理文件的步骤中能够直接调用该环境变量module_name进行使用，也就是说，可以提高环境变量module_name的应用可靠性，从而提升整体代码管理的稳定性。
28.在一些实施例，所述预配置环境变量module_name，包括：
29.基于node包管理器的跨平台设置脚本cross-env预配置环境变量module_name。
30.通过基于npm的cross-env预配置环境变量module_name，可以良好地将环境变量module_name配置在相关的应用环境之中，以便于在后续步骤中进一步地应用所配置的环境变量module_name。
31.为实现上述目的，本技术实施例的第二方面提出了一种基于webpack的代码管理装置，所述装置包括：
32.预配置模块，用于预配置环境变量module_name，其中，所述module_name＝modulename，所述modulename为待执行打包或运行的当前代码模块；
33.预处理模块，用于在webpack的loader配置中建立预处理文件，以通过所述预处理文件将webpack中的打包结果内容字符串pai_module_name替换为所述环境变量module_name；
34.导入模块，用于在vue-router的初始化配置文件中导入替换后的所述打包结果内容字符串pai_module_name；
35.路由配置模块，用于将目标路由信息添加到所述当前代码模块的路由配置中，其中，所述目标路由信息为所述modulename对应的router文件中所记录的路由信息。
36.为实现上述目的，本技术实施例的第三方面提出了一种电子设备，所述电子设备包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序以及用于实现所述处理器和所述存储器之间的连接通信的数据总线，所述程序被所述处理器执行时实现上述第一方面所述的方法。
37.为实现上述目的，本技术实施例的第四方面提出了一种存储介质，所述存储介质为计算机可读存储介质，用于计算机可读存储，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述第一方面所述的方法。
38.本技术提出的一种基于webpack的代码管理方法及装置、电子设备、计算机可读存储介质，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
39.本技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本技术而了解。本技术的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
附图说明
40.图1是本技术一个实施例提供的基于webpack的代码管理方法的流程图；
41.图2是图1中一个实施例提供的步骤s101的流程图；
42.图3是图1中一个实施例提供的步骤s102之前的流程图；
43.图4是本技术一个实施例提供的构建步骤s104中的当前代码模块的流程图；
44.图5是图4中一个实施例提供的步骤s304之后的流程图；
45.图6是本技术一个实施例提供的基于webpack的代码管理装置的结构示意图；
46.图7是本技术一个实施例提供的电子设备的硬件结构示意图。
具体实施方式
47.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本技术，并不
用于限定本技术。
48.需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。
49.除非另有定义，本文所使用的所有的技术和科学术语与属于本技术的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本技术实施例的目的，不是旨在限制本技术。
50.首先，对本技术中涉及的若干名词进行解析：
51.webpack：为一种代码编译工具，有入口、出口、loader和插件。webpack是一个用于现代javascript应用程序的静态模块打包工具，当webpack处理应用程序时，会在内部构建一个依赖图dependency graph，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。
52.vue-router：为vue.js官方的路由插件,和vue.js是深度集成的,适合用于构建单页面应用；vue-router核心是通过vue.use注册插件,在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候,根据router对象匹配相应路由,获取组件,并将组件渲染到视图上。
53.vue-router的三个主要组成部分可以但不限于为：
54.vuerouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件；
55.router-link：请求链接的接口，浏览器会解析成《a》；
56.router-view：路由出口，用来渲染路由路径对应的组件；
57.对于vue-router而言，路由就是根据一个请求路径选中一个组件进行渲染的决策过程。
58.信息抽取(information extraction)：从自然语言文本中抽取指定类型的实体、关系、事件等事实信息，并形成结构化数据输出的文本处理技术。信息抽取是从文本数据中抽取特定信息的一种技术。文本数据是由一些具体的单位构成的，例如句子、段落、篇章，文本信息正是由一些小的具体的单位构成的，例如字、词、词组、句子、段落或是这些具体的单位的组合。抽取文本数据中的名词短语、人名、地名等都是文本信息抽取，当然，文本信息抽取技术所抽取的信息可以是各种类型的信息。
59.由于lerna作为一种最常用的mono-repo解决工具，应用较为广泛，但仍然存在若干缺点，例如由于使用lerna需要安装工具，然后学习lerna相关的启动、创建、添加和发布等命令，且在发布和部署时服务端也需要额外支持相关的环境，否则无法使用lerna，这造成了额外的学习和安装的成本，此外其业务模块的管理不够灵活，导致项目维护成本升高，也无法扩展和添加更多的自定义功能，因此如何进一步优化完善代码管理的效率及成本，成为了当前亟待解决的技术问题。
60.基于此，本技术实施例提供了一种基于webpack的代码管理方法及其装置、存储介质，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以
同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
61.本技术实施例提供的基于webpack的代码管理方法及装置、电子设备、计算机可读存储介质，具体通过如下实施例进行说明，首先描述本技术实施例中的代码管理方法。
62.本技术实施例提供的代码管理方法，涉及计算机处理技术领域。本技术实施例提供的代码管理方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现代码管理方法的应用等，但并不局限于以上形式。
63.本技术可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络pc、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本技术可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本技术，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
64.并且，本技术实施例提供的代码管理方法和装置、电子设备及存储介质，具体通过如下实施例进行说明，首先描述本技术实施例中的代码管理方法。
65.本技术实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(artificial intelligence，ai)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。
66.人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
67.图1是本技术实施例提供的基于webpack的代码管理方法的一个可选的流程图，图1中的方法可以但不限于包括步骤s101至步骤s104。
68.步骤s101，预配置环境变量module_name，其中，module_name＝modulename，modulename为待执行打包或运行的当前代码模块；
69.步骤s102，在webpack的loader配置中建立预处理文件，以通过预处理文件将webpack中的打包结果内容字符串pai_module_name替换为环境变量module_name；
70.步骤s103，在vue-router的初始化配置文件中导入替换后的打包结果内容字符串pai_module_name；
71.步骤s104，将目标路由信息添加到当前代码模块的路由配置中，其中，目标路由信
息为modulename对应的router文件中所记录的路由信息。
72.本技术实施例所示意的步骤s101至步骤s104，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
73.在一些实施例的步骤s101中，环境变量module_name的类型可以为多种，具体可以由本领域技术人员根据具体应用场景进行选择设置，此处并未限定；modulename除了表征当前代码模块之外，还可以用于表征预设的其他代码模块，例如预先选中一个其他的目标模块，然后对所选中的目标模块进行预配置，也就是说，在不同的情况下所预配置的代码模块可以为不同的。
74.在一些实施例的步骤s101中，一个项目中模块的数量可以为不限定的，在预构建管理系统的过程中，对于预配置环境变量module_name的次数也是不限定的，即可以根据实际项目情况来考虑配置环境变量module_name的具体策略，此处不作限定。
75.请参阅图2，在一些实施例中，步骤s101可以但不限于包括步骤s201。
76.步骤s201，基于node包管理器的跨平台设置脚本cross-env预配置环境变量module_name。
77.本步骤中，通过基于npm的cross-env预配置环境变量module_name，可以良好地将环境变量module_name配置在相关的应用环境之中，以便于在后续步骤中进一步地应用所配置的环境变量module_name。
78.在一些实施例的步骤s201中，除了node包管理器即npm之外，本领域技术人员还可以根据具体应用场景通过其他管理器及对应的脚本对环境变量module_name进行预配置，此处并未限定。
79.在一些实施例的步骤s102中，可以但不限于在webpack的loader配置中采用自定义的loader建立预处理文件，所建立的预处理文件用于执行相应的操作，即能够将webpack中的打包结果内容字符串pai_module_name替换为环境变量module_name，也就是说，通过替换变量的方式改变预处理文件中的预设字符串的结果内容，以达到优化配置的目的。
80.在一些实施例的步骤s102中，打包结果内容字符串pai_module_name的具体类型及功能可以由本领域技术人员根据具体应用场景进行自定义，此处不作限定。
81.请参阅图3，在一些实施例中，步骤s102之前还可以但不限于包括步骤s105。
82.步骤s105，在webpack配置中读取环境变量module_name。
83.本步骤中，在webpack配置中预先读取并加载环境变量module_name，以便于在后续建立预处理文件的步骤中能够直接调用该环境变量module_name进行使用，也就是说，可以提高环境变量module_name的应用可靠性，从而提升整体代码管理的稳定性，也就是说，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有
额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
84.在一些实施例的步骤s105中，读取环境变量module_name的方式及时刻不限定，可以根据具体场景进行读取并加载，此处并未限定。
85.在一些实施例的步骤s103中，由于vuerouter核心是通过vue.use注册插件,在插件的install方法中获取用户配置的router对象，那么当浏览器地址发生变化的时候,根据router对象匹配相应路由,获取组件并将组件渲染到视图上，因此可以通过导入打包结果内容字符串pai_module_name的方式添加相关的页面文件到路由信息中，以便于在这种管理架构下能够进行相应视图的渲染，从而实现对于vue-router的改造。
86.在一些实施例的步骤s104中，通过将目标路由信息添加到当前代码模块的路由配置中，也就是说，通过将modulename对应的router文件中所记录的路由信息添加到当前代码模块的路由配置，使得在进行路由导入时，能够将自定义的modulename对应的router文件中记录的路由信息添加到当前运行的代码模块的路由配置中，从而实现对于vue-router的进一步改造。
87.为了更好的说明本技术上述各实施例的工作原理及流程，以下结合具体示例进行说明。
88.示例一：
89.首先，使用npm的跨平台设置脚本cross-env新增一个环境变量module_name＝modulename，其中modulename即为该项目的多个代码模块中，当前需要执行打包或运行的单个代码模块的名称；
90.然后，在webpack配置中读取上一个步骤中所设置的环境变量module_name；
91.接着，在webpack的loader配置中使用自定义loader新建preprocess-loader文件，该文件内容执行如下所示的操作：
92.将webpack中打包结果内容的字符串pai_module_name替换为上一步骤中的module_name，其中，一种详细的自定义preprocess-loader代码如下所示：module.exports＝function(content,map){
93.this.cacheable&&this.cacheable()
94.content＝content.replace(/pai_module_name/g,process.env.module_name)
95.this.callback(null,content,map)
96.}
97.最后，在vue router的初始化配置文件中，使用import方法导入打包结果内容字符串pai_module_name，然后，将路由信息放入路由的初始化配置routes中，该导入会将当前的代码模块所需的相关页面文件添加到路由信息中。
98.可以看出，通过以上步骤的构建配置完成了webpack的配置和打包改造，同时实现了vue-router改造，那么当路由导入时会将自定义的modulename对应的router文件中记录的路由信息，添加到当前运行的代码模块的路由配置中。
99.也就是说，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成
本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
100.请参阅图4，在一些实施例中，当前代码模块可以但不限于由以下的步骤s301至步骤s304构建得到。
101.步骤s301，在package.json的执行脚本scripts配置项中，生成开发环境的第一命令和生产环境的第二命令；
102.步骤s302，将环境变量module_name分别添加到第一命令和第二命令中；
103.步骤s303，在router文件夹中添加目标路由表项；
104.步骤s304,基于第一命令、第二命令和目标路由表项，构建得到当前代码模块。
105.本步骤中，在基于webpack和vue框架构建项目管理系统内容的前提下，只需通过简单的命令配置、router配置等操作即可实现基于mono-repo的代码模块的构建，这对于项目的改造成本低，并且新建的代码模块可以方便的复用已有的组件和工具库，保证了代码结构的清晰度，方便依赖管理和版本管理控制；结合上述实施例也可以看出，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
106.在一些实施例的步骤s301中，执行脚本scripts配置项可以为区分开发环境或生产环境而设置的，也就是说，对于第一命令可以采用基于开发环境场景的执行脚本scripts配置项，对于第二命令可以采用基于生产环境场景的执行脚本scripts配置项，或者基于其他预定义的执行脚本scripts配置项进行设置，此处并未限定。
107.在一些实施例的步骤s301中，第一命令和第二命令的配置形式可以为多种，本领域技术人员可以根据实际应用场景进行选择性地设置，此处不作限定。
108.在一些实施例的步骤s302中，通过将与配置的环境变量module_name分别添加到第一命令和第二命令中，使得相关联的各个命令中能够进一步根据所配置的环境变量module_name进行后续工作历程。
109.在一些实施例的步骤s303中，在router文件夹中添加的目标路由表项，可以但不限于为相关技术中的路由表项，可参考相关技术中的router文件进行构建，由于其为本领域技术人员所熟知，故在此不作赘述。
110.在一些实施例的步骤s303中，目标路由表项配置为`modulename.js`文件，在这种情况下，将目标路由表项配置为待执行打包或运行的当前代码模块对应的路由表项，能够进一步地优化完善router文件夹的路由配置。
111.在一些实施例的步骤s304中，由于第一命令、第二命令和目标路由表项均已构建得到，因此可以在这种环境条件下稳定可靠地构建得到当前代码模块；需要说明的是，当前代码模块的构建时机可以根据具体应用场景进行选择设置，此处并未限定。
112.请参阅图5，在一些实施例中，步骤s304之后还可以但不限于包括步骤s305。
113.步骤s305，增加与当前代码模块对应的模块文件夹，以通过模块文件夹对当前代码模块进行开发迭代。
114.本步骤中，通过增加与当前代码模块对应的模块文件夹，使得在后续项目管理中可以通过所增加的模块文件夹以对当前代码模块进行开发迭代，从而能够提升对于当前代码模块的管理效率，结合上述实施例可以知道，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
115.在一实施例中，模块文件夹的预构建或预获取的方式可以为多种，此处并未限定。
116.在一些实施例中，当当前代码模块为多个时，各个当前代码模块对应的模块文件夹不相同，也就是说，由于当前代码模块为多个，因此存在同时管理多个当前代码模块的可能性，因此为了避免管理多个当前代码模块之间产生冲突或响应不及时等情况，可以将各个当前代码模块对应的模块文件夹设置为不同的，这样也有利于提高分别对于各个当前代码模块的项目管理效率。
117.为了更好的说明本技术上述实施例的工作原理及流程，以下结合具体示例进行说明。
118.示例二：
119.首先，在package.json文件的执行脚本scripts配置项中新增用于开发环境和生产打包时的命令，并在命令中加入示例一中所配置的环境变量module_name。
120.其中，开发环境的命令npm run build-modulename,将其值可以配置为：cross-env node_env＝development module_name＝module webpack-dev-server；
121.生产环境的build命令npm run dev-modulename,将其值可以配置为：cross-env node_env＝production module_name＝module webpack-cli
–
p。
122.然后，在router文件夹新增`modulename.js`文件，`modulename.js`文件为一个代码模块的路由表项，可以但不限于参考现有的router文件，模块的入口路由可以写为`/`。
123.最终，在业务的页面代码文件夹例如pages中，新增模块文件夹，后续在该模块文件夹下开发迭代，不同模块对应的文件夹不一致。
124.可以看出，完成以上步骤即可新建一个mono-repo中的代码模块执行相应的命令，即可进行模块运行或打包。
125.综上所述，结合上述示例一和示例二可以知道，本技术实施例提出的利用webpack制作的项目管理机制，不仅能够达到相关技术中的项目管理效果，而且在项目管理的过程中更加方便实现组件复用、工具复用，可以同时提升项目开发和代码管理效率，具有更加良好的通用性和兼容性；并且，本技术实施例主要基于webpack和vue框架本身的功能进行实现，对于使用者而言，可以不必付出额外的学习成本，对运行环境也没有额外的安装配置工作，因此应用成本更低。同时，对项目的改造成本低，使用者只需通过简单的新建代码模块步骤，就可以新建一个基于mono-repo的代码模块，新建的代码模块可以方便的复用已有的组件和工具库，保证了代码结构清晰，方便依赖管理和版本管理控制。
126.也就是说，基于webpack和vue框架的自身功能，通过预配置环境变量module_
name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
127.请参阅图6，本技术实施例还提供一种基于webpack的代码管理装置，可以实现上述代码管理方法，该装置包括：
128.预配置模块，用于预配置环境变量module_name；其中，module_name＝modulename，modulename为待执行打包或运行的当前代码模块；
129.预处理模块，用于在webpack的loader配置中建立预处理文件，以通过预处理文件将webpack中的打包结果内容字符串pai_module_name替换为环境变量module_name；
130.导入模块，用于在vue-router的初始化配置文件中导入替换后的打包结果内容字符串pai_module_name；
131.路由配置模块，用于将目标路由信息添加到当前代码模块的路由配置中，其中，目标路由信息为modulename对应的router文件中所记录的路由信息。
132.该代码管理装置的具体实施方式与上述代码管理方法的具体实施例基本相同，在此不再赘述。
133.本技术实施例中，基于webpack和vue框架的自身功能，通过预配置模块、预处理模块、导入模块以及路由配置模块的配合运作，以实现预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
134.本技术实施例还提供了一种电子设备，电子设备包括：存储器、处理器、存储在存储器上并可在处理器上运行的程序以及用于实现处理器和存储器之间的连接通信的数据总线，程序被处理器执行时实现上述代码管理方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。
135.请参阅图7，图7示意了另一实施例的电子设备的硬件结构，电子设备包括：
136.处理器901，可以采用通用的cpu(central processingunit，中央处理器)、微处理器、应用专用集成电路(applicationspecificintegratedcircuit，asic)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本技术实施例所提供的技术方案；
137.存储器902，可以采用只读存储器(readonlymemory，rom)、静态存储设备、动态存储设备或者随机存取存储器(randomaccessmemory，ram)等形式实现。存储器902可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器902中，并由处理器901来调用执行本技术实施例的代码管理方法；
138.输入/输出接口903，用于实现信息输入及输出；
139.通信接口904，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如
usb、网线等)实现通信，也可以通过无线方式(例如移动网络、wifi、蓝牙等)实现通信；
140.总线905，在设备的各个组件(例如处理器901、存储器902、输入/输出接口903和通信接口904)之间传输信息；
141.其中处理器901、存储器902、输入/输出接口903和通信接口904通过总线905实现彼此之间在设备内部的通信连接。
142.本技术实施例还提供了一种存储介质，存储介质为计算机可读存储介质，用于计算机可读存储，存储介质存储有一个或者多个程序，一个或者多个程序可被一个或者多个处理器执行，以实现上述的代码管理方法。
143.存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
144.本技术实施例提供的基于webpack的代码管理方法及装置、电子设备、计算机可读存储介质，基于webpack和vue框架的自身功能，通过预配置环境变量module_name、建立预处理文件、配置vue-router的初始化配置文件以及添加路由配置信息等操作，以实现制作符合要求的项目管理系统内容，相比于相关技术中的管理方式，方便于组件复用、工具复用，可以同时提升代码管理和项目开发效率，并且使用者不必花费额外的学习成本，对运行环境也没有额外的安装配置要求，因此能够控制代码管理成本，进一步提升代码仓库的管理灵活度。
145.本技术实施例描述的实施例是为了更加清楚的说明本技术实施例的技术方案，并不构成对于本技术实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本技术实施例提供的技术方案对于类似的技术问题，同样适用。
146.本领域技术人员可以理解的是，图1-5中示出的技术方案并不构成对本技术实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。
147.上述对本技术特定实施例进行了描述，其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，附图中描绘的过程不一定必须按照示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
148.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、计算机可读存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
149.本技术实施例提供的装置、设备、计算机可读存储介质与方法是对应的，因此，装置、设备、非易失性计算机存储介质也具有与对应方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述对应装置、设备、计算机存储介质的有益技术效果。
150.在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。
151.例如，可编程逻辑器件(programmable logic device,pld)(例如现场可编程门阵列(field programmable gate array，fpga))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片pld上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(hardware description language，hdl)，而hdl也并非仅有一种，而是有许多种，例如:
152.abel(advanced boolean expression language)；ahdl(altera hardware description language)；confluence；cupl(cornell university programming language)；hdcal；以及jhdl(java hardware description language)；lava、lola、myhdl、palasm、rhdl(ruby hardware description language)等；目前，在本领域技术之中，相比之下更加较为常用的是vhdl(very-high-speed integrated circuit hardware description language)以及语言verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。
153.控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(application specific integrated circuit，asic)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：
154.arc 625d、atmel at91sam、microchip地址pic18f26k20以及silicone labs c8051f320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
155.上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
156.为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本
申请实施例时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
157.本领域内的技术人员应明白，本技术实施例可提供为方法、系统、或计算机程序产品。因此，本技术实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
158.本说明书是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
159.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
160.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
161.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
162.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
163.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带式磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
164.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
165.本技术实施例中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示单独存在a、同时存在a和b、单独存在b的情况。其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项”及其类似表达，是指的这些项中的任意组合，包括单项或复数项的任意组合。例如，a，b和c中的至少一项可以表示：a，b，c，a和b，a和c，b和c或a和b和c，其中a，b，c可以是单个，也可以是多个。
166.本技术实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本技术实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
167.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
168.以上所述仅为本技术实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。