基于lerna和single-spa, sysyem.js搭建 vue 的微前端框架

授权转载自：mongofeng 

源码地址：https://github.com/mongofeng/vue-mic

为什么要用微前端

目前随着前端的不断发展，企业工程项目体积越来越大，页面越来越多，项目变得十分臃肿，维护起来也十分困难，有时我们仅仅更改项目简单样式，都需要整个项目重新打包上线，给开发人员造成了不小的麻烦，也非常浪费时间。老项目为了融入到新项目也需要不断进行重构，造成的人力成本也非常的高。

微前端架构具备以下几个核心价值：

• 技术栈无关 主框架不限制接入应用的技术栈，子应用具备完全自主权

• 独立开发、独立部署 子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 独立运行时 每个子应用之间状态隔离，运行时状态不共享

single-spa实现原理

首先对微前端路由进行注册，使用single-spa充当微前端加载器，并作为项目单一入口来接受所有页面URL的访问，根据页面URL与微前端的匹配关系，选择加载对应的微前端模块，再由该微前端模块进行路由响应URL，即微前端模块中路由找到相应的组件，渲染页面内容。

sysyem.js的作用及好处

system.js的作用就是动态按需加载模块。假如我们子项目都使用了vue,vuex,vue-router，每个项目都打包一次，就会很浪费。system.js可以配合webpack的externals属性，将这些模块配置成外链，然后实现按需加载,当然了，你也可以直接用script标签将这些公共的js全部引入，借助system.js这个插件，我们只需要将子项目的app.js暴露给它即可。

什么是Lerna

当前端项目变得越来越大的时候，我们通常会将公共代码拆分出来，成为一个个独立的npm包进行维护。但是这样一来，各种包之间的依赖管理就十分让人头疼。为了解决这种问题，我们可以将不同的npm包项目都放在同一个项目来管理。这样的项目开发策略也称作monorepo。Lerna就是这样一个你更好地进行这项工作的工具。Lerna是一个使用git和npm来处理多包依赖管理的工具,利用它能够自动帮助我们管理各种模块包之间的版本依赖关系。目前，已经有很多公共库都使用Lerna作为它们的模块依赖管理工具了，如：babel, create-react-app, react-router, jest等。

1. 解决包之间的依赖关系。

2. 通过git仓库检测改动，自动同步。

3. 根据相关的git提交的commit，生成CHANGELOG。

你还需要全局安装 Lerna：

npm install -g lerna

基于vue微前端项目搭建

1.项目初始化

mkdir lerna-project & cd lerna-project`

lerna init

执行成功后，目录下将会生成这样的目录结构。

├── README.md
├── lerna.json  # Lerna 配置文件
├── package.json
├── packages    # 应用包目录

2.Set up yarn的workspaces模式

默认是npm, 而且每个子package都有自己的node_modules，通过这样设置后，只有顶层有一个node_modules

{
  "packages": [
    "packages/*"
  ],
  "useWorkspaces": true,
  "npmClient": "yarn",
  "version": "0.0.0"
}

同时package.json 设置 private 为 true，防止根目录被发布到 npm：

{
 "private": true,
 "workspaces": [
    "packages/*"
 ]
}

配置根目录下的 lerna.json 使用 yarn 客户端并使用 workspaces

yarn config set workspaces-experimental true

3.注册子应用

第一步:使用vue-cli创建子应用

# 进入packages目录
cd packages

# 创建应用
vue create app1

// 项目目录结构
├── public
├── src
│   ├── main.js
│   ├── assets
│   ├── components
│   └── App.vue
├── vue.config.js
├── package.json
├── README.md
└── yarn.lock

第二步：使用vue-cli-plugin-single-spa插件快速生成spa项目

# 会自动修改main.js加入singleSpaVue，和生成set-public-path.js
vue add single-spa

生成的main.js文件

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    // el: '#app', // 没有挂载点默认挂载到body下
    render: (h) => h(App),
    router,
    store: window.rootStore,
  },
});

export const bootstrap = [
  vueLifecycles.bootstrap
];
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

第三步：设置环境变量.env

# 应用名称
VUE_APP_NAME=app1
# 应用根路径，默认值为: '/'，如果要发布到子目录，此值必须指定
VUE_APP_BASE_URL=/
# 端口，子项目开发最好设置固定端口， 避免频繁修改配置文件，设置一个固定的特殊端口，尽量避免端口冲突。
port=8081

第四步：设置vue.config.js修改webpack配置

const isProduction = process.env.NODE_ENV === 'production'
const appName = process.env.VUE_APP_NAME
const port = process.env.port
const baseUrl = process.env.VUE_APP_BASE_URL
module.exports = {
  // 防止开发环境下的加载问题
  publicPath: isProduction ? `${baseUrl}${appName}/` : `http://localhost:${port}/`,

    // css在所有环境下，都不单独打包为文件。这样是为了保证最小引入（只引入js）
    css: {
        extract: false
    },

  productionSourceMap: false,

  outputDir: path.resolve(dirname, `../../dist/${appName}`), // 统一打包到根目录下的dist下
  chainWebpack: config => {
    config.devServer.set('inline', false)
    config.devServer.set('hot', true)

    // 保证打包出来的是一个js文件，供主应用进行加载
    config.output.library(appName).libraryTarget('umd')

    config.externals(['vue', 'vue-router', 'vuex'])  // 一定要引否则说没有注册

    if (process.env.NODE_ENV === 'production') {
      // 打包目标文件加上 hash 字符串，禁止浏览器缓存
      config.output.filename('js/index.[hash:8].js')
    }
  },
}

