안녕하세요!이것은 내가 처음으로 교정한 것이니 모두가 좋아하길 바란다.이 강좌에서 우리는 마이크로 전단 구조를 바탕으로Firebase를 사용하여 매우 간단한 웹 응용 프로그램을 만드는 방법을 배울 것이다.

마이크로 프런트엔드 정의

자신의 마이크로 전단을 만들 수 있는 두 가지 방법이 있다.첫 번째는 수평 분할입니다. 이것은 기본적으로 한 페이지/보기에서 여러 응용 프로그램을 실행한다는 것을 의미합니다.두 번째는 수직 분할입니다. 즉, 한 프로그램이 한 페이지/보기에서 실행됩니다.
이 강좌에서 우리는 수직 분할을 사용할 것이다.
클론 이니시에이터 리포부터 시작하겠습니다.

이사무나스 / 기동기 마이크로 전단 화기

루트 폴더에서 npm install을 실행합니다.

개술

starters repo에는 Vue 프레임으로 제작된 메인 케이스가 있습니다.메인 케이스는sub/micro 프로그램을 보여 줍니다.우리는 두 개의 하위 응용 프로그램이 있다.그것들은 reactapp과 vueapp으로 불리며 각각 React와 Vue로 작성되었다.

층계

우리는 이 강좌를 여러 단계로 나눌 것이다.우선,react micro 응용 프로그램을 실현해야 합니다.이후, 우리는 vue micro 응용 프로그램을 실현할 것이다.마지막으로, 우리는 마이크로 프로그램을 표시하기 위해 메인 셸을 설정할 것입니다.

첫걸음-반응 마이크로 응용

Firebase 접속을 구현하기 전에 다음 4가지 사항을 설정해야 합니다.

추가 .rescriptsrc.js 파일

추가 .env 파일

추가 public-path.js 파일

편집 index.js 파일

설명js

.rescriptsrc.js은 하나의 파일로, 우리는 그 중에서 마이크로프로그램을 시작하는 설정을 설정할 수 있다.react micro 응용 프로그램의 루트 폴더에 파일을 만들고 다음 코드를 추가합니다.

const { name } = require('./package');

module.exports = {
  webpack: config => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    return config;
  },

  devServer: _ => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

에반 선생

키와 포트를 저장하기 위해 .env 파일을 만들어야 합니다.
파일을 만들고 다음 코드를 추가합니다.

SKIP_PREFLIGHT_CHECK=true
BROWSER=none
PORT=7100
WDS_SOCKET_PORT=7100
REACT_APP_FIREBASE_API_KEY=<key>
REACT_APP_FIREBASE_AUTH_DOMAIN=<key>
REACT_APP_FIREBASE_PROJECT_ID=<key>
REACT_APP_FIREBASE_STORAGE_BUCKET=<key>
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=<key>
REACT_APP_FIREBASE_APP_ID=<key>

공통 경로.js

src 폴더의 소스(reactapp) 폴더에 있습니다.응용 프로그램의 공공 경로를 정의해야 합니다.머리글과 이름이 같은 파일을 만들고 다음 코드를 추가합니다.

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

건곤은 메인 케이스를 통해 공공 경로를 정의할 것이다.
'건곤'은 마이크로 전단 프레임으로 메인 케이스에 모든 내용을 설정함으로써 우리를 돕는다.
건곤 의존성은 메인 셸에서만 필요하고 마이크로 프로그램에서는 필요하지 않습니다.창 객체가 나머지 모든 작업을 처리합니다.

색인js

메인 셸에서 이 프로그램을 찾을 수 있도록 index.js 파일을 편집해야 합니다.
다음 코드를 복사해서 색인에 붙여넣습니다.js 파일:

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


function render (props) {
  const { container } = props;
  ReactDOM.render(
    <App />,
    container
      ? container.querySelector('#root')
      : document.querySelector('#root')
  );
}

// This is to render the micro application when not going through the main shell
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap () {
  console.log('react app bootstraped');
}

export async function mount (props) {
  console.log('react props from main framework', props);
  render(props);
}

