Vue2 + EMP 五分钟实现微前端

Benny
2,121 阅读4分钟

前言

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

在用微前端之前，大部分方式是，使用拆包把公共代码抽离成一个独立的 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: 共享库实例

avatar
文章
阅读
粉丝