# universal-module-federation-plugin > open module federation hook, support custom behavior, such as umd specification integration Latest version **2.0.1-latest.1** (published 2023-11-14) · ISC license · 0 weekly downloads ## Install ```sh npm install universal-module-federation-plugin pnpm add universal-module-federation-plugin yarn add universal-module-federation-plugin bun add universal-module-federation-plugin ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.1-latest.1 | | Published | 2023-11-14 | | First published | 2022-11-17 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 18 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 25 | | Maintainers | zhanghongen | | Keywords | module-federation, webpack, system, umd | ## Links - npm: https://www.npmjs.com/package/universal-module-federation-plugin - Repository: https://github.com/zhangHongEn/universal-module-federation-plugin.git#main - Homepage: https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main#readme - Issues: https://github.com/zhangHongEn/universal-module-federation-plugin/issues - npm.io page: https://npm.io/package/universal-module-federation-plugin ## Dependencies (6) - [global](https://npm.io/package/global.md) ^4.4.0 - [inject-webpack](https://npm.io/package/inject-webpack.md) ^0.4.4 - [stringify-has-fn](https://npm.io/package/stringify-has-fn.md) ^1.0.3 - [systemjs-intercept](https://npm.io/package/systemjs-intercept.md) ^1.0.14 - [webpack-virtual-modules](https://npm.io/package/webpack-virtual-modules.md) ^0.4.6 - [module-federation-runtime](https://npm.io/package/module-federation-runtime.md) ^1.1.11 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 2.0.1-latest.1 (latest) — 2023-11-14 - 2.0.0-beta.6 (beta) — 2023-09-20 - 2.0.1 — 2023-09-21 - 2.0.0 — 2023-09-20 - 2.0.0-beta.5 — 2023-09-20 - 2.0.0-beta.4 — 2023-09-20 - 2.0.0-beta.3 — 2023-09-20 - 2.0.0-beta.2 — 2023-09-20 - 2.0.0-beta.1 — 2023-09-20 - 2.0.0-beta.0 — 2023-09-20 - 1.0.10-beta.0 — 2023-09-20 - 1.0.9 — 2023-07-04 - 1.0.8 — 2023-07-04 - 1.0.7 — 2023-07-04 - 1.0.6 — 2023-07-04 - … 31 more at https://npm.io/package/universal-module-federation-plugin/versions ## README # universal-module-federation-plugin This is currently version 2.0 documentation, [v1](https://www.npmjs.com/package/universal-module-federation-plugin/v/1.0.9?activeTab=readme) is here [![npm](https://img.shields.io/npm/v/universal-module-federation-plugin.svg)](https://www.npmjs.com/package/universal-module-federation-plugin) [中文文档](https://github.com/zhangHongEn/universal-module-federation-plugin/blob/main/packages/universal-module-federation-plugin/README-cn.md) Keep the original API of module-federation, support the integration of various module specifications Allows you to control all the processes of each dependency by yourself ## try online * [mf + umd](https://stackblitz.com/github/wpmjs/examples/tree/main/umf-demo?file=app2%2Fwebpack.config.js) * [web worker（Using module-federation in worker threads）](https://stackblitz.com/github/wpmjs/examples/tree/main/umf-worker-demo) * Both plugins can set workerFiles to specify worker files or directories to use module-federation in worker threads * ``` js // webpack.config.js new UmdPlugin({ workerFiles: [/\.?worker\.js$/] }) new UniversalModuleFederationPlugin({ workerFiles: [/\.?worker\.js$/] }) ``` ## Table of contents * umd federation * [UmdPlugin examles](#UmdPlugin-examles) * [UmdPlugin API](#UmdPlugin-API) * UniversalModuleFederation * [delegate modules](#delegate-modules) * [UniversalModuleFederationPlugin examles](#UniversalModuleFederationPlugin-examles) ## UmdPlugin examles Allow module-federation to use umd module, umd dependencies can be obtained from shareScopes or remotes ``` js // webpack.config.js const {UmdPlugin} = require("universal-module-federation-plugin") module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'app3', filename: 'remoteEntry.js', remotes: { app2: "app2@http://localhost:9002/remoteEntry.js", }, exposes: { './App': './src/App', }, shared: { react: { singleton: true }, 'react-dom': { singleton: true } }, }), new UmdPlugin({ // The matched remotes are loaded in umd mode remotes: { "react-router": "https://unpkg.com/react-router@6.4.3/dist/umd/react-router.production.min.js", "@remix-run/router": "https://unpkg.com/@remix-run/router@1.0.3/dist/router.umd.min.js" } }), new UmdPlugin({ // ... // Can be used multiple times }) ] } ``` ## UmdPlugin API | options | desc | interface | default | examles | |-------------|----------------------|:--------------------------------|---------|:-------------------| | remotes | umd remotes | { remoteKey: "{global}@{url}" } | {} | string> | | workerFiles | web worker file path | | [] | [/\.?worker\.js$/] | ## delegate modules Reference from [delegate-modules](https://github.com/module-federation/universe/issues/1198)not the official warehouse ``` js // webpack.config.js const {DelegateModulesPlugin} = require("universal-module-federation-plugin") module.exports = { plugins: [ new ModuleFederationPlugin({ shared: { react: { singleton: true } }, }), new DelegateModulesPlugin({ remotes: { test1: "internal ./src/remote-delegate.js?remote=test1@http://localhost:9000/remoteEntry.js" } }) ] } ``` ``` js // src/remote-delegate.js module.exports = new Promise((resolve, reject) => { const currentRequest = new URL(__resourceQuery, __webpack_base_uri__).searchParams.get("remote"); const [global, url] = currentRequest.split('@'); const __webpack_error__ = new Error() __webpack_require__.l( url, function (event) { if (typeof window[global] !== 'undefined') return resolve(window[global]); var realSrc = event && event.target && event.target.src; __webpack_error__.message = 'Loading script failed.\\n(' + event.message + ': ' + realSrc + ')'; __webpack_error__.name = 'ScriptExternalLoadError'; __webpack_error__.stack = event.stack; reject(__webpack_error__); }, global, ); }) ``` ## UniversalModuleFederationPlugin examles If you have your own module specification, you can use UniversalModuleFederationPlugin to integrate it. UniversalModuleFederationPlugin Exposes some hooks to customize the loading behavior of remote control ``` js // webpack.config.js const {UniversalModuleFederationPlugin} = require("universal-module-federation-plugin") plugins: [ new UniversalModuleFederationPlugin({ remotes: { app1: function (){ return Promise.resolve({ init() {}, async get(modulePath) { return function () { return ({"./App1": "./App1", "./App2": "./App2"})[modulePath] } } }) } }, }) ] ``` ``` js // main.js import App1 from "app1/App1" import App2 from "app1/App2" console.log(App1, App2) ``` --- _Source: https://npm.io/package/universal-module-federation-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._