Vue2 + EMP 五分钟实现微前端

·  阅读 552
Vue2 + EMP 五分钟实现微前端

前言

开发过程中,不同业务项目只存在小部分差异,绝大部分代码是高度重合的。在这种情况下,最简单的做法是把上一个项目复制粘贴一份,基于上一个项目继续开发,但是这样会存在大量的重复代码,更新一个通用模块需要反复修改多个项目,不容易维护且容易出错。

在用微前端之前,大部分方式是,使用拆包把公共代码抽离成一个独立的 npm module,让不同的业务项目引用该 npm 包。但是这样的做法带来两个不便:

  1. 每当公共代码库更新时,需要每个项目重新安装。
  2. 拆包需要一定工作量,需要把可复用模块从业务项目抽离到一个新的 package。

如果我们用EMP微前端的方式实现,可以解决npm带来方法。在保证项目高复用高解耦的情况下,还提高开发效率。

1. 要做一个基于 Vue2 的微前端项目

实现一个基于 Vue 的微前端架构

  • 可以共享组件

  • 能自动更新共享组件改动

  • 使用简单

  • 好维护

  • 对原有项目改动小

2. 设计一个基于 Vue2 的微前端

包含以下两部分:

  • 承载公共的组件、函数等部分的项目。

  • 承载业务的组件、函数等部分的项目。

image.png

3. 动手实现

3.1. 创建项目

创建承载公共的组件、函数等部分的项目

在命令行用 emp-cli 的 init 命令,执行以下命令:

npx @efox/emp-cli init

输入项目名,再选择vue2-base,公共部分放在 base 项目,后续按提示操作image.png

npm run dev 或 yarn dev启动项目后可见: image.png

创建承载业务的组件、函数等部分的项目

再次在命令行用 emp-cli 的 init 命令,执行以下命令::

npx @efox/emp-cli init

  • 输入项目名,选择vue2-project,业务部分放在 project 项目,后续按提示操作image.png

npm run dev 或 yarn dev 启动项目后可见: image.png

项目迁移

如果是现有项目迁移,请参考:@vue/cli Vue2 模版迁移到微前端 EMP

3.2 承载公共部分的项目开发

承载公共部分的项目是一个独立项目,核心思想是将本项目的组件、函数等暴露,可供外部项目使用。

打开刚刚创建的base项目:

image.png

首先,emp-cli 生成出来的 vue2 项目与用 vue-cli 生成 Vue2 项目区别不大,所以开发习惯上没有任何改变。

不同之处是,本项目可以暴露组件、函数等内容供外部项目使用。这样说,可能还是云里雾里。

暴露本项目组件只需要两步,以 Content 组件(位于 src/components/Content.vue )为例,

  1. 需要找到 mf 的配置文件,mf 配置目录位于根目录的 emp_config, mf 开发环境配置 emp_config/mf-development.js,mf 生产环境配置 emp_config/mf-production.js

  2. 在 mf 配置的 exposes 中定义暴露的别名和该组件的相对路径:


module.exports = {

name: 'vue2Base',

filename: 'emp.js',

remotes: {},

exposes: {

'./Content': './src/components/Content',

// '组件别名' : '组件相对路径'

},

shared: ['vue/dist/vue.esm.js'],

}

复制代码

经过以上三步之后, base 的 Content 的组件已经可供其他项目调用。

3.3 承载业务部分的项目开发

承载业务部分的项目是一个独立项目,核心思想是引入 base 的组件、函数等,高效复用 base 内容。

上一节快速地介绍如果在 base 项目上暴露一个 Vue 组件,本节着重讨论如何引入一个 base 组件。

打开project项目,同样是与 vue-cli 生成 Vue2 项目区别不大:

image.png

可以发现项目引用的 Content 组件是不存在于本项目,是引用 base 项目所暴露的 Content 组件。可是引用方式与本地代码一样。

引入公共项目的组件只需要两步,以引入上一节公共部分的项目暴露的 Content 组件为例,

  1. 需要找到 mf 的配置文件,mf 配置目录位于根目录的 emp_config, mf 开发环境配置 emp_config/mf-development.js,mf 生产环境配置 emp_config/mf-production.js

  2. 在 mf 配置的 remotes 中定义引用别名和 base 的名称、地址:


module.exports = {

name: 'vue2Base',

filename: 'emp.js',

remotes: {

'@v2b': 'vue2Base@http://localhost:8009/emp.js',

// ' base 别名' : ' base 名称'@base项目 emp.js 地址

},

exposes: {},

shared: ['vue/dist/vue.esm.js'],

}

复制代码
  1. 把 Content 当作一个项目内部组件引入

import Content from "@v2b/Content"

// import 组件名 from " base 别名/组件名"

复制代码
  1. 当作普通组件使用

<template>

<div class="main">

<h1>Project App</h1>

<img :src="require('./logo.png')" alt="logo" />

<Content />

</div>

</template>

<script>

import Content from "@v2b/Content"

// import 组件名 from " base 别名/组件名"

export default {

components: {

Content

},

};

</script>

复制代码

到这里,已经把 base 项目的 Content 组件引入到了 project 项目

image.png

4. 总结

  1. 快速,使用 EMP 可以快速把 Vue2 项目改造成微前端项目。

  2. 学习成本低,仅了解 mf 的配置即可

  3. 完善的配套,成熟的生态。

  4. mf 使用总结

  • exposes:暴露项目内容到外部

  • remote:引入外部项目暴露内容

  • share: 共享库实例

分类:
前端
分类:
前端