이어서 할 곳

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

각 워크스페이스에서 lodash 사용하기

➜ pnpm --filter main-app add [email protected]
➜ pnpm --filter component-app add [email protected]

// module-federation-basic-example/apps/component-app/src/components/Button.jsx

import React from "react";
import { map, join } from "lodash";

const styleMapping = {
  primary: {
    marginLeft: "10px",
    color: "#fff",
    backgroundColor: "#409eff",
    borderColor: "#409eff",
    padding: "12px 20px",
    fontSize: "14px",
    borderRadius: "4px",
    outline: "none",
    border: "1px solid #dcdfe6",
    cursor: "pointer",
  },
  warning: {
    marginLeft: "10px",
    color: "#fff",
    backgroundColor: "#e6a23c",
    borderColor: "#e6a23c",
    padding: "12px 20px",
    fontSize: "14px",
    borderRadius: "4px",
    outline: "none",
    border: "1px solid #dcdfe6",
    cursor: "pointer",
  },
};

const Button = ({ type, children, onClick }) => {
  const buttonType = type === "warning" ? "warning" : "primary";

  return (
    <button style={styleMapping[buttonType]} onClick={onClick}>
      {children} {join(map(["1", "2"]), "-")}
    </button>
  );
};

export default Button;

// 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";

const App = () => (
  <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>
);

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

shared 사용법

// main-app (실제 4.17.21) (표기 4.17.21)
shared: ["lodash"]

// component-app (실제 4.17.21) (표기 4.17.21)
shared: ["lodash"]

// 한번 로드

// main-app (살제 4.17.21) (표기 4.17.21)
shared: ["lodash"]

// component-app (실제 4.17.20) (표기 4.17.20)
shared: ["lodash"]

// 각자 로드

// main-app (실제 4.17.21) (표기 4.17.21)
shared: ["lodash"]

// component-app (실제 4.17.20) (표기 ^4.17.20)
shared: ["lodash"]

// 한번 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.21)
shared: {
  lodash: "4.17.21" 
}

// 한번 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.21)
shared: {
  lodash: "4.17.20" 
}

// 각자 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: "4.17.20" 
}

// 각자 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: "^4.17.20" 
}

// 한번 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: {
    requiredVersion: "4.17.20"
  }
}

// 각자 로드

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: {
    requiredVersion: "4.17.20",
    singleton: true,
  },
}

// 한번 로드 (warning)

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: {
    requiredVersion: "4.17.20",
    singleton: true,
    strictVersion: true,
  },
}

// 실행 불가 (error)

// main-app (실제 4.17.21)
shared: {
  lodash: "4.17.21"
}

// component-app (실제 4.17.20)
shared: {
  lodash: {
    requiredVersion: "4.17.20",
    singleton: true,
    strictVersion: true,
    shareScope: "community",
  },
}

// 각자 로드

일반적인 설정

shared: {
  ...deps,
  react: {
    singleton: true,
    requiredVersion: deps.react,
  },
  "react-dom": {
    singleton: true,
    requiredVersion: deps["react-dom"],
  },
},