React, Vue 및 단일 워터 클리닉을 사용한 소형 프런트엔드 구축

지난 몇 주 동안 마이크로 프런트 (부정적, 긍정적인) 를 둘러싸고 이미 많은 토론이 있었다.
한 트위터가 정말 눈길을 끌었습니다. 트위터는 Single SPA의 창립자입니다.

조르 단닌
조르데닌

흥미로운 것은 최근 비판하는 많은 사람들이 (1) 그것을 시도해 본 적이 없고, (2) 그것이 무엇인지 이해하지 못하고, (3) 거의 악질적인 풍자로 미전단을 공격하고, 그것을 사용하는 사람들을 공격한다는 것이다.나는 그들의 주요 홍보자 중의 하나인 AMA이다😀
2019년 6월 14일 오전 6:19
19
90
이렇게 새로운, 논란이 되는 것을 볼 때 나는 항상 직접 시도해 보고 모든 투기가 무엇에 관한 것인지 보고 싶다. 그러면 나는 이 주제에 대한 자신의 견해를 형성할 수 있다.
이것은 두 개의 독립된 React 프로그램과 Vue 프로그램을 보여 주는 마이크로 프런트엔드 프로그램을 만드는 데 도움을 줄 것입니다.
이 강좌에서는 제가 배운 지식을 공유하고 React와 Vue 응용 프로그램으로 구성된 마이크로 프런트엔드 응용 프로그램을 구축하는 방법을 보여 드리겠습니다.

To view the final code for this application, click here.

독수요법
프로젝트를 만드는 데 사용할 도구는 Single SPA 전방 마이크로 서비스에 사용되는javascript 프레임워크입니다.
Single SPA는 Angular, React 및 Vue와 함께 기능별로 코드를 분할할 수 있는 페이지 응용 프로그램에서 여러 프레임을 사용할 수 있습니다.js 등 응용 프로그램은 모두 함께 생활한다.
React APP CLI 및 Vue CLI를 만드는 데 익숙해졌을 수 있습니다.이러한 도구가 있으면 전체 프로젝트를 신속하게 시작하여 패키지 설정, 의존 항목, 기존의 샘플 파일을 완성할 수 있습니다.
만약 이런 간단한 설정에 익숙해졌다면, 첫 번째 부분은 좀 조화롭지 못할 수도 있습니다.이것은 우리가 필요로 하는 모든 의존 항목을 설치하고 웹 패키지와 바벨 설정을 처음부터 만들 것입니다.

If you are still curious what Single SPA does or why you may want to build using a micro-frontend architecture, check out video.

개시하다
응용 프로그램을 저장하고 디렉토리로 변경하는 새 폴더를 만드는 것이 첫 번째 방법입니다.

mkdir single-spa-app

cd single-spa-app

다음에 우리는 새 가방을 초기화할 것이다.json 파일:

npm init -y

지금, 이것은 재미있는 부분이다.우리는 이 프로젝트에 필요한 모든 의존항을 설치할 것이다.나는 그것들을 다른 단계로 나눌 것이다.

일반 종속성 설치

npm install react react-dom single-spa single-spa-react single-spa-vue vue

babel 의존 설정

npm install @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader --save-dev

패키지 종속성 설치

npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin css-loader html-loader style-loader vue-loader vue-template-compiler --save-dev

현재 모든 의존항이 설치되어 있으며 폴더 구조를 만들 수 있습니다.
우리 프로그램의 주 코드는 src 디렉터리에 저장될 것입니다.이 src 디렉터리는 모든 프로그램의 하위 폴더를 저장합니다.src 폴더에 react와 vue 프로그램 폴더를 계속 만듭니다.

mkdir src src/vue src/react

현재 웹 패키지와 바벨을 위한 설정을 만들 수 있습니다.

웹 패키지 구성 만들기
기본 응용 프로그램의 루트 디렉토리에서 다음 코드를 사용하여 webpack.config.js 파일을 생성합니다.

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: {
    'single-spa.config': './single-spa.config.js',
  },
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool: 'source-map',
  externals: [],
  devServer: {
    historyApiFallback: true
  }
};

바베타 설정 만들기
기본 응용 프로그램의 루트 디렉토리에서 다음 코드를 사용하여 .babelrc 파일을 생성합니다.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    ["@babel/preset-react"]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

단일 스파 초기화
등록 프로그램은 한 스파가 언제 프로그램을 안내하고 불러오고 마운트하는지 알려주는 방식입니다.webpack.config.js 파일에서 입구점을 single-spa.config.js로 설정합니다.
프로젝트의 루트 디렉터리에 이 파일을 만들고 설정합니다.

독수요법.배치하다.js

import { registerApplication, start } from 'single-spa'

registerApplication(
  'vue', 
  () => import('./src/vue/vue.app.js'),
  () => location.pathname === "/react" ? false : true
);

registerApplication(
  'react',
  () => import('./src/react/main.app.js'),
  () => location.pathname === "/vue"  ? false : true
);

start();

이 파일에서 한 페이지의 메인 프로그램의 일부가 될 모든 프로그램을 등록할 수 있습니다.registerApplication의 호출 때마다 새 응용 프로그램을 등록하고 세 개의 매개 변수를 수락합니다.

애플리케이션 이름

로드 기능(로드 엔트리 포인트)

활성 기능

다음에, 우리는 모든 응용 프로그램에 코드를 만들어야 한다.

반응 응용
src/react에서 다음 두 파일을 생성합니다.

touch main.app.js root.component.js

src/react/main.응용 프로그램.js

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

function domElementGetter() {
  return document.getElementById("react")
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

src/react/root.구성 요소js

import React from "react"

const App = () => <h1>Hello from React</h1>

export default App

Vue 애플리케이션
src/vue에서 다음 두 파일을 생성합니다.

touch vue.app.js main.vue

src/vue/vue.응용 프로그램.js

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import Hello from './main.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(Hello)
  } 
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

src/vue/main.vue

<template>
  <div>
      <h1>Hello from Vue</h1>
  </div>
</template>

다음에 색인을 만듭니다.응용 프로그램 루트 디렉토리의 html 파일:

touch index.html

색인html

<html>
  <body>
    <div id="react"></div>
    <div id="vue"></div>
    <script src="/dist/single-spa.config.js"></script>
  </body>
</html>

패키지를 업데이트합니다.스크립트가 있는 json
프로그램을 실행하려면 가방에 시작 스크립트와 구축 스크립트를 추가합니다.json:

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack --config webpack.config.js -p"
}

어플리케이션 실행
애플리케이션을 실행하려면 start 스크립트를 실행하십시오.

npm start

이제 다음 URL에 액세스할 수 있습니다.

# renders both apps
http://localhost:8080/

# renders only react
http://localhost:8080/react

# renders only vue
http://localhost:8080/vue

To view the final code for this application, click here.

결론
전반적으로 말하면, 이 프로젝트를 세우는 것은 모든 최초의 견본 설정을 제외하고는 상당히 수월하다.
앞으로 대부분의 템플릿 파일과 초기 프로젝트 설정을 처리하기 위한 CLI가 있으면 좋을 것이라고 생각합니다.
만약 당신이 이런 유형의 구조를 필요로 한다면 Single-spa은 분명히 지금까지 가장 성숙한 방식이며 사용하기에 매우 적합하다.

My Name is . I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.