create-module-federation 0.0.0 → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present hanric(2heal1)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+<p align="center">
+  <a href="https://module-federation.io/" target="blank"><img src="https://module-federation.io/module-federation.svg" alt="Module Federation 2.0" /></a>
+</p>
+
+# create-module-federation
+
+Create a new Module Federation project.
+
+<p>
+  <a href="https://npmjs.com/package/create-module-federation">
+   <img src="https://img.shields.io/npm/v/create-module-federation?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
+  <a href="https://npmcharts.com/compare/create-module-federation?minimal=true"><img src="https://img.shields.io/npm/dm/create-module-federation.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
+</p>
+
+## Usage
+
+Using `npm create`:
+
+```bash
+npm create module-federation@latest
+```
+
+Using CLI flags:
+
+```bash
+npx create-module-federation --dir my-project --template provider-modern --name provider
+
+# Using abbreviations
+npx create-module-federation -d my-project -t provider-modern -n provider
+```
+
+## Documentation
+
+See [Documentation](https://module-federation.io/guide/start/quick-start).
+
+## License
+
+[MIT](https://github.com/module-federation/core/blob/main/LICENSE).

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present hanric(2heal1)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,366 @@
+#!/usr/bin/env node
+import * as __WEBPACK_EXTERNAL_MODULE_path__ from "path";
+import * as __WEBPACK_EXTERNAL_MODULE_fs__ from "fs";
+import * as __WEBPACK_EXTERNAL_MODULE_child_process__ from "child_process";
+import * as __WEBPACK_EXTERNAL_MODULE_url__ from "url";
+import * as __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__ from "@clack/prompts";
+import * as __WEBPACK_EXTERNAL_MODULE_minimist__ from "minimist";
+import * as __WEBPACK_EXTERNAL_MODULE_rslog__ from "rslog";
+import * as __WEBPACK_EXTERNAL_MODULE_glob__ from "glob";
+import * as __WEBPACK_EXTERNAL_MODULE_fs_extra_ce68a66b__ from "fs-extra";
+import * as __WEBPACK_EXTERNAL_MODULE_handlebars__ from "handlebars";
+const IMAGE_EXT_LIST = [
+    '.jpg',
+    '.jpeg',
+    '.png',
+    '.gif',
+    '.bmp',
+    '.ico',
+    '.icon',
+    '.mpt',
+    '.psd',
+    '.wmf'
+];
+const FS_RESOURCE = '_mf_fs_resource';
+class FsResource {
+    constructor(filePath, resourceKey){
+        this._type = FS_RESOURCE;
+        this.filePath = filePath;
+        this.resourceKey = resourceKey;
+    }
+    async value() {
+        const resourceFileExt = __WEBPACK_EXTERNAL_MODULE_path__["default"].extname(this.filePath);
+        if (IMAGE_EXT_LIST.includes(resourceFileExt)) {
+            const buffer = await __WEBPACK_EXTERNAL_MODULE_fs_extra_ce68a66b__["default"].readFile(__WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(this.filePath));
+            return {
+                content: buffer
+            };
+        }
+        const text = await __WEBPACK_EXTERNAL_MODULE_fs_extra_ce68a66b__["default"].readFile(__WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(this.filePath), 'utf8');
+        return {
+            content: text
+        };
+    }
+}
+const promisifyGlob = (pattern, options)=>new Promise((resolve, reject)=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_glob__["default"])(pattern, options, (err, files)=>null === err ? resolve(files) : reject(err));
+    });
+class FsMaterial {
+    constructor(basePath){
+        this.basePath = basePath;
+    }
+    get(resourceKey) {
+        return new FsResource(__WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(this.basePath, resourceKey), resourceKey);
+    }
+    async find(globStr, options) {
+        const matches = await promisifyGlob(globStr, {
+            cwd: __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(this.basePath),
+            nodir: options?.nodir,
+            dot: options?.dot,
+            ignore: options?.ignore
+        });
+        return matches.reduce((pre, cur)=>{
+            pre[cur] = new FsResource(__WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(this.basePath, cur), cur);
+            return pre;
+        }, {});
+    }
+}
+function renderString(template, fullData) {
+    return __WEBPACK_EXTERNAL_MODULE_handlebars__["default"].compile(template)(fullData) || '';
+}
+async function outputFs(file, content, outputPath, options) {
+    const filePath = __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(outputPath, file.toString());
+    await __WEBPACK_EXTERNAL_MODULE_fs_extra_ce68a66b__["default"].mkdirp(__WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(filePath));
+    await __WEBPACK_EXTERNAL_MODULE_fs_extra_ce68a66b__["default"].writeFile(filePath, content, options);
+}
+class HandlebarsAPI {
+    async renderTemplate(templateResource, target, outputFilePath, parameters = {}) {
+        if (templateResource._type !== FS_RESOURCE) throw new Error('resource not match');
+        const resourceValue = await templateResource.value();
+        if ('string' != typeof resourceValue.content) throw new Error(`resource.value is not string, resourceValue=${resourceValue}`);
+        await outputFs(target, templateResource.resourceKey.endsWith('.handlebars') ? renderString(resourceValue.content, parameters) : resourceValue.content, outputFilePath, {
+            encoding: 'utf-8'
+        });
+    }
+    async renderTemplateDir(material, findGlob, target, outputFilePath, options) {
+        const resourceMap = await material.find(findGlob, {
+            nodir: true,
+            ...options
+        });
+        await Promise.all(Object.keys(resourceMap).map(async (resourceKey)=>{
+            await this.renderTemplate(material.get(resourceKey), target(resourceKey), outputFilePath, options?.parameters);
+        }));
+    }
+}
+const create_filename = (0, __WEBPACK_EXTERNAL_MODULE_url__.fileURLToPath)(import.meta.url);
+const create_dirname = __WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(create_filename);
+const packageDir = __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(create_dirname, '..');
+const OTHER_TYPE = {
+    zephyr: {
+        label: 'zephyr',
+        packageName: 'zephyr-apps@latest',
+        hint: 'create zephyr-apps@latest'
+    }
+};
+function upperFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function logHelpMessage(name, templates) {
+    __WEBPACK_EXTERNAL_MODULE_rslog__.logger.log(`
+   Usage: create-${name} [options]
+
+   Options:
+
+     -h, --help       display help for command
+     -d, --dir        create project in specified directory
+     -t, --template   specify the template to use
+     -n, --name       specify the mf name
+     -r, --role       specify the mf role type: provider or consumer
+     --override       override files in target directory
+
+   Templates:
+     ${templates.filter((t)=>!t.startsWith('zephyr')).join(', ')}
+`);
+}
+function pkgFromUserAgent(userAgent) {
+    if (!userAgent) return;
+    const pkgSpec = userAgent.split(' ')[0];
+    const pkgSpecArr = pkgSpec.split('/');
+    return {
+        name: pkgSpecArr[0],
+        version: pkgSpecArr[1]
+    };
+}
+function cancelAndExit() {
+    (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.cancel)('Operation cancelled.');
+    process.exit(0);
+}
+function checkCancel(value) {
+    if ((0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.isCancel)(value)) cancelAndExit();
+    return value;
+}
+function formatProjectName(input) {
+    const formatted = input.trim().replace(/\/+$/g, '');
+    return {
+        packageName: input,
+        targetDir: formatted
+    };
+}
+function isEmptyDir(path) {
+    const files = __WEBPACK_EXTERNAL_MODULE_fs__["default"].readdirSync(path);
+    return 0 === files.length || 1 === files.length && '.git' === files[0];
+}
+async function getAppTemplateName({ roleType, framework }, { template }) {
+    if (template) return `${template}-ts`;
+    return `${roleType}-${framework}-ts`;
+}
+async function getLibTemplateName({ template, role }) {
+    if (template) return `${template}-ts`;
+    const templateName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+        message: 'Select template',
+        options: [
+            {
+                value: 'rslib',
+                label: 'Rslib'
+            }
+        ]
+    }));
+    const tools = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.multiselect)({
+        message: 'Select development tools (Use <space> to select, <enter> to continue)',
+        required: false,
+        options: [
+            {
+                value: 'storybook',
+                label: 'Storybook'
+            }
+        ].filter(Boolean)
+    }));
+    const roleType = role || "provider";
+    if (!tools || !Object.keys(tools).length) return `${roleType}-${templateName}-ts`;
+    return `${roleType}-${templateName}-${tools[0]}-ts`;
+}
+function getTemplateName({ projectType, roleType, framework }, args) {
+    if ('app' === projectType) return getAppTemplateName({
+        roleType,
+        framework
+    }, args);
+    return getLibTemplateName(args);
+}
+function getTemplateDir(templateName) {
+    return `templates/${templateName}/`;
+}
+async function getProjectType(template) {
+    if (!template) return checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+        message: 'Please select the type of project you want to create:',
+        options: [
+            {
+                value: "app",
+                label: 'Application'
+            },
+            {
+                value: "lib",
+                label: 'Lib'
+            },
+            {
+                value: "zephyr",
+                label: 'Zephyr Powered (Learn more at https://zephyr-cloud.io)'
+            }
+        ]
+    }));
+    if (template.includes('lib')) return "lib";
+    return "app";
+}
+async function forgeTemplate({ projectType, argv, templateParameters, distFolder }) {
+    let framework = 'modern';
+    let roleType = "provider";
+    if (!argv?.template && 'app' === projectType) {
+        framework = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+            message: 'Select template',
+            options: [
+                {
+                    value: 'modern',
+                    label: 'Modern.js Framework'
+                },
+                {
+                    value: 'rsbuild',
+                    label: 'Rsbuild'
+                }
+            ]
+        }));
+        roleType = argv.role || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+            message: 'Please select the role of project you want to create:',
+            initialValue: 'provider',
+            options: [
+                {
+                    value: 'consumer',
+                    label: 'Consumer'
+                },
+                {
+                    value: 'provider',
+                    label: 'Provider'
+                }
+            ]
+        }));
+    }
+    const templateName = await getTemplateName({
+        projectType,
+        framework,
+        roleType
+    }, argv);
+    const material = new FsMaterial(packageDir);
+    const renderTemplate = async (templateDir)=>{
+        const templatePattern = `${templateDir}**/*`;
+        const resourceMap = await material.find(templatePattern, {
+            nodir: true,
+            dot: true
+        });
+        const parameters = {
+            ...templateParameters
+        };
+        await Promise.all(Object.keys(resourceMap).map(async (resourceKey)=>{
+            const target = resourceKey.replace(templateDir, "").replace('.handlebars', "");
+            const handlebarsAPI = new HandlebarsAPI();
+            await handlebarsAPI.renderTemplate(material.get(resourceKey), target, distFolder, {
+                ...parameters
+            });
+        }));
+    };
+    const templateDir = getTemplateDir(templateName);
+    let commonTemplateDir = '';
+    if ("lib" === projectType) commonTemplateDir = 'templates/lib-common/';
+    else if ('app' === projectType) commonTemplateDir = `templates/${framework}-common/`;
+    if (commonTemplateDir) await renderTemplate(commonTemplateDir);
+    await renderTemplate(templateDir);
+}
+async function create({ name, templates }) {
+    const argv = (0, __WEBPACK_EXTERNAL_MODULE_minimist__["default"])(process.argv.slice(2), {
+        alias: {
+            h: 'help',
+            d: 'dir',
+            t: 'template',
+            n: 'name',
+            r: 'role'
+        }
+    });
+    console.log('');
+    __WEBPACK_EXTERNAL_MODULE_rslog__.logger.greet(`◆  Create ${upperFirst(name)} Project`);
+    if (argv.help) {
+        logHelpMessage(name, templates);
+        return;
+    }
+    const cwd = process.cwd();
+    const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
+    const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
+    const mfVersion = "0.11.0";
+    argv.template = templates.includes(argv.template || '') ? argv.template : void 0;
+    const projectType = await getProjectType(argv.template);
+    if ("zephyr" === projectType) {
+        const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
+        const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
+        (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
+        (0, __WEBPACK_EXTERNAL_MODULE_child_process__.spawnSync)(pkgManager, [
+            'create',
+            zephyrPackage
+        ], {
+            stdio: 'inherit',
+            shell: true
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
+        return;
+    }
+    const mfName = argv.name || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
+        message: 'Please input Module Federation name:',
+        placeholder: 'mf_project_name',
+        defaultValue: 'mf_project_name',
+        validate (value) {
+            if (0 === value.length) return 'Name is required';
+        }
+    }));
+    const { targetDir } = formatProjectName(__WEBPACK_EXTERNAL_MODULE_path__["default"].join(argv.dir || mfName));
+    const distFolder = __WEBPACK_EXTERNAL_MODULE_path__["default"].isAbsolute(targetDir) ? targetDir : __WEBPACK_EXTERNAL_MODULE_path__["default"].join(cwd, targetDir);
+    if (!argv.override && __WEBPACK_EXTERNAL_MODULE_fs__["default"].existsSync(distFolder) && !isEmptyDir(distFolder)) {
+        const option = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+            message: `"${targetDir}" is not empty, please choose:`,
+            options: [
+                {
+                    value: 'yes',
+                    label: 'Continue and override files'
+                },
+                {
+                    value: 'no',
+                    label: 'Cancel operation'
+                }
+            ]
+        }));
+        if ('no' === option) cancelAndExit();
+    }
+    await forgeTemplate({
+        projectType,
+        argv,
+        templateParameters: {
+            mfName,
+            mfVersion
+        },
+        distFolder
+    });
+    const nextSteps = [
+        `cd ${targetDir}`,
+        `${pkgManager} install`,
+        `${pkgManager} run ${"lib" === projectType ? 'mf-dev' : 'dev'}`
+    ];
+    (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(nextSteps.join('\n'), 'Next steps');
+    (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
+}
+const TEMPLATES = [
+    'provider-modern',
+    'provider-rsbuild',
+    'provider-rslib',
+    'provider-rslib-storybook',
+    'consumer-modern',
+    'consumer-rsbuild'
+];
+create({
+    name: 'Module Federation',
+    templates: TEMPLATES
+});
+export { TEMPLATES };

package/package.json

@@ -1,11 +1,47 @@
 {
   "name": "create-module-federation",
-  "version": "0.0.0",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "description": "Create a new Module Federation project",
+  "public": true,
+  "sideEffects": false,
+  "version": "0.11.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/module-federation/core/",
+    "directory": "packages/create-module-federation"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "engines": {
+    "node": ">=16.7.0"
+  },
+  "bin": {
+    "create-module-federation": "./dist/index.js"
   },
-  "author": "",
-  "license": "ISC",
-  "description": ""
-}
+  "files": [
+    "templates",
+    "dist"
+  ],
+  "dependencies": {
+    "@clack/prompts": "^0.8.2",
+    "execa": "5.1.1",
+    "fs-extra": "9.1.0",
+    "minimist": "^1.2.8",
+    "rslog": "^1.2.3",
+    "glob": "7.2.0",
+    "handlebars": "4.7.7"
+  },
+  "devDependencies": {
+    "@types/glob": "7.2.0",
+    "@types/minimist": "^1.2.5",
+    "@types/fs-extra": "9.0.6",
+    "@rslib/core": "^0.3.1",
+    "rsbuild-plugin-publint": "^0.2.1"
+  },
+  "scripts": {
+    "build": "rslib build"
+  }
+}

