微前端 #

npm install webpack@5.17.0 webpack-cli@4.4.0 webpack-dev-server@3.11.2 html-webpack-plugin@4.5.1 @babel/core@7.12.10 @babel/cli@7.12.10 @babel/preset-env@7.12.11  @babel/preset-react@7.12.10 babel-loader@8.2.2

// webpack.config.js
const path = require("path")

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "build"),
    filename: "index.js",
    libraryTarget: "system"
 },
  devtool: "source-map",
  devServer: {
    port: 9000,
    contentBase: path.join(__dirname, "build"),
    historyApiFallback: true
 },
  module: {
    rules: [
     {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/react"]
         }
       }
     }
    ]
 },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: "./src/index.html"
   })
 ],
  externals: ["react", "react-dom", "react-router-dom"]
}

npm install create-single-spa -g

npm info create-single-spa

mkdir workspace

create-single-spa

npm start

localhost:9000

import { registerApplication, start } from "single-spa";

// 注册微应用
registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
    ),
  activeWhen: ["/"],
});

// registerApplication({
//   name: "@yueluo/navbar",
//   app: () => System.import("@yueluo/navbar"),
//   activeWhen: ["/"]
// });

// 启动应用
start({
  urlRerouteOnly: true,
});

mkdir test

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.12.10",
    "single-spa": "^5.9.3",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-config-single-spa": "^5.0.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  }
}

const singleSpaDefaults = require('webpack-config-single-spa');
const { merge } = require('webpack-merge');

module.exports = () => {
  const defaultConfig = singleSpaDefaults({
    orgName: 'yueluo',
    projectName: 'test'
  });

  return merge(defaultConfig, {
    devServer: {
      port: 9001
    }
  });
}

let testContainer = null

export async function bootstrap () {
  console.log('应用正在启动');
}

export async function mount () {
  console.log('应用正在挂载');

  testContainer = document.createElement('div');
  testContainer.id = 'test-container';
  testContainer.innerHTML = 'hello, single spa test！'
}

export async function unmount () {
  console.log('应用正在卸载');
}

import { registerApplication, start } from "single-spa";

// registerApplication({
//   name: "@single-spa/welcome",
//   app: ,
//   activeWhen: ["/"],
// });

registerApplication(
  "@single-spa/welcome", 
  () => System.import("https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"),
  (location) => location.pathname === '/'
);

registerApplication({
  name: "@yueluo/test",
  app: () => System.import("@yueluo/test"),
  activeWhen: ["/test"],
});

// registerApplication({
//   name: "@yueluo/navbar",
//   app: () => System.import("@yueluo/navbar"),
//   activeWhen: ["/"]
// });

start({
  urlRerouteOnly: true,
});

{
  "name": "@yueluo/todos",
  "scripts": {
    "start": "webpack serve --port 9002",
    "start:standalone": "webpack serve --env standalone",
    "build": "concurrently yarn:build:*",
    "build:webpack": "webpack --mode=production",
    "analyze": "webpack --mode=production --env analyze",
    "lint": "eslint src --ext js",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "test": "cross-env BABEL_ENV=test jest",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "prepare": "husky install",
    "coverage": "cross-env BABEL_ENV=test jest --coverage"
  }
}

registerApplication({
  name: "@yueluo/todos",
  app: () => System.import("@yueluo/todos"),
  activeWhen: ["/todos"],
});

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
  // 指定应用挂载位置（DOM 元素在容器中定义）
  domElementGetter: () => document.getElementById('root')
});

export const { bootstrap, mount, unmount } = lifecycles;

import React from 'react';

const About = () => {
  return <div>About works</div>;
}

export default About;

import React from 'react';

const Home = () => {
  return <div>Home works</div>;
}

export default Home;

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "yueluo",
    projectName: "todos",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    externals: ['react-router-dom']
  });
};

module.exports = {
  chainWebpack: config => {
    config.externals(['vue', 'vue-router'])
  }
}

"scripts": {
  "start": "vue-cli-service serve --port 9003",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "serve:standalone": "vue-cli-service serve --mode standalone"
}

