简体中文 | English

vite-micro - Micro front-end framework

Based on the vite micro application architecture, each micro application is equivalent to a micro service, providing micro component APIs for mutual invocation. The underlying layer is based on @ originjs/vite plugin education. The invocation and execution methods of microcomponents follow the concept of module federation, with two execution methods: development and production. The vite-micro front-end framework adopts the front-end architecture of Monorapo in the project, which only requires starting the root server once in the outer layer, and subsequent micro applications can be automatically started as needed.

The running effect

1. production：

cd example

pnpm && pnpm run build

node server.mjs

2. development：

cd example

pnpm && pnpm run start

Install

npm install vite-micro

Or

yarn add vite-micro

How to Use

The vite-micro front-end framework needs to adopt the Monorapo project structure, which can be referenced in the example project conclusion， There are usually two or more micro applications in packages, one as the Host side and one as the Remote side.

Step 1: Configure exposed modules on the Remote side

// vite.config.js
import { federation } from 'vite-micro/node'
export default {
  build: {
    // If there is a top level await issue, you need to use import topLevelAwait from 'vite plugin top level await'
    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
    // Output Directory
    outDir: `${path.resolve(__dirname, '../../dist')}`,
    // Resource storage directory
    assetsDir: `assets/user/${packageJson.version}`,
  },
  plugins: [
    federation({
      mode
      // Modules that need to be exposed,
      // The list of components exposed by remote modules to the public is mandatory for remote modules
      exposes: {
        Button: './src/Button.vue',
        entry: './src/bootstrap.ts',
      },
      shared: ['vue'],
    }),
  ],
}

• The "bootstrap.ts" corresponding to the entry here comes from "main.ts" (the entry file of the project). If there are the following configurations, "bootstrap.ts" needs to be used, otherwise conflicting errors will occur

rollupOptions: {
  input: main: `${path.resolve(__dirname, './src/main.ts')}`,
}
// bootstrap.ts
export { mount, unMount } from './main'

Step 2: Configure the application entry file on the Remote side (if the Host side needs to call the Remote micro application)

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

let app: any = null
export async function mount(name: string, base: string) {
  app = createApp(App)

  // Other configurations......

  app.mount(name)

  console.log('start mount!!!', name)

  return app
}

export function unMount() {
  console.log('start unmount --->')
  app && app.$destroy()
}

• After receiving the Remote micro application entry file, the host side will execute the mount method inside to initialize and mount the micro application
• mExport according to the conventions of the mount method and unmount method

Step 3: Configure exposed modules on the host side

// vite.config.js
import { federation } from 'vite-micro/node'
export default {
  build: {
    // If there is a top level await issue, you need to use import topLevelAwait from 'vite plugin top level await'
    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
    // Output Directory
    outDir: `${path.resolve(__dirname, '../../dist')}`,
    // Resource storage directory
    assetsDir: `assets/main/${packageJson.version}`,
  },
  plugins: [
    federation({
      mode
      remotes: {
        loginRemote: {
          url: `/assets/login`,
        },
        userRemote: {
          url: '/assets/user',
        },
      },
      shared: ['vue'],
    }),
  ],
}

Step 4: Using Remote Modules on the Host Side

• Using micro components

import { createApp, defineAsyncComponent } from "vue";
import { remoteImport } from 'vite-micro/client'
const app = createApp(Layout);
...
const RemoteButton = defineAsyncComponent(() => remoteImport("remote_app/Button"));
app.component("RemoteButton", RemoteButton);
app.mount("#root");

• Using micro application entry

import { entryImportVue, remoteImport } from 'vite-micro/client'

const mainRoute = [
  {
    path: '/home',
    component: () => import('../../views/Home.vue'),
  },
  {
    path: '/user',
    component: () => entryImportVue('remote_app/entry'),
  },
  {
    path: '/button',
    component: () => remoteImport('remote_app/Button'),
  },
]

• EntryImportVue ('remote_app/entry ') is essentially a microcomponent that can also be called using the microcomponent method
• For scripts exposed by the Remote module, sometimes they are not Vue components, may be React components or other, or may be entry files for remote applications. This type of script is clearly not directly consumed by the Host module Vue project. The entryImportVue internal uses a simple Vue component to wrap these scripts together to form a component that can be directly used in the Vue project
• For remote components that can be directly referenced by the Host module, simply use remoteImport

Version management

• There are two ways to remotely introduce version control for components, with the latest version being introduced by default

remotes: {
    // By default, “the remoteEntries.js” file of the loginRemote application will be introduced, which will load the latest version of the remoteEntry file of the application
    'loginRemote': {
      url: `/assets/login`
    },
    // Will import '/assets/login/0.0.1/remoteEntry. js' as the entry file
    'userRemote': {
      url: `/assets/login`,
      filename: '0.0.1/remoteEntry.js'
    },
}

Configuration Item Description

mode：string

• Control development mode or production mode, required.

exposes

• As a remote module, the list of exposed components must be filled out by the remote module.

exposes: {
    // 'Name of exposed component': 'Address of exposed component'
    'Button': './src/components/Button.vue',
    'Section': './src/components/Section.vue'
}

remotes

Host side references the resource entry file configuration of the Remote side

url:string

• Remote module address, for example: /sets/login https://localhost:5011, this configuration is required
• The URL internally generates an external address, ${URL}/remoteEntries. js, which will be used as the entry address for the remote module
• The URL can be a relative address determined based on the packaging structure, or it can be a complete external address starting with http

remotes: {
    // '{Remote Module Name} Remote': 'Remote Module Entry File Address'
    'loginRemote': {
      url: `/assets/login`
    },
}

devUrl:string

• Remote module development environment address, for example: '/sets/login'https://localhost:5011, this configuration is not required
• If devUrl is not configured, it defaults to the URL address or the relative path of the project
• ******When the URL is a relative address and devUrl is not configured, the format of the remote module name needs to be specified as {Remote Module Name} Remote. In the development environment, the remote module entry address will be generated based on the remote module name

remotes: {
    // '{Remote Module Name} Remote': 'Remote Module Entry File Address'
    'loginRemote': {
      url: `https://www.vite-micro.com`,
      devUrl: `https://localhost:5011`
    },
}

filename：string

• As the entry file for the remote module, it is not required and defaults to 'remoteEntries.js'. Please refer to version management for specific usage methods

shared

The shared dependencies between the Host and Remote modules. The host module needs to configure the dependencies of all remote modules used; The remote module needs to configure dependencies on externally provided components.

• It is an array, which can be ['vue ',...], or [{...}]

name: string

• The name of the shared component, required

requiredVersion: string

• Only effective for the remote module, specifying the required version of the host shared used. When the version of the host module does not meet the 'required Version' requirements, the shared module will be used, and this feature will not be enabled by default

Browsers support

Modern browsers does not support IE browser

| IEdge / IE | Firefox | Chrome | Safari | | ---------- | --------------- | --------------- | --------------- | | Edge | last 2 versions | last 2 versions | last 2 versions |

其他

• The remote footsteps currently loaded do not support sandbox functionality, and the code needs to be constrained by specifications.

• If you agree with this framework and find it helpful to you, I hope you can give me a star ^_^

• If this framework brings value to your work career, I hope you can give me some donations, as it is not easy to create.