package/templates/consumer-modern-ts/modern.config.ts

@@ -0,0 +1,15 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
+    }),
+    moduleFederationPlugin(),
+  ],
+});

package/templates/consumer-modern-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-modern-ts/src/routes/page.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+import Provider from 'provider';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+
+    <div className="landing-page">
+      <Provider />
+    </div>
+  </div>
+);
+
+export default Index;

package/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-rsbuild-ts/rsbuild.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});

package/templates/consumer-rsbuild-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import Provider from 'provider';
+
+const App = () => {
+  return (
+    <div className="content">
+      <Provider />
+    </div>
+  );
+};
+
+export default App;

package/templates/lib-common/module-federation.config.ts.handlebars

@@ -0,0 +1,17 @@
+import {createModuleFederationConfig} from '@module-federation/rsbuild-plugin';
+import pkg from './package.json';
+
+export default createModuleFederationConfig({
+  name: pkg.name,
+  exposes: {
+    '.': './src/index.tsx',
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react-dom': {
+      singleton: true,
+    },
+  },
+})

package/templates/lib-common/rslib.config.ts

@@ -0,0 +1,52 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+import pkg from './package.json';
+
+const shared = {
+  dts: {
+    bundle: false,
+  },
+};
+
+export default defineConfig({
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'mf',
+      output: {
+        // set unpkg cdn as assetPrefix if you want to publish
+        assetPrefix:
+          process.env.NODE_ENV === 'production'
+            ? `https://unpkg.com/${pkg.name}@latest/dist/mf/`
+            : undefined,
+        distPath: {
+          root: './dist/mf',
+        },
+      },
+    },
+  ],
+  server: {
+    port: 3001,
+  },
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});