一、写在前面

我曾尝试过利用vue自身的模块化与webpack配合实现此功能，但是由于webpack编译时不能识别代码中的条件判断，他只会将从入口文件开始的import和require引入的文件全部打包进去，不能根据代码中的条件判断动态引入需要的文件实现自定义打包。所以我想到可以直接将之前手动拼装文件的过程自动化，那自动化我就会想到使用linux的一些命令，写一个自动化脚本，交给程序去执行就好了。我的这个方法肯定不是最好的，有更好的方式欢迎大家评论留言，共同进步。

二、需求

我们公司有一款app，它有一些通用化的功能，也存在一些根据客户需求定制化的一些功能，同时还会不定时升级，功能拆分组装等，这种就会出现遗漏升级，重复开发，出错率也会增加。所以我就想实现只写一套代码，通过勾选☑️的配置方式实现非技术人员也可以自助生成app，这样释放了劳动力，也提高了工作效率。

三、设计思想

首先要将功能细化并拆分成模块，这点利用vue天生的模块化思想很容易就可实现；其次拼装好模板，比方说功能1+功能2是一种模板，功能3和功能4是一种模板，因为vue我没找到可以动态注册局部组件的方法（此方法很笨，后来我想到了可以利用sed命令写文件以实现动态引入组件）；最后就要在服务器上部署打包环境了，这个我是首先在docker上将环境配置好，之后将配置文件上传到服务器上即可。

四、使用到的技术栈

• vuejs
• nodejs
• express
• shelljs

五、目录设计

这是一个基于cordova的app

5.1 总体目录解释

• platforms:cordova项目自带，项目安装的平台
• plugins:cordova项目自带，项目安装的cordova插件
• vuxProject：vue项目目录
  • build：webpack配置文件
  • config：webpack配置文件
  • src：webpack打包的目录
  • srcAllVersions：所有功能模块文件，之后根据配置文件将需要的文件移入src文件夹下
  • static：静态资源文件
• www：vue打包之后的文件

5.2 srcAllVersions目录解释

• assets：静态资源文件，包括图片，css，js等
• components: 细化的功能组件
• cordova：cordova的一些配置文件
• main：vue的入口文件
• pages：页面模板文件
• resources：app的资源文件，包括启动动画图片，applogo图片
• router：vue的路由文件
• services：一些服务的js文件，包括接口服务，与第三方sdk对接的服务
• APP.vue: vue-cli创建的主vue文件
• common.js: 自己封装的公共方法文件
• CONSTANT.js:自定义的常量js文件
• Listener.js:监听push的文件
• Vue.js:主要用来加一些拦截器，定义一些全局的方法

六、docker配置cordova打包所需要的环境

1. 在cordova项目中命令行输入cordova requirements即可看到cordova所依赖的环境

• java jdk:1.8.0版本
• android sdk
• android target:我这边安装了23,25,26,27,28
• gradle:4.1版本

2. 配置docker镜像

   2.1 镜像文件目录如下：

我将需要的gradle，jdk，sdk都直接放在镜像中了，这里要注意的是要根据你docker的系统下载相应的包，我这里下载的都是linux的包。之前我是用使用wget命令在创建docker镜像的时候命令行下载相应的包，此种方式比较耗费服务器资源，所以改用直接将本地文件上传到docker某目录下即可。

• Dockerfile文件是创建镜像时，执行的一些脚本，内容如下：

[注]： 当时遇到的最大困难就是在.bashrc文件中配置环境变量，使用source命令未能保存成功，导致不能执行下面的命令 解决办法：使用docker的ENV命令，直接写入系统环境变量即可

3. 配置docker实例 目录结构如下：

• logs：记录日志的文件
• node-Dockerfile：配置文件
• .env
• docker-compose.yml:在此文件中我将本地项目文件映射到docker实例中

七、模块化打包

7.1 更细节的设计思想

1. 从总代码池(srcAllVersions文件夹)中选择好需要的功能模块与模板，要定义好从form的文件夹，以及to的文件夹
2. 将其放入目标代码池中(src文件夹)，并修改文件名，ex：总代码池中叫template01，但是在目标代码池当中需要修改为main.js

接下来看一下node项目的目录结构：

• api.js：定义接口
• app.js：node主文件
• config.js：自定义组装文件夹的配置文件
• CONSTANT.js:定义了一些常量，比如路径常量

7.2 详细讲解config.js文件

在此文件中我定义了一个Obj

• indexBg：为前端传的key
• source下的key为indexBg的值，一个值对应一个文件，即根据用户传的自定义配置，从总代码池中摘取对应的文件
• sourcePath：表示源文件路径，这里面出现的Source_Path等变量都在CONSTANT.js文件中定义了
• aimsPath：目标路径，即将此源文件的副本移到哪个目录下
• oldName：源文件的文件名
• newName：移入到目标文件夹下，需要修改为新的文件夹，如果新文件名和源文件名相同，则不需要配置

7.3 详细讲解组装文件接口

1. 首先如果存在旧文件，需要先删除历史文件
2. 将源文件拷贝到目标文件夹内
3. 修改文件名（针对多模板的文件）
4. 返回成功

7.4 详细讲解设置app信息的接口

1. 获取app名字，版本，appid
2. 删除历史config.xml文件
3. 将源文件中的config.xml拷贝到cordova目录下
4. 将app相关信息写入到config.xml的对应的位置
5. 返回成功

7.5 详细讲解安装插件的接口

1. 由于此接口所做的shell脚本需要过长的时间执行，会导致超时，所以我设计了一个轮询机制，在调取此接口的同时也要调取轮询接口
2. 轮询接口的设计思想，在调取安装插件接口的最开始，创建一个此用户的的文件，并在文件中写入“build-init”标志，当次接口执行完，会在文件中覆盖写入“build-suucess”标志，然后轮询接口只要轮询到此文件写入了“build-success”标志就返回成功

1. 进入到src目录，运行npm run build更新www文件
2. 更新cordova（此步骤必需，不然执行其他cordova命令会先出现此提示），然后删除原android平台
3. 重新添加android平台，注意版本
4. 需要向这两个文件中写入兼容语法

5. 由于我们app的底层需要根据硬件设备选用不同的底层sdk，且多个sdk同时安装了会出现打包错误 1. 首先要判断当前项目中是否已经存在所需要的sdk，如果存在则返回正确，继续；否则安装相应的sdk，同时删除其他sdk插件 2. 这个判断我是根据package.json文件匹配相应的sdk名字，匹配成功表示已存在，不成功则表示不存在

6. 以上都执行完毕，向轮询的文件写入“build-success”标志 7. 返回成功

7.6 详细讲解生成apk接口

1. 此接口同上，也需要配一个轮询接口
2. 轮询成功返回生成的apk地址，前端可下载

1. 先创建一个该用户的轮询文件，并写入“apk-init”标志
2. 根据要生成apk的环境（正式/测试/本地调试），使用不同的打包命令，只有正式环境需要加上签名
3. 为了防止出现同名文件，所以将存在的apk删除
4. 生成apk文件
5. 在轮询文件中写入“apk-success”标志
6. 返回成功

八、后期维护

8.1 添加新的功能模块

1. 做好组件化，减少耦合性，放到srcAllVersions文件夹内相应的components/pages文件下即可
2. 组合新的页面模板
3. 需要在打包平台的前端，添加新的配置项
4. 后端组装文件接口的config文件需要加一条配置项