npm install @originjs/vite-plugin-federation --save-dev or yarn add @originjs/vite-plugin-federation --dev Usage Using theModule Federationusually requires more than 2 projects, one as thehost sideand one as theremote side. Step 1: Configure the remote side. ...
Vite plugin for Module Federation. Latest version: 1.1.2, last published: 2 months ago. Start using module-federation-vite in your project by running `npm i module-federation-vite`. There are no other projects in the npm registry using module-federation-
基于vite的优势,社区贡献了vite-plugin-federation,可以让我们在本地模块使用远程模块的纯js组件,用以抽取一些公共组件、小团队开发一些相对独立的功能,完成独立部署并提供给其他本地模块使用。 接下来以vue3为例,看一下如何开发、配置和使用vite-plugin-federation来达成我们的想法。 安装vite并创建vue3项目 vite-plugi...
参考链接https://github.com/originjs/vite-plugin-federation/blob/main/README-zh.md,里面也有dome可以进行查看 webpack也有这个插件,比vite好用,vite不支持本地,必须要打包后开启服务才可以 先下载(只要用到的项目都需要进行下载) npm install @originjs/vite-plugin-federation --save-dev 1、新建两个vite+v...
微前端领域是一个很不错的选择,而且vite-plugin-federation 可以直接与webpack 的构建兼容,对于使用不同构建工具的团队是一个 不错的选择,有利于前端模块化开发,实际上我们同时结合组件仓库也可以解决资源加载的问题(比如unpkg,或者结合npm tag ) 说明 目前已经有不少团队基于模块联邦进行微前端的开发处理了,vite-plu...
vite-plugin-federation是一款为vite提供,用于支持多个独立构建的应用可以将自己的部分能力作为组件提供出来,组成一个应用程序。他们之间不存在相互依赖,可以进行独立的开发和部署。灵感来源于webpack 5提供的Module Federation特性。 虽然这款插件还在告诉成长的过程中,也已经过得了vite社区的关注,并收录进了其框架插件中...
npm install @originjs/vite-plugin-federation --save-dev or Usage Using theModule Federationusually requires more than 2 projects, one as thehost sideand one as theremote side. Step 1: Configure the remote side. for a vite project, modifyvite.config.js: ...
npm install 1. 最后,从以下位置开始您的应用程序: 复制 npm run dev 1. 您的应用程序现在应该在浏览器中运行,您应该会看到类似于下图的输出: 图片 使用Vike 和 vite-plugin-federation 进行微前端 Vike 不能仅用于构建微前端;它必须与模块联合插件集成,该插件允许您在不同的应用程序之间共享组件和状态。在 Vi...
微前端领域是一个很不错的选择,而且vite-plugin-federation 可以直接与webpack 的构建兼容,对于使用不同构建工具的团队是一个 不错的选择,有利于前端模块化开发,实际上我们同时结合组件仓库也可以解决资源加载的问题(比如unpkg,或者结合npm tag ) 说明 目前已经有不少团队基于模块联邦进行微前端的开发处理了,vite-plu...
new ModuleFederationPlugin({ //远程组件的应用名称 name: 'app2', // 远程组件的入口文件 filename: 'remoteEntry.js', // 定义需要导出的组件列表 exposes: { './App': './src/App', './Component': './src/component', }, // 可以被共享的模块 ...