registerApplication({
  name: "@yueluo/realworld",
  app: () => System.import("@yueluo/realworld"),
  activeWhen: ["/realworld"],
});

import Vue from 'vue';
import VueRouter from 'vue-router';
import singleSpaVue from 'single-spa-vue';

import App from './App.vue';

Vue.use(VueRouter);

Vue.config.productionTip = false;

const Foo = { template: '<div>Foo<div>' };
const Bar = { template: '<div>Bar<div>' };

const routes = [
  {
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
];

const router = new VueRouter({
  mode: 'history',
  base: '/realworld',
  routes
});

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    router,
    render(h) {
      return h(App, {
        props: {
          // single-spa props are available on the "this" object. Forward them to your component as needed.
          // https://single-spa.js.org/docs/building-applications#lifecyle-props
          // if you uncomment these, remember to add matching prop definitions for them in your App.vue file.
          /*
          name: this.name,
          mountParcel: this.mountParcel,
          singleSpa: this.singleSpa,
          */
        },
      });
    },
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "yueluo",
    projectName: "navbar",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    externals: ['react-router-dom']
  });
};
 

"scripts": {
  "start": "webpack serve --port 9100",
  "start:standalone": "webpack serve --env standalone",
  "build": "concurrently yarn:build:*",
  "build:webpack": "webpack --mode=production",
  "analyze": "webpack --mode=production --env analyze",
  "lint": "eslint src --ext js",
  "format": "prettier --write .",
  "check-format": "prettier --check .",
  "test": "cross-env BABEL_ENV=test jest",
  "watch-tests": "cross-env BABEL_ENV=test jest --watch",
  "prepare": "husky install",
  "coverage": "cross-env BABEL_ENV=test jest --coverage"
}

module.exports = {
  chainWebpack: config => {
    config.externals(['vue', 'vue-router', 'single-spa'])
  }
}

"scripts": {
  "start": "webpack serve --port 9200",
  "start:standalone": "webpack serve --env standalone",
  "build": "concurrently yarn:build:*",
  "build:webpack": "webpack --mode=production",
  "analyze": "webpack --mode=production --env analyze",
  "lint": "eslint src --ext js",
  "format": "prettier --write .",
  "check-format": "prettier --check .",
  "prepare": "husky install",
  "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
  "watch-tests": "cross-env BABEL_ENV=test jest --watch",
  "coverage": "cross-env BABEL_ENV=test jest --coverage"
}

// Anything exported from this file is importable by other in-browser modules.
export function sayHello (who) {
  console.log(`%c${ who } sayHello`, 'color:skyblue');
}

import { ReplaySubject } from 'rxjs';

export function sayHello (who) {
  console.log(`%c${ who } sayHello`, 'color:skyblue');
}

export const sharedSubject = new ReplaySubject();

yarn add single-spa-layout -S

import { registerApplication, start } from "single-spa";
import { constructApplications, constructRoutes } from "single-spa-layout";

// 获取路由配置对象
const routes = constructRoutes(document.querySelector("#single-spa-layout"));

// 获取路由信息数组
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  }
})

// 遍历路由信息注册应用
applications.forEach(registerApplication);

// // registerApplication({
// //   name: "@single-spa/welcome",
// //   app: ,
// //   activeWhen: ["/"],
// // });

// registerApplication(
//   "@single-spa/welcome", 
//   () => System.import("https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"),
//   (location) => location.pathname === '/'
// );

// registerApplication({
//   name: "@yueluo/test",
//   app: () => System.import("@yueluo/test"),
//   activeWhen: ["/test"],
// });

// registerApplication({
//   name: "@yueluo/todos",
//   app: () => System.import("@yueluo/todos"),
//   activeWhen: ["/todos"],
// });

// registerApplication({
//   name: "@yueluo/realworld",
//   app: () => System.import("@yueluo/realworld"),
//   activeWhen: ["/realworld"],
// });

start({
  urlRerouteOnly: true,
});