export async function unmount (props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(
    container
      ? container.querySelector('#root')
      : document.querySelector('#root')
  );
}

serviceWorker.unregister();

bootstrap, mount 및 unmount은 3 개의 수명 주기
모든 웹 응용 프로그램에서 이루어져야 하는 연결고리
생명주기 함수는 건곤이 등록된 응용 프로그램에서 호출할 함수나 함수 그룹이다.건곤은 등록된 프로그램의 메인 파일에서 특정한 이름을 찾아서 이것들을 호출합니다.
이 세 개의 연결고리가 없으면, 마이크로프로세서는 메인 케이스를 통해 불러올 수 없습니다.

화기

src의 reactapp 폴더에 Firebase라는 새 폴더를 만들어야 합니다.이 폴더에 firebaseConfig.js이라는 새javascript 파일을 만들 것입니다.
다음 코드를 추가하여 Firebase를 설정하고 필요할 때 추가 패키지를 가져옵니다 (예: 저장,firestore 등)이 강좌에서 우리는auth 패키지만 필요합니다.

import firebase from 'firebase/app';
import 'firebase/auth';

const config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};
var fb = null;
// Check how many times the firebase app is initialized.
if (firebase.apps.length === 0) {
  fb = firebase.initializeApp(config);
  console.log('Firebase [react] Initialized');
} else {
  console.log('Firebase [react] is already Initialized');
}

export default fb;

응용 프로그램.js

이제 새 사용자를 등록하기 위한 두 개의 입력 요소를 표시하기 위해 App.js을 편집할 수 있습니다.
우선, 우리는 수입 문제를 처리한다.이 세 개는 유일하게 필요한 것이다. 그러면 너는 다른 것을 삭제할 수 있다.

import React, {useState} from 'react';
import './App.css';
import fb from './firebase/firebaseConfig';

그런 다음 전자 메일 및 암호의 상태를 설정하고 등록 함수를 설정합니다.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const onSubmit = () => {
    fb.auth()
      .createUserWithEmailAndPassword(email, password)
      .then(() => {
        console.log("route to vue app.");
        window.history.pushState(null, "/vueapp", "/vueapp");
      })
      .catch((error) => {
        console.log(error);
      });
  };

이제 html 코드를 편집하여 입력 2개와 버튼 1개를 표시합니다.

 <div className="app-main">
      <h1>React App</h1>
      <label for="email">Email</label>
      <input
        name="email"
        type="text"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      ></input>
      <label for="password">Password</label>
      <input
        name="password"
        type="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      ></input>

      <button onClick={onSubmit}>Register</button>
    </div>

reactapp 마이크로애플리케이션에 있어서는 이렇습니다.

2단계 - Vue 마이크로 어플리케이션

가입 후, 우리는 사용자를 우리의 vue 마이크로로 바꾸기를 희망합니다.이 프로그램에서 사용자의 전자 우편을 표시합니다.vueapp 폴더로 이동합니다.
이제 우리는 다섯 가지 일을 할 수 있다.

생성 vue.config.js 파일

추가 public-path.js 파일

편집 main.js 파일

Firebase 구성
편집 Home.vue

vue。배치하다.js

vue micro 응용 프로그램의 루트 폴더에 vue.config.js을 만듭니다.공공 경로는 당신의 마이크로 응용 프로그램의 이름이어야 합니다.우리의 예에서 우리는 /vueapp을 넣을 것이다.

const { name } = require('../package.json');

module.exports = {
  publicPath: '/vueapp',
  chainWebpack: config => config.resolve.symlinks(false),
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`
    }
  },
  devServer: {
    port: process.env.VUE_APP_PORT,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
};

공통 경로.js

src의 vueapp 폴더에서는 다음 코드를 사용하여 공용 경로를 지정합니다.

(function() {
  if (window.__POWERED_BY_QIANKUN__) {
    if (process.env.NODE_ENV === 'development') {
      __webpack_public_path__ = `//localhost:${process.env.VUE_APP_PORT}${process.env.BASE_URL}`;
      return;
    }
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }
})();

매인.js

