이어서 할 곳

GitHub - fc-micro-frontends/module-federation-basic-example at step2

packages 워크스페이스 설정 추가

# module-federation-basic-example/pnpm-workspace.yaml

packages:
  - "apps/*"
  - "packages/*"

shared-library 패키지 생성

➜ mkdir packages 

➜ cd packages

➜ pnpm create vite shared-library --template react-swc-ts

➜ cd ..

➜ pnpm i

shared-library 패키지 작성

// module-federation-basic-example/packages/shared-library/src/NameContext.tsx

import React from "react";

const NameContext = React.createContext<string | null>(null);

type NameProviderProps = React.PropsWithChildren<{
  name: string;
}>;

const NameProvider: React.FC<NameProviderProps> = ({ name, children }) => {
  return <NameContext.Provider value={name}>{children}</NameContext.Provider>;
};

export { NameContext, NameProvider };

// module-federation-basic-example/packages/shared-library/src/index.ts

export { NameContext, NameProvider } from "./NameContext";

shared-library 패키지 빌드

➜ pnpm --filter shared-library add vite-plugin-dts -D

// module-federation-basic-example/packages/shared-library/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dts from "vite-plugin-dts";

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react(), dts({ insertTypesEntry: true })],
  build: {
    outDir: "./dist",
    lib: {
      entry: "./src/index.ts",
      name: "shared-library",
      fileName: "index",
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

{
  "name": "shared-library",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.umd.cjs",
      "import": "./dist/index.js"
    }
  },
  "types": "./dist/index.d.ts",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

➜ pnpm --filter shared-library build

다른 앱에 shared-library 패키지 추가

{
  "name": "main-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3000 pnpx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.13.10",
    "lodash": "4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "shared-library": "workspace:*"
  }
}

{
  "name": "component-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3001 pnpx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.13.10",
    "lodash": "4.17.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "shared-library": "workspace:*"
  }
}

➜ pnpm i

다른 앱에서 shared-library 패키지 사용

// module-federation-basic-example/apps/main-app/src/App.jsx

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";

import Button from "component_app/Button";
import { map, join } from "lodash";
import { NameProvider } from "shared-library";

const App = () => (
  <NameProvider name="hello">
    <div className="container">
      <div>Name: main-app</div>
      <div>Framework: react</div>
      <div>Language: JavaScript</div>
      <div>CSS: Empty CSS</div>
      <div>{join(map(["1", "2"]), "-")}</div>
      <Button
        onClick={() => {
          console.log("Clicked!!");
        }}
      >
        Primary
      </Button>
      <Button type="warning">Warning</Button>
    </div>
  </NameProvider>
);

ReactDOM.createRoot(document.getElementById("app")).render(<App />);