4.新建主项目

第一步：添加主项目package

# 进入packages目录
cd packages
# 创建一个packge目录, 进入root-html-file目录
mkdir root-html-file && cd root-html-file
# 初始化一个package
npm init -y

第二步：新建主项目index.html

主应用主要是扮演路由分发，资源加载的作用的角色

  

第三步：编辑importMapjson文件,配置对应子应用的文件

{
  "imports": {
    "navbar": "http://localhost:8888/js/app.js",
    "app1": "http://localhost:8081/js/app.js",
    "app2": "http://localhost:8082/js/app.js",
    "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
    "vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js",
    "vue-router": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js",
    "vuex": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"
  }
}

到时systemjs可以直接去import，具体作用参考systemjs

第四步：注册app应用

singleSpa.registerApplication(
  'navbar', // systemjs-webpack-interop, 去匹配应用的名称
  () => System.import('navbar'), // 资源路径
  location => location.hash.startsWith('#/navbar') // 资源激活的
)


// 注册子应用
singleSpa.registerApplication(
  'app1', // systemjs-webpack-interop, 去匹配子应用的名称
  () => System.import('app1'), // 资源路径
  location => location.hash.startsWith('#/app1') // 资源激活的
)


singleSpa.registerApplication(
  'app2', // systemjs-webpack-interop, 去匹配子应用的名称
  () => System.import('app2'), // 资源路径
  location => location.hash.startsWith('#/app2') // 资源激活的
)
// 开始singleSpa
singleSpa.start();

第五步：项目开发

项目的基本目录结构如下：

.
├── README.md
├── lerna.json  # Lerna 配置文件
├── node_modules
├── package.json
├── packages    # 应用包目录
│   ├── app1    # 应用1
│   ├── app2    # 应用2
│   ├── navbar   # 主应用
│   └── root-html-file  # 入口
└── yarn.lock

如上图所示，所有的应用都存放在 packages 目录中。其中 root-html-file 为入口项目，navbar 为常驻的主应用，这两者在开发过程中必须启动相应的服务。其他为待开发的子应用。

项目的优化

抽取子应用资源配置

在主应用中抽取所有的子应用到一个通用的app.config.json文件配置

{
  "apps": [
    {
      "name": "navbar", // 应用名称
      "main": "http://localhost:8888/js/app.js", // 应用的入口
      "path": "/", // 是否为常驻应用
      "base": true, // 是否使用history模式
      "hash": true // 是否使用hash模式
    },
    {
      "name": "app1",
      "main": "http://localhost:8081/js/app.js",
      "path": "/app1",
      "base": false,
      "hash": true
    },
    {
      "name": "app2",
      "main": "http://localhost:8082/js/app.js",
      "path": "/app2",
      "base": false,
      "hash": true
    }
  ]
}

主应用的入口文件中注册子应用

try {
    // 读取应用配置并注册应用
    const config = await System.import(`/app.config.json`)
    const { apps } = config.default
    apps && apps.forEach((app) => registerApp(singleSpa, app))
    singleSpa.start()
  } catch (e) {
    throw new Error('应用配置加载失败')
  }

/**
 * 注册应用
 * */
function registerApp (spa, app) {
  const activityFunc = app.hash ? hashPrefix(app) : pathPrefix(app)
  spa.registerApplication(
    app.name,
    () => System.import(app.main),
    app.base ? (() => true) : activityFunc,
  )
}


/**
 * hash匹配模式
 * @param app 应用配置
 */
 function hashPrefix (app) {
  return function (location) {
    if (!app.path) return true

    if (Array.isArray(app.path)) {
      if (app.path.some(path => location.hash.startsWith(`#${path}`))) {
        return true
      }
    } else if (location.hash.startsWith(`#${app.path}`)) {
      return true
    }

    return false
  }
}

/**
 * 普通路径匹配模式
 * @param app 应用配置
 */
function pathPrefix (app) {
  return function (location) {
    if (!app.path) return true

    if (Array.isArray(app.path)) {
      if (app.path.some(path => location.pathname.startsWith(path))) {
        return true
      }
    } else if (location.pathname.startsWith(app.path)) {
      return true
    }

    return false
  }
}

所有子项目公用一个使用vuex

在主项目index.html注册vuex的插件，通过window对象存储，子项目加载启动时候通过registerModule方式注入子应用的模块和自身的vue实例上