우리는 마이크로 응용 프로그램이 항상 필요로 하는 세 가지를 설정해야 한다.이를 위해서는 다음을 삭제해야 합니다.

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
  mode: 'history',
  routes
});

new Vue({
  render: h => h(App),
}).$mount('#app')

그리고 다음을 추가합니다.

let instance = null;

function render(props = {}) {
  const { container, routerBase } = props;
  const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    mode: 'history',
    routes
  });

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);

  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

화기

이는 reactapp 마이크로애플리케이션과 거의 동일합니다.
vueapp src 폴더에Firebase라는 새 폴더를 만들 것입니다.그런 다음 다음과 같은 코드로 firebaseConfig.js이라는 새 파일을 만듭니다.

import firebase from 'firebase/app';
import 'firebase/auth';

const config = {
  apiKey: '<key>',
  authDomain: '<key>',
  projectId: ' <key>',
  storageBucket: '<key>',
  messagingSenderId: '<key>',
  appId: '<key>',
  measurementId: '<key>'
};
var fb = null;
if (firebase.apps.length === 0) {
  fb = firebase.initializeApp(config);
  console.log('Firebase [Vue] Initialized');
} else {
  console.log('Firebase [Vue] is already Initialized');
}

export default fb;

집으로 돌아가다.vue

이제 Home.vue을 구성해야 합니다.
우선 Firebase 설정을 가져올 것입니다

import fb from '../firebase/firebaseConfig';

그 다음에 우리는 두 개의 필드 [user, isLoaded]을 추가해야 한다.

data() {
    return {
      user: {},
      isLoaded: false
    };
  },

Home.vue의 창설 방법에 Firebase onAuthStateChanged을 추가하여 사용자를 기다리겠습니다.

  created() {
    fb.auth().onAuthStateChanged(user => {
  this.user = user;
  this.isLoaded = true;
});
  }

유일하게 해야 할 일은 전자 우편을 표시하기 위해 템플릿 탭을 편집하는 것이다.

<template>
 <div>
    <h1>Vue App</h1>
    <h1 v-if="isLoaded">Welcome! {{ user.email }}</h1>
    <h6 v-if="!isLoaded">Loading...</h6>
  </div>
</template>

속기.env 파일에 포트를 지정해야 합니다. 따라서 vue의 루트 디렉터리에 포트를 만듭니다
micro 응용 프로그램에서 다음 행을 추가합니다.

VUE_APP_PORT=7777

이것이 바로 vue 마이크로 응용 프로그램입니다!

3단계 - 마스터 케이스

마이크로 프런트엔드 구조를 사용할 때, 우리는 다른 마이크로 응용 프로그램을 보여주기 위해 main-shell이 필요하다.기본 셸은 Vue로 작성됩니다.

만들다

main-shell 폴더로 이동합니다.
Qiankun 팩 사용
(이것은 마이크로 전단 프레임이다)
이제 우리는 네 가지 일을 할 수 있다.

생성 vue.config.js 파일

추가 micro-apps.js 파일

편집 main.js 파일

편집 App.vue

vue。배치하다.js

main-shell의 루트 폴더에 vue.config.js이라는 새 파일을 만듭니다.이 파일에 다음 코드가 추가됩니다.

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(ttf|otf|eot|woff|woff2)$/,
          use: {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]'
            }
          }
        }
      ]
    }
  }
};

이것은 응용 프로그램에서 사용자 정의 글꼴을 사용합니다.

마이크로 응용.js

src의 main-shell 폴더에 micro-apps.js이라는 새 파일을 만듭니다.이 파일은 우리의 마이크로 프로그램을 정의하는 데 사용될 것입니다.

// This is where we define our micro applications
const microApps = [
  {
    name: 'reactapp',
    entry: '//localhost:7100',
    activeRule: '/reactapp'
  },
  {
    name: 'vue',
    entry: '//localhost:7777/vueapp',
    activeRule: '/vueapp'
  }
];

const apps = microApps.map((item) => {
  return {
    ...item,
    // this will be the element where the micro application will be in
    container: "#subapp-viewport",
    props: {
      routerBase: item.activeRule,
    },
  };
});

