Vue-cli-plugin-mfsu NPM

vue-cli-plugin-mfsu

vue-cli support mfsu

要求 requires

🛠 Vue CLI version v5.x (support Webpack 5)

思路 ideas

vue-cli没有暴露过多的hooks去进行自定义的操作，因此需要修改(copy)cli-service serve进行Module Federation的操作注入。
vue-cli默认生成的babel配置项@vue/cli-plugin-babel/preset，需要设置@babel/preset-env的参数：{useBuiltIns: false}以关闭自动注入的polyfill，以避免MF生成自动注入的依赖。参考：Babel @vue/cli-plugin-babel/preset
一些babel动态语法的插件也有可能会造成冲突，如babel-plugin-dynamic-import-node。

插件 plugins

@umijs/mfsu (当前使用) Github 使用文档
alibaba/ice 不通用，需魔改支持vue Github 配置说明

安装 install

检查 Vue CLI 版本，见升级 Vue CLI 服务及插件
🔨 安装本项目
```
yarn add vue-cli-plugin-mfsu -D
```
🔨 安装 patch-package
```
yarn add patch-package -D
```
🛠 打补丁以支持 @umijs/mfsu

@umijs/bundler-esbuild/dist/plugins/style.js

diff --git a/node_modules/@umijs/bundler-esbuild/dist/build.js b/node_modules/@umijs/bundler-esbuild/dist/build.js
index e318be8..9a72666 100644
--- a/node_modules/@umijs/bundler-esbuild/dist/build.js
+++ b/node_modules/@umijs/bundler-esbuild/dist/build.js
@@ -54,6 +54,7 @@ async function build(opts) {
return await (0, import_esbuild.build)({
    entryPoints: opts.entry,
    bundle: true,
+    banner: { js: '"use strict";' },
    format: opts.format || "iife",
    logLevel: "error",
    sourcemap: opts.sourcemap,

@umijs/mfsu/dist/loader/esbuild.js

diff --git a/node_modules/@umijs/mfsu/dist/loader/esbuild.js b/node_modules/@umijs/mfsu/dist/loader/esbuild.js
index a5b0c61..d648218 100644
--- a/node_modules/@umijs/mfsu/dist/loader/esbuild.js
+++ b/node_modules/@umijs/mfsu/dist/loader/esbuild.js
@@ -64,7 +64,7 @@ async function esbuildTranspiler(source) {
const ext = (0, import_path.extname)(filePath).slice(1);
const transformOptions = __spreadProps(__spreadValues({}, otherOptions), {
    target: options.target ?? "es2015",
-    loader: ext ?? "js",
+    loader: ext !== null && ext !== void 0 ? ext === 'vue' ? 'ts' : ext : 'js',
    sourcemap: this.sourceMap,
    sourcefile: filePath
});

🛠 更改配置 babel.config.js

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    env: {
        development: {
        presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: false, targets: { chrome: 100 } }]]
        }
    }
}