it分离式前端多模块项目快速打包方法
技术领域
1.本发明涉及一种文件处理方法领域，具体为一种it分离式前端多模块项目快速打包方法。
背景技术：
2.it前端开发情况中对于项目的构建打包一直都是单项目运行与打包，包括在app开发中。现在主流的app开发模式为app 前端混合开发，这种模式下每个独立的功能项目被分为1个个相对于独立的项目，而文件在进行打包时不仅效率低下，同时无法多项目同时进行打包，打包时要频繁操作，不仅影响工作效率同时容易出错。
3.app前端开发框架使用的技术有原生js、jquery、公司内部开发框架等，使用这些去进行日常开发工作，不但显得工作沉重而且增添了不必要的学习任务，而且app前端开发框架都是使用的单一项目文件夹，这样一来，接口文件、业务文件、组件文件几乎凑在一块，单单从维护方面就很难进行，app前端开发框架构建后的文件全部放在了dist文件夹下，而且每次只能构建单个项目，也不能及时的对dist文件进行处理以及发布。
技术实现要素：
4.针对上述情况，为克服现有技术之缺陷，本发明提供了一种it分离式前端多模块项目快速打包方法，采用了多模块构架框架嵌入了最新的、开元的vue技术，依赖其提供的api方法、生命周期函数等可实现快捷开发，实行多模块文件管理（即一个模块对应一个文件夹），当前文件夹内包含了当前模块的数据、组件、业务代码等，互不影响，在多模块打包时该多模块架构框架使用了child_process对所配置的模块集合进行循环异步构建处理，不仅高效而且稳定输出。
5.其解决的技术方案是，包括以下步骤；第一步，配置好所要打包的模块编码集合并将各个要打包的文件排序；devconifig文件夹下的module文件夹下可配置所涉及模块的编码，自定义阿拉伯数字排序即可，编码对应的为所对应的模块文件名称；在该框架private.config.js文件中selected变量中以数组的形式可依此添加需打包模块对应的编码，打包时会根据所配置数组的编码进行循环打包所生成的模块文件会依此打包生产至改框架dist文件中；第二步，输入启动命令；在该框架package.json文件中scripts对象中的builds为执行打包命令的启动命令。
6.第三步，开始运行程序；1：输入打包命令npm run builds 之后，改框架build文件夹中的build-all.js文件将会执行。
7.2：build-all.js文件中引入了vue.config.js文件为打包的核心脚本文件，build-all.js会根据配置好的selected数组变量依赖child_process技术中的spawnsync
异步循环执行vue.config.js文件。
8.3：child_process解释：node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理io等异步操作。
9.node的单线程模式，只维持一个主线程。
10.node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。
11.4：vue.config.js解释；vue.config.js是vue项目的配置文件，专用于vue项目。
12.通过vue.config.js中常用功能的配置，简化了配置工作。vue.config.js依赖webpack实现打包。
13.本发明有益效果是：1.解决了现今前端web端开发框架构架方式为单一构建、单一启动的问题；2. 能进行高效、安全的发布，app 前端混合开发模式就要求一个app由多个独立的项目组建而成；3. 在打包的时候高效率的工作，能够一次性的打包多个项目，解决了多项目打包的问题，并且所打包的项目个数无上限。
具体实施方式
14.该实施例在使用时，想要进行前期准备工作，硬件方面：普通电脑即可，并连接外网或下载第三方依赖包，需安装的运行环境为：node；需准备该框架一份，应用的技术类有：webpack、vue、js等前端技术栈。
15.用到的技术有vue、node、webpack、javascript，分为2个程序，打包程序：配置好所要打包的模块编码集合，输入命令行后就会按照顺序依次打包、最后会输出一个个的压缩文件，启动程序：输入启动命令后，会默认启动配置好的集合的第一个模块，最后输出一串浏览器链接，打开既是打包后的文件。
16.现有技术中的app前端开发框架使用的技术有原生js、jquery、公司内部开发框架等，使用这些去进行日常开发工作，不但显得工作沉重而且增添了不必要的学习任务；而该多模块构架框架嵌入了最新的、开元的vue技术，依赖其提供的api方法、生命周期函数等可实现快捷开发，并且vue是开元的技术；从项目结构文件构成方面，现有的app前端开发框架都是使用的单一项目文件夹，这样一来，接口文件、业务文件、组件文件几乎凑在一块，单单从维护方面就很难进行；而该多模块架构框架实行的是多模块文件管理，即一个模块对应一个文件夹，当前文件夹内包含了当前模块的数据、组件、业务代码等，互不影响，使就算是非常庞大的app应用也能清晰明了的摸清模块分布，也便于开发、维护等工作；第一步，配置好所要打包的模块编码集合并将各个要打包的文件排序；可以按照相应的序号将文件进行排列。
17.devconifig文件夹下的module文件夹下可配置所涉及模块的编码，这里的编码可以是自定义阿拉伯数字，编码对应的为所对应的模块文件名称；在该框架private.config.js文件中selected变量中以数组的形式可依此添加需打包模块对应的编
码，打包时会根据所配置数组的编码进行循环打包所生成的模块文件会依此打包生产至改框架dist文件中。
18.第二步，输入启动命令；在该框架package.json文件中scripts对象中的builds为执行打包命令的启动命令。
19.第三步，开始运行程序；1：输入打包命令npm run builds 之后，改框架build文件夹中的build-all.js文件将会执行。
20.2：build-all.js文件中引入了vue.config.js文件为打包的核心脚本文件，build-all.js会根据配置好的selected数组变量依赖child_process技术中的spawnsync异步循环执行vue.config.js文件。
21.3：child_process解释：node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理io等异步操作。
22.node的单线程模式，只维持一个主线程。
23.node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。
24.4：vue.config.js解释；vue.config.js是vue项目的配置文件，专用于vue项目。
25.通过vue.config.js中常用功能的配置，简化了配置工作。vue.config.js依赖webpack实现打包。
26.初始化：启动构建，读取与合并配置参数，加载 plugin，实例化 compiler。
27.编译：从 entry 发出，针对每个 module 串行调用对应的 loader 去翻译文件内容，再找到该 module 依赖的 module，递归地进行编译处理。
28.输出：对编译后的 module 组合成 chunk，把 chunk 转换成文件，输出到文件系统。
29.输出文件的位置在dist文件中，dist中的所有文件夹为本次配置的所有模块项目，可点开模块项目中的index.html文件查看开发内容以及效果。
30.app前端开发框架既然是单项目开发模式那么也不会使用到child_process（node提供的对文件进行异步处理的api函数），在多模块打包时该多模块架构框架使用了child_process对所配置的模块集合进行循环异步构建处理，不仅高效而且稳定输出；多模块架构框架在构建输出后会依此在dist文件夹内输出相应模块的文件夹集，也写入了含有
‘
compressing’第三方插件的zip.js脚本文件对文件夹集进行处理成zip的命令操作，只需在构建完成之后输入npm run zip命令行即可进行处理；紧接着dist文件下的文件夹就会被依此处理成zip压缩包放置相应文件目录位置等待发布使用。
31.现在的app开发是app 前端混合开发模式，app 前端混合开发模式的最大的优点就是app能进行高效、安全的发布，app 前端混合开发模式就要求一个app由多个独立的项目组建而成。那么在打包的时候为了高效率的工作就要一次性的打包多个项目，该技术正是解决了多项目打包，并且所打包的项目个数无上限。
技术领域
1.本发明涉及一种文件处理方法领域，具体为一种it分离式前端多模块项目快速打包方法。
背景技术：
2.it前端开发情况中对于项目的构建打包一直都是单项目运行与打包，包括在app开发中。现在主流的app开发模式为app 前端混合开发，这种模式下每个独立的功能项目被分为1个个相对于独立的项目，而文件在进行打包时不仅效率低下，同时无法多项目同时进行打包，打包时要频繁操作，不仅影响工作效率同时容易出错。
3.app前端开发框架使用的技术有原生js、jquery、公司内部开发框架等，使用这些去进行日常开发工作，不但显得工作沉重而且增添了不必要的学习任务，而且app前端开发框架都是使用的单一项目文件夹，这样一来，接口文件、业务文件、组件文件几乎凑在一块，单单从维护方面就很难进行，app前端开发框架构建后的文件全部放在了dist文件夹下，而且每次只能构建单个项目，也不能及时的对dist文件进行处理以及发布。
技术实现要素：
4.针对上述情况，为克服现有技术之缺陷，本发明提供了一种it分离式前端多模块项目快速打包方法，采用了多模块构架框架嵌入了最新的、开元的vue技术，依赖其提供的api方法、生命周期函数等可实现快捷开发，实行多模块文件管理（即一个模块对应一个文件夹），当前文件夹内包含了当前模块的数据、组件、业务代码等，互不影响，在多模块打包时该多模块架构框架使用了child_process对所配置的模块集合进行循环异步构建处理，不仅高效而且稳定输出。
5.其解决的技术方案是，包括以下步骤；第一步，配置好所要打包的模块编码集合并将各个要打包的文件排序；devconifig文件夹下的module文件夹下可配置所涉及模块的编码，自定义阿拉伯数字排序即可，编码对应的为所对应的模块文件名称；在该框架private.config.js文件中selected变量中以数组的形式可依此添加需打包模块对应的编码，打包时会根据所配置数组的编码进行循环打包所生成的模块文件会依此打包生产至改框架dist文件中；第二步，输入启动命令；在该框架package.json文件中scripts对象中的builds为执行打包命令的启动命令。
6.第三步，开始运行程序；1：输入打包命令npm run builds 之后，改框架build文件夹中的build-all.js文件将会执行。
7.2：build-all.js文件中引入了vue.config.js文件为打包的核心脚本文件，build-all.js会根据配置好的selected数组变量依赖child_process技术中的spawnsync
异步循环执行vue.config.js文件。
8.3：child_process解释：node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理io等异步操作。
9.node的单线程模式，只维持一个主线程。
10.node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。
11.4：vue.config.js解释；vue.config.js是vue项目的配置文件，专用于vue项目。
12.通过vue.config.js中常用功能的配置，简化了配置工作。vue.config.js依赖webpack实现打包。
13.本发明有益效果是：1.解决了现今前端web端开发框架构架方式为单一构建、单一启动的问题；2. 能进行高效、安全的发布，app 前端混合开发模式就要求一个app由多个独立的项目组建而成；3. 在打包的时候高效率的工作，能够一次性的打包多个项目，解决了多项目打包的问题，并且所打包的项目个数无上限。
具体实施方式
14.该实施例在使用时，想要进行前期准备工作，硬件方面：普通电脑即可，并连接外网或下载第三方依赖包，需安装的运行环境为：node；需准备该框架一份，应用的技术类有：webpack、vue、js等前端技术栈。
15.用到的技术有vue、node、webpack、javascript，分为2个程序，打包程序：配置好所要打包的模块编码集合，输入命令行后就会按照顺序依次打包、最后会输出一个个的压缩文件，启动程序：输入启动命令后，会默认启动配置好的集合的第一个模块，最后输出一串浏览器链接，打开既是打包后的文件。
16.现有技术中的app前端开发框架使用的技术有原生js、jquery、公司内部开发框架等，使用这些去进行日常开发工作，不但显得工作沉重而且增添了不必要的学习任务；而该多模块构架框架嵌入了最新的、开元的vue技术，依赖其提供的api方法、生命周期函数等可实现快捷开发，并且vue是开元的技术；从项目结构文件构成方面，现有的app前端开发框架都是使用的单一项目文件夹，这样一来，接口文件、业务文件、组件文件几乎凑在一块，单单从维护方面就很难进行；而该多模块架构框架实行的是多模块文件管理，即一个模块对应一个文件夹，当前文件夹内包含了当前模块的数据、组件、业务代码等，互不影响，使就算是非常庞大的app应用也能清晰明了的摸清模块分布，也便于开发、维护等工作；第一步，配置好所要打包的模块编码集合并将各个要打包的文件排序；可以按照相应的序号将文件进行排列。
17.devconifig文件夹下的module文件夹下可配置所涉及模块的编码，这里的编码可以是自定义阿拉伯数字，编码对应的为所对应的模块文件名称；在该框架private.config.js文件中selected变量中以数组的形式可依此添加需打包模块对应的编
码，打包时会根据所配置数组的编码进行循环打包所生成的模块文件会依此打包生产至改框架dist文件中。
18.第二步，输入启动命令；在该框架package.json文件中scripts对象中的builds为执行打包命令的启动命令。
19.第三步，开始运行程序；1：输入打包命令npm run builds 之后，改框架build文件夹中的build-all.js文件将会执行。
20.2：build-all.js文件中引入了vue.config.js文件为打包的核心脚本文件，build-all.js会根据配置好的selected数组变量依赖child_process技术中的spawnsync异步循环执行vue.config.js文件。
21.3：child_process解释：node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理io等异步操作。
22.node的单线程模式，只维持一个主线程。
23.node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。
24.4：vue.config.js解释；vue.config.js是vue项目的配置文件，专用于vue项目。
25.通过vue.config.js中常用功能的配置，简化了配置工作。vue.config.js依赖webpack实现打包。
26.初始化：启动构建，读取与合并配置参数，加载 plugin，实例化 compiler。
27.编译：从 entry 发出，针对每个 module 串行调用对应的 loader 去翻译文件内容，再找到该 module 依赖的 module，递归地进行编译处理。
28.输出：对编译后的 module 组合成 chunk，把 chunk 转换成文件，输出到文件系统。
29.输出文件的位置在dist文件中，dist中的所有文件夹为本次配置的所有模块项目，可点开模块项目中的index.html文件查看开发内容以及效果。
30.app前端开发框架既然是单项目开发模式那么也不会使用到child_process（node提供的对文件进行异步处理的api函数），在多模块打包时该多模块架构框架使用了child_process对所配置的模块集合进行循环异步构建处理，不仅高效而且稳定输出；多模块架构框架在构建输出后会依此在dist文件夹内输出相应模块的文件夹集，也写入了含有
‘
compressing’第三方插件的zip.js脚本文件对文件夹集进行处理成zip的命令操作，只需在构建完成之后输入npm run zip命令行即可进行处理；紧接着dist文件下的文件夹就会被依此处理成zip压缩包放置相应文件目录位置等待发布使用。
31.现在的app开发是app 前端混合开发模式，app 前端混合开发模式的最大的优点就是app能进行高效、安全的发布，app 前端混合开发模式就要求一个app由多个独立的项目组建而成。那么在打包的时候为了高效率的工作就要一次性的打包多个项目，该技术正是解决了多项目打包，并且所打包的项目个数无上限。
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