export default apps;

매인.js

이것이 바로 즐거움의 시작이다!😄😄
우선 건곤과 micro-app.js에서 온 방법을 main.js 파일로 가져와야 한다.

import { registerMicroApps, start, setDefaultMountApp } from "qiankun";
import microApps from "./micro-apps";

그 다음으로, 우리는 우리의 마이크로 프로그램을 등록하고 기본 경로를 설정해야 한다.이후, 우리는 start 방법을 실행하기만 하면 된다.파일 끝에 다음 코드를 추가합니다.

const apps = microApps.map((item) => {
  return {
    ...item,
  };
});

registerMicroApps(apps, {
  beforeLoad: (app) => {
    console.log("before load app.name====>>>>>", app.name);
  },
  beforeMount: [
    (app) => {
      console.log("[LifeCycle] before mount %c%s", "color: green;", app.name);
    },
  ],
  afterMount: [
    (app) => {
      console.log("[LifeCycle] after mount %c%s", "color: green;", app.name);
    },
  ],
  afterUnmount: [
    (app) => {
      console.log("[LifeCycle] after unmount %c%s", "color: green;", app.name);
    },
  ],
});
setDefaultMountApp("/reactapp");
start();

응용 프로그램.vue

마지막!
먼저 HTML 코드를 변경합니다.
HTML을 다음으로 변경하려면 다음과 같이 하십시오.

<template>
  <div id="subapp-viewport"></div>
</template>

이것은 현재 마이크로 프로그램을div 요소에 놓을 것입니다.
다음은 App.vue의 스크립트 표시에 두 가지 방법이 있습니다.우리는 micro-app.js을 다시 가져와 현재 루트에 연결하고 일부 필드를 데이터 함수로 되돌려야 한다.

import microApps from "./micro-apps";

  data() {
    return {
      microApps,
      current: "/reactapp",
    };
  },

두 가지 방법이 필요합니다.첫 번째로 현재 경로를 App.vue의 현재 경로 필드에 바인딩합니다.두 번째 방법은 공유기의 모든 변경 사항을 감청할 것이다.

  methods: {
    // Binds the current path to the current Path in the main shell
    bindCurrent() {
      const path = window.location.pathname;
      if (this.microApps.findIndex((item) => item.activeRule === path) >= 0) {
        this.current = path;
      }
    },
    // Will listen to any router changes
    listenRouterChange() {
      const _wr = function (type) {
        const orig = history[type];
        return function () {
          const rv = orig.apply(this, arguments);
          const e = new Event(type);
          e.arguments = arguments;
          window.dispatchEvent(e);
          return rv;
        };
      };
      history.pushState = _wr("pushState");

      // will listen when navigating to another micro application
      window.addEventListener("pushState", this.bindCurrent);
      window.addEventListener("popstate", this.bindCurrent);

      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("pushState", this.bindCurrent);
        window.removeEventListener("popstate", this.bindCurrent);
      });
    },
  },

마지막으로 bindCurrent과created의 listenRouterChange 방법:

  created() {
    this.bindCurrent();
  },
  mounted() {
    this.listenRouterChange();
  },

이렇게!
이제 그의 실제 행동을 살펴보자.명령 mounted을 사용하여 main-shell과 2개의 마이크로어플리케이션을 실행합니다.npm run start으로 이동하면 다음이 표시됩니다.

초보자 Repo의completed/tutorial 지점에서 이 강좌의 전체 코드를 찾을 수 있습니다
나는 네가 이 강좌가 좀 유용하다고 생각하기를 바란다.나는 나의 창작 기교에 대해 사과한다. 왜냐하면 나는 여전히 일을 어떻게 더 잘 해석하는지 배우고 있기 때문이다😅😅.
만약 당신이 마이크로 프론트에 대한 더 많은 정보를 알고 싶다면, 나는 당신이 이 미디어 문장을 읽는 것을 건의합니다.

미니 프런트엔드 의사 결정 프레임워크 | 루카 메자리라 | 미드레인지

르카 메자리라・ 2019년 12월 22일・ 중등

감사합니다!😁