3 |
5 |
6 |
7 |
16 |
--------------------------------------------------------------------------------
/main/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | This is an about page
4 |host
"; 5 | addList() 6 | }) -------------------------------------------------------------------------------- /moudle/host/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/moudle/host/index.js:
--------------------------------------------------------------------------------
1 | import('./bootstrap')
--------------------------------------------------------------------------------
/moudle/host/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remote",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "dev":"webpack-dev-server",
9 | "build":"webpack"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "html-webpack-plugin": "^5.5.0",
16 | "webpack": "^5.78.0",
17 | "webpack-cli": "^5.0.1",
18 | "webpack-dev-server": "^4.13.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/moudle/host/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { Configuration } = require('webpack')
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
4 | /**
5 | * @type {Configuration} //配置智能提示
6 | */
7 | const config = {
8 | mode: 'none',
9 | entry: './index.js',
10 | output: {
11 | filename: 'bundle.js'
12 | },
13 | devServer:{
14 | port: 9002, //host
15 | },
16 | plugins: [
17 | new HtmlWebpackPlugin({
18 | template: './index.html'
19 | }),
20 | new ModuleFederationPlugin({
21 | name: 'host',
22 | remotes: {
23 | remote: 'remote@http://localhost:9001/remoteEntry.js'
24 | }
25 | })
26 | ]
27 | }
28 | module.exports = config
--------------------------------------------------------------------------------
/moudle/remote/bootstrap.js:
--------------------------------------------------------------------------------
1 | import { addList } from "./list";
2 | let app = document.getElementById("app");
3 |
4 | app.innerHTML = "remote
"; 5 | 6 | addList() -------------------------------------------------------------------------------- /moudle/remote/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/moudle/remote/index.js:
--------------------------------------------------------------------------------
1 | import('./bootstrap')
--------------------------------------------------------------------------------
/moudle/remote/list.js:
--------------------------------------------------------------------------------
1 | //这个模块会暴露给 host 项目去使用
2 |
3 | let wrap = document.createElement("div");
4 |
5 | let list = [
6 | { name: "张三", age: 18 },
7 | { name: "李四", age: 19 },
8 | { name: "王五", age: 20 },
9 | ]
10 |
11 | list.forEach(item => {
12 | let p = document.createElement("p");
13 | p.innerHTML = `${item.name} - ${item.age}`;
14 | wrap.appendChild(p);
15 | })
16 |
17 | export const addList = () => {
18 | document.body.appendChild(wrap);
19 | }
--------------------------------------------------------------------------------
/moudle/remote/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remote",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "dev":"webpack-dev-server",
9 | "build":"webpack"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "html-webpack-plugin": "^5.5.0",
16 | "webpack": "^5.78.0",
17 | "webpack-cli": "^5.0.1",
18 | "webpack-dev-server": "^4.13.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/moudle/remote/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { Configuration } = require('webpack')
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
4 | /**
5 | * @type {Configuration} //配置智能提示
6 | */
7 | const config = {
8 | mode: 'none',
9 | entry: './index.js',
10 | output: {
11 | filename: 'bundle.js'
12 | },
13 | devServer:{
14 | port: 9001, //remote
15 | },
16 | plugins: [
17 | new HtmlWebpackPlugin({
18 | template: './index.html'
19 | }),
20 | new ModuleFederationPlugin({
21 | name: 'remote',
22 | filename: 'remoteEntry.js',
23 | exposes: {
24 | './addList': './list.js' //value 暴露的模块的路径
25 | }
26 | })
27 | ]
28 | }
29 | module.exports = config
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "monorepo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC"
12 | }
13 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | # all packages in direct subdirs of packages/
3 | - 'main'
4 | # all packages in subdirs of components/
5 | - 'web/**'
6 |
7 | - 'common'
8 |
--------------------------------------------------------------------------------
/web/react-demo/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/web/react-demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
24 |
37 | )
38 | }
39 |
40 | export default App
41 |
--------------------------------------------------------------------------------
/web/react-demo/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/react-demo/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/web/react-demo/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 | Vite + React
25 |
26 |
29 |
33 |
30 | Edit src/App.tsx and save to test HMR
31 |
34 | Click on the Vite and React logos to learn more 35 |
36 |