vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建

2024年5月4日 互联网

github传送门：
1、h5主项目
2、项目脚手架
3、子项目模板

系列文章传送门：
vue简易微前端项目搭建（一）：项目背景及简介
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
vue简易微前端项目搭建（三）：webpack相关配置

1、子项目模板

子项目模板就是用于快速创建一个配套的子项目，也就是在主项目目录/src/projects/下的一个子文件夹，作为模板项目，就是做个基础示例，主要是两点作用：一是能运行跑起来，方便直接写业务；二是有一个引导的作用，方便初上手的同事能快速熟悉项目的运行及使用。
结构大概如下：
在这里插入图片描述

  • 画红圈的template文件夹下的内容即是模板文件，其他的只是代码校验工具忽略即可。
  • 基本上就是遵从vue项目src目录大致结构。
  • 重点讲一下config.js，这个是用来做子项目的配置文件，一些子项目差异化的东西都可以在这里做配置，比如本地运行时接口请求地址，特别是你和后端需要本地联调时，需要用后端的本地ip和端口号作为服务器地址，不能把这个地址都统一到主项目公共配置吧，那这样多项目并行开发时就容易代码冲突错乱了，这时放在子项目配置文件里就很合适了。
  • 其他的文件以后再具体解释。

2、项目脚手架

由于是微前端结构划分了多个子项目，而通过传统的package.json里script脚本运行命令是死的，无法灵活选择启动哪个子文件或选择接口服务器，自动化部署也会受限制，所以搭建了这么个简易的脚手架，具体实现都是用nodeJs原生写的。

（1）脚手架功能：

安装
npm i dyd-h5-cli -g查看当前cli版本
dyd -V 或 dyd --version创建子项目
dyd init 子项目名启动子项目：
默认以dev环境运行
dyd start 子项目名
以指定环境运行
dyd start 子项目名 环境模式打包子项目：
默认以prod环境运行
dyd build 子项目名
以指定环境运行
dyd build 子项目名 环境模式打包所有子项目:
默认以prod环境运行
dyd buildAll
以指定环境运行
dyd buildAll 环境模式运行打包后的子项目
dyd server 子项目名

更多说明参见顶部github传送门的项目read.me。

代码目录结构：
在这里插入图片描述

（2）启动项目及打包项目

对于通过什么命令启动项目比较合适，因为本身项目是基于vue-cli4搭建改造的，那就不能考虑自己手写个webpack启动命令，最好是直接调用vue-cli官方的命令，
首先来看vue-cli官方的启动命令是什么：

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},
  • 通过vue-cli-service命令运行的，循着这个线索很容易就能找到 /node_modules/@vue/cli-service/bin/vue-cli-service.js 这个文件就是执行命令的js文件了。
  • 然后就是考虑在命令之后加参数来指定要运行的子项目和服务器环境。
  • 而vue-cli本身是支持–mode参数来匹配相应的.env文件，比如–mode prod 命令就会自动去读取项目根目录的.env.prod文件配置，所以这个可以直接用来指定服务器环境，具体参考官方说明：https://cli.vuejs.org/zh/guide/mode-and-env.html
  • 直接贴代码，封装的启动项目及打包项目命令接收方法 （代码参考：/lib/modules/spawnApp.js）
const cp = require('child_process')module.exports = {getServe: (type, projectName, envMode) => {const serve = cp.spawn('node', ['./node_modules/@vue/cli-service/bin/vue-cli-service.js',type,`---${projectName}`,'--mode',envMode])return serve}
}

type参数即serve或build命令。

  • 主项目里接收命令获取子项目名（代码参考h5主项目：/build/processEnv.js）：
process.env.VUE_APP_PROJECT_NAME = process.argv[3].split('---')[1]

（3）打包所有子项目

随着业务需求的不断扩展，子项目数量也会越来越多，有时候需要改公共代码，要把所有的子项目都打包一遍才能全部生效，如果一个一个的去打包命令，会显得很繁琐，所以需要这么个一键打包所有子项目的命令。

实现起来也是基于打包命令，也就是遍历一下所有的子项目写个递归函数依次打包，只不过这个过程都交给代码自动执行。
由于需要递归依次打包，所以在打包实现那里需要接受个回调函数，在单次打包完成后执行回调以便进行后续的判断。

  • 打包所有（代码参考：/lib/buildAll.js）

（4）创建子项目

  • 简单的说，就是把子项目模板文件复制到主项目里。
  • 子项目模板没有放在脚手架本地，而是放在了gitlab远程仓库里，因为如果放在脚手架本地，那每次要使用最新模板就必须要更新脚手架，在多人开发时难免会有一定的阻力，影响时效性，而放到远程仓库就能保证实时获取到最新模板。
  • 原理就是：首先本主项目本地/src/projects/下创建一个子文件夹，然后拉取远程仓库获取最新子项目模板到本地临时目录，把临时目录的template目录里的内容复制到刚创建的子文件夹里，最后删除临时目录文件。
  • 复杂点就是下载仓库模板的处理，下载容易出异常，需要做判断处理，我这里对ssh和https两种方式都做了兼容，对于密码错误也做了友好提示。
  • 下载处理，优先默认使用ssh方式，出错后再尝试使用https方式（代码参考：/lib/modules/download.js）
  • 使用https方式还出错就判断是否是密码错误，做出相应的提示。下载成功后通过fs模块来操作文件（代码参考：/lib/init.js）
  • 远程仓库地址的配置是在/lib/modules/download.js里，如果你要用记得换成你自己的仓库地址。

（5）启动服务运行打包后的项目

  • 这个其实就是写着玩玩，实际上基本没怎么用，本身全局安装个live-server命令也挺方便的哈哈，就是写着练手。
  • 主要分为两部分：一个是服务器启动控制，主要注意点是控制端口号被占用后用递归函数换个端口号重新启动；另一个是自动打开浏览器部分，通过child_process模块执行，需要区分windows和mac环境使用不同的命令。
  • 静态资源配置和目录挂载分别使用了koa-static和koa-mount插件。
  • 关于路由history模式的支持，我按照网上教程反复尝试都没成功，很纳闷，有兴趣的可以试试。
  • 具体代码参考：/lib/server.js

（6）发布到npm仓库

具体发布流程可以参考这篇：传送门，发布npm后就可以 npm i dyd-h5-cli -g 全局安装，然后就可以使用脚手架命令了。

最新文章