在 vue/cli 中使用 Module Federation
Posted 前端精髓
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在 vue/cli 中使用 Module Federation相关的知识,希望对你有一定的参考价值。
在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发。多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。这通常被称作微前端,但并不仅限于此。
我们分为本地模块、远程模块。
其中本地模块即为普通模块,是当前构建的一部分;而远程模块不属于当前构建,并在运行时从所谓的容器加载。
加载远程模块被认为是异步操作。当使用远程模块时,这些异步操作将被放置在远程模块和入口之间的下一个chunk的加载操作中。如果没有chunk加载操作,就不能使用远程模块。
chunk的加载操作通常是通过调用import()实现的,但也支持像 require.ensure或require([…])之类的旧语法。
容器是由容器入口创建的,该入口暴露了对特定模块的异步访问。暴露的访问分为两个步骤:
步骤1:加载模块(异步的)
步骤2:执行模块(同步的)
步骤1将在chunk加载期间完成。步骤2将在与其他(本地和远程)的模块交错执行期间完成。这样一来,执行顺序不受模块从本地转换为远程或从远程转为本地的影响。
容器可以嵌套使用,容器可以使用来自其他容器的模块。容器之间也可以循环依赖。
在 vue/cli 中使用 Module Federation,使用只需以下几个步骤:
home 项目
// vue.config.js
module.exports = {
publicPath: 'http://localhost:8084/',
chainWebpack: (config) => {
config
.plugin('module-federation-plugin')
.use(require('webpack').container.ModuleFederationPlugin, [{
name: "home", // 模块名称
filename: "remoteEntry.js",
exposes: { // 对外暴露的组件
'./HelloWorld': './src/components/HelloWorld.vue'
},
}])
},
devServer: {
port: 8084,
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
}
}
}
app 项目
// vue.config.js
module.exports = {
publicPath: 'http://localhost:8085/',
chainWebpack: (config) => {
config
.plugin('module-federation-plugin')
.use(require('webpack').container.ModuleFederationPlugin, [{
name: "app",
remotes: { // 导入
home: 'home@http://localhost:8084/remoteEntry.js',
},
}])
},
devServer: {
port: 8085,
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
}
}
}
使用组件
// 使用 home 项目里面的组件
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="1111"/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
HelloWorld: () => import('home/HelloWorld')
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
以上是关于在 vue/cli 中使用 Module Federation的主要内容,如果未能解决你的问题,请参考以下文章
yarn run serve报错Error: Cannot find module ‘@vue/cli-plugin-babel‘ 的解决办法