微前端项目整合方案

背景:

项目已完成微前端拆分,但并未进行整合,在构建和开发过程中需要打开四个项目,十分不便捷

目的:

在不改变原有项目启动和打包流程的前提下,整合前端项目。将所有项目归结到一个文件中,通过脚本控制可以一条命令启动所有项目和打包所有项目,方便开发

方式:

通过npm-run-all指令合理控制所有项目的打包指令

改动:

  1. 将pumpkin-fronted-framework,pumpkin-vue-cloud,pumpkin-vue-mall,pumpkin-vue-portal四个项目合并至pumpkin-frontend这一个大项目中
  2. 原有项目在svn中的地址已迁移至pumpkin-frontend项目的svn地址目录下
  3. 所有生态相关项目均改成了yarn包管理工具
  4. 拉取最新项目地址https://192.168.201.253:55201/svn/618-code/trunk/pumpkin-frontend,并运行yarn 安装依赖
  5. 进入pumpkin-frontend项目,运行yarn run main:install,一次安装所有项目依赖
  6. 进入pumpkin-frontend项目,运行yarn run main:start,并行启动所有项目开发环境
  7. 进入pumpkin-frontend项目,运行yarn run main:build,并行打包所有项目代码
  8. 进入pumpkin-frontend项目,运行yarn run main:lint,并行检查所有项目eslint格式

效果:

"scripts": {
    "main:install": "npm-run-all --serial install:*",
    "main:start": "npm-run-all --parallel start:*",
    "main:build": "npm-run-all --parallel build:*",
    "main:zhejiang": "npm-run-all --parallel \"start:* -- --mode zhejiang\"",
    "main:build:zhejiang": "npm-run-all --parallel \"build:* -- --mode zhejiang.build\"",
    "main:changzhou": "npm-run-all --parallel \"start:* -- --mode changzhou\"",
    "main:build:changzhou": "npm-run-all --parallel \"build:* -- --mode changzhou.build\"",
    "main:shanxi": "npm-run-all --parallel \"start:* -- --mode shanxi\"",
    "main:build:shanxi": "npm-run-all --parallel \"build:* -- --mode shanxi.build\"",
    "main:shandong": "npm-run-all --parallel \"start:* -- --mode shandong\"",
    "main:build:shandong": "npm-run-all --parallel \"build:* -- --mode shandong.build\"",
    "main:lint": "npm-run-all --parallel lint:*",

    "install:framework": "cd pumpkin-fronted-framework && yarn",
    "start:framework": "cd pumpkin-fronted-framework && yarn run serve",
    "build:framework": "cd pumpkin-fronted-framework && yarn run build",
    "lint:framework": "cd pumpkin-fronted-framework && yarn run lint",

    "install:portal": "cd pumpkin-vue-portal && yarn",
    "start:portal": "cd pumpkin-vue-portal && yarn run serve",
    "build:portal": "cd pumpkin-vue-portal && yarn run build",
    "lint:portal": "cd pumpkin-vue-portal && yarn run lint",

    "install:cloud": "cd pumpkin-vue-cloud && yarn",
    "start:cloud": "cd pumpkin-vue-cloud && yarn run serve",
    "build:cloud": "cd pumpkin-vue-cloud && yarn run build",
    "lint:cloud": "cd pumpkin-vue-cloud && yarn run lint",

    "install:mall": "cd pumpkin-vue-mall && yarn",
    "start:mall": "cd pumpkin-vue-mall && yarn run serve",
    "build:mall": "cd pumpkin-vue-mall && yarn run build",
    "lint:mall": "cd pumpkin-vue-mall && yarn run lint"
  },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值