@originjs/vite-plugin-federation - npm Package Compare versions

Comparing version 1.1.12 to 1.1.13

package.json

 {
   "name": "@originjs/vite-plugin-federation",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "A Vite plugin which support Module Federation.",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "types/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
@@ -39,14 +46,15 @@ "dist",
   "dependencies": {
-    "estree-walker": "^1.0.1",
-    "magic-string": "^0.25.7"
+    "estree-walker": "^3.0.2",
+    "magic-string": "^0.27.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^8.3.4",
-    "@rollup/plugin-virtual": "^2.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@rollup/plugin-virtual": "^3.0.1",
     "@types/estree": "^0.0.50",
     "conventional-changelog-cli": "^2.1.1",
-    "rollup": "^3.0.0-3",
-    "vite": "^3.0.7"
+    "rollup": "^3.9.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3"
   }
 }

README.md

 # vite-plugin-federation
 
-A Vite plugin which support Module Federation.
-Inspired by Webpack [Module Federation](https://webpack.js.org/concepts/module-federation/) feature.
+A Vite/Rollup plugin which support Module Federation.
+Inspired by Webpack and compatible with [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/).
 
 ## Install
 
-Using npm:
-
 ```
@@ -14,55 +12,128 @@ npm install @originjs/vite-plugin-federation --save-dev
 
+or
+
+```
+yarn add @originjs/vite-plugin-federation --dev
+```
+
 ## Usage
+Using the `Module Federation` usually requires more than 2 projects, one as the `host side` and one as the `remote side`.
+#### Step 1: Configure the remote side.
+- for a vite project, modify `vite.config.js`:
 
-- for a Vite project, in `vite.config.js`:
-
 ```js
-import { defineConfig } from 'vite'
+// vite.config.js
 import federation from "@originjs/vite-plugin-federation";
+export default {
+    plugins: [
+        federation({
+            name: 'remote-app',
+            filename: 'remoteEntry.js',
+            // Modules to expose
+            exposes: {
+                './Button': './src/Button.vue',
+            },
+            shared: ['vue']
+        })
+    ]
+}
+```
 
-export default defineConfig({
-  plugins: [
-    federation({
-      name: 'module-name',
-      filename: 'remoteEntry.js',
-      exposes: {
-        './Button': './src/Button.vue',
-      },
-      remotes:{
-          foo: 'remote_foo'
-      },
-      shared: ['vue']
-    })
-  ],
-})
+- for a rollup project, modify `rollup.config.js`:
 
+```js
+// rollup.config.js
+import federation from '@originjs/vite-plugin-federation'
+export default {
+    input: 'src/index.js',
+    plugins: [
+        federation({
+            name: 'remote-app',
+            filename: 'remoteEntry.js',
+            // Modules to expose
+            exposes: {
+                './Button': './src/button'.
+            },
+            shared: ['vue']
+        })
+    ]
+}
 ```
 
-- for a Rollup project, in `rollup.config.js`:
+#### Step 2: Configure the host side
 
+- for a vite project, modify `vite.config.js`:
+
 ```js
+// vite.config.js
+import federation from "@originjs/vite-plugin-federation";
+export default {
+    plugins: [
+        federation({
+            name: 'host-app',
+            remotes: {
+                remote_app: "http://localhost:5001/assets/remoteEntry.js",
+            },
+            shared: ['vue']
+        })
+    ]
+}
+```
+
+- for a rollup project, modify `rollup.config.js`:
+
+```js
+// rollup.config.js
 import federation from '@originjs/vite-plugin-federation'
-
 export default {
-  input: 'src/index.js',
-  output: {
-    format: 'esm',
-    dir: 'dist'
-  },
-  plugins: [
-    federation({
-      filename: 'remoteEntry.js',
-      exposes: {
-        './Button': './src/button'
-      },
-      shared: ['react']
-    })
-  ]
+    input: 'src/index.js',
+    plugins: [
+        federation({
+            name: 'host-app',
+            remotes: {
+                remote_app: "http://localhost:5001/remoteEntry.js",
+            },
+            shared: ['vue']
+        })
+    ]
 }
 ```
 
-## Examples
+#### Step 3: Using remote modules on the host side
 
-- [basic-host-remote](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/basic-host-remote)
-- [simple-react](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react)
-- [vue3-demo](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo)
+Using a Vue project as an example
+
+```js
+import { createApp, defineAsyncComponent } from "vue";
+const app = createApp(Layout);
+...
+const RemoteButton = defineAsyncComponent(() => import("remote_app/Button"));
+app.component("RemoteButton", RemoteButton);
+app.mount("#root");
+```
+Using remote components in templates
+
+```vue
+<template>
+    <div>
+        <RemoteButton />
+    </div>
+</template>
+```
+
+## Example projects
+
+| Examples                                                                                                                                | Host                                  | Remote                              |
+| --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- |
+| [basic-host-remote](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/basic-host-remote)                   | `rollup`+`esm`                        | `rollup`+`esm`                      |
+| [react-in-vue](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/react-in-vue)                             | `vite`+`esm`                          | `vite`+`esm`                        |
+| [simple-react-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-esm)                     | `rollup`+`esm`                        | `rollup`+`esm`                      |
+| [simple-react-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-systemjs)           | `rollup`+`systemjs`                   | `rollup`+`systemjs`                 |
+| [simple-react-webpack](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-webpack)             | `rollup`+`systemjs`                   | `webpack`+`systemjs`                |
+| [vue2-demo](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue2-demo)                                   | `vite`+`esm`                          | `vite`+`esm`                        |
+| [vue3-advanced-demo](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-advanced-demo)                 | `vite`+`esm` <br/>`vue-router`/`pinia` | `vite`+`esm`<br/>`vue-router`/`pinia` |
+| [vue3-demo-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-esm)                           | `vite`+`esm`                          | `vite`+`esm`                        |
+| [vue3-demo-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-systemjs)                 | `vite`+`systemjs`                     | `vite`+`systemjs`                   |
+| [vue3-demo-webpack-esm-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-esm-esm)   | `vite/webpack`+`esm`                  | `vite/webpack`+`esm`                |
+| [vue3-demo-webpack-esm-var](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-esm-var)   | `vite`+`esm`                          | `webpack`+`var`                     |
+| [vue3-demo-webpack-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-systemjs) | `vite`+`systemjs`                     | `webpack`+`systemjs`                |

types/index.d.ts

@@ -297,2 +297,7 @@ /**
   version?: string | false
+
+  /**
+   * determine whether to include the shared in the chunk, true is included, false will not generate a shared chunk, only the remote side of the parameter is valid, the host side will definitely generate a shared chunk
+   */
+  generate?: boolean
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

264036

increased by6.87%

Lines of code

6152

increased by9.56%

Number of lines in readme file

138

increased by102.94%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Dev dependency count

8

increased by14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Addedestree-walker@3.0.3(transitive)

• + Addedmagic-string@0.27.0(transitive)

• - Removedestree-walker@1.0.1(transitive)

• - Removedmagic-string@0.25.9(transitive)

• - Removedsourcemap-codec@1.4.8(transitive)

• Updatedestree-walker@^3.0.2

• Updatedmagic-string@^0.27.0