// 主应用的js中
Vue.use(Vuex)
window.rootStore = new Vuex.Store() // 全局注册唯一的vuex, 供子应用的共享


// 子应用的main.js
export const bootstrap = [
  () => {
    return new Promise(async (resolve, reject) => {
      // 注册当前应用的store
      window.rootStore.registerModule(VUE_APP_NAME, store)
      resolve()
    })
  },
  vueLifecycles.bootstrap
];
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

样式隔离

我们使用postcss的一个插件：postcss-selector-namespace。他会把你项目里的所有css都会添加一个类名前缀。这样就可以实现命名空间隔离。首先，我们先安装这个插件：npm install postcss-selector-namespace \--save \-d 项目目录下新建 postcss.config.js，使用插件：

// postcss.config.js

module.exports = {
  plugins: {
    // postcss-selector-namespace: 给所有css添加统一前缀，然后父项目添加命名空间
    'postcss-selector-namespace': {
      namespace(css) {
        // element-ui的样式不需要添加命名空间
        if (css.includes('element-variables.scss')) return '';
        return '.app1' // 返回要添加的类名
      }
    },
  }
}

然后父项目添加命名空间

// 切换子系统的时候给body加上对应子系统的 class namespace
window.addEventListener('single-spa:app-change', () => {
  const app = singleSpa.getMountedApps().pop();
  const isApp = /^app-\w+$/.test(app);
  if (app) document.body.className = app;
});

利用manifest生成app.config.json和importMapjson

stats-webpack-plugin可以在你每次打包结束后，都生成一个manifest.json 文件，里面存放着本次打包的 public_path bundle list chunk list 文件大小依赖等等信息。可以根据这个信息来生成子应用的app.config.json路径和importMapjson.

npm install stats-webpack-plugin --save -d

在vue.config.js中使用：

{
    configureWebpack: {
        plugins: [
            new StatsPlugin('manifest.json', {
                chunkModules: false,
                entrypoints: true,
                source: false,
                chunks: false,
                modules: false,
                assets: false,
                children: false,
                exclude: [/node_modules/]
            }),
        ]
    }
}

打包完成最后通过脚本generate-app.js生成对应,子应用的json路径和importMapjson

const path = require('path')
const fs = require('fs')
const root = process.cwd()
console.log(`当前工作目录是: ${root}`);
const dir = readDir(root)
const jsons = readManifests(dir)
generateFile(jsons)

console.log('生成配置文件成功')


function readDir(root) {
  const manifests = []
  const files = fs.readdirSync(root)
  files.forEach(i => {
    const filePath = path.resolve(root, '.', i)
    const stat = fs.statSync(filePath);
    const is_direc = stat.isDirectory();

    if (is_direc) {
      manifests.push(filePath)
    }

  })
  return manifests
}


function readManifests(files) {
  const jsons = {}
  files.forEach(i => {
    const manifest = path.resolve(i, './manifest.json')
    if (fs.existsSync(manifest)) {
      const { publicPath, entrypoints: { app: { assets } } } = require(manifest)
      const name = publicPath.slice(1, -1)
      jsons[name] = `${publicPath}${assets}`
    }
  })

  return jsons

}



function generateFile(jsons) {
  const { apps } = require('./app.config.json')
  const { imports } = require('./importmap.json')
  Object.keys(jsons).forEach(key => {
    imports[key] = jsons[key]
  })
  apps.forEach(i => {
    const { name } = i

    if (jsons[name]) {
      i.main = jsons[name]
    }
  })

  fs.writeFileSync('./importmap.json', JSON.stringify(
    {
      imports
    }
  ))

  fs.writeFileSync('./app.config.json', JSON.stringify(
    {
      apps
    }
  ))

}

应用打包

在根目录执行build命令, packages里面的所有build命令都会执行,这会在根目录生成 dist 目录下,

lerna run build

最终生成的目录结构如下

.
├── dist
│   ├── app1/
│   ├── app2/
    ├── navbar/
│   ├── app.config.json
│   ├── importmap.json
│   ├── main.js
│   ├── generate-app.js
│   └── index.html

最后，执行以下命令生成 generate-app.js,重新生成带hash资源路径的importmap.json和app.config.json文件：

cd dist && node generate-app.js

文章中的完整demo文件地址,如果觉得有用的话给个star

参考文档

• lerna管理前端模块最佳实践

• lerna 和 yarn 实现 monorepo

• 从0实现一个single-spa的前端微服务（中）

• Single-Spa + Vue Cli 微前端落地指南 + 视频 (项目隔离远程加载，自动引入)

• Single-Spa微前端落地（含nginx部署）

• 可能是你见过最完善的微前端解决方案

• coexisting-vue-microfrontends

最后

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！

欢迎关注「前端瓶子君」，回复「算法」自动加入，从0到1构建完整的数据结构与算法体系！

在这里（算法群），你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！

另外，每周还有手写源码题，瓶子君也会解答哟！

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持