vue-cli-plugin-mfsu

vue-cli support mfsu

要求 requires

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

思路 ideas

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

插件 plugins

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

安装 install

1. 检查 Vue CLI 版本，见 升级 Vue CLI 服务及插件

2. 🔨 安装本项目

   yarn add vue-cli-plugin-mfsu -D

3. 🔨 安装 patch-package

   yarn add patch-package -D

4. 🛠 打补丁以支持 @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
  });

4. 🛠 更改配置 babel.config.js

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

5. ⚡️ 运行 mfsu

   vue-cli-service serve:mfsu