미광 전단.js와 1인용 수욕 센터

28040 단어 singlespaglimmerjsmicrofrontends
이 글은 Glimmer.js 라이브러리를 사용하여 single-spa이 있는 마이크로 전단을 만드는 방법을 소개합니다.
우리는 성전비키 같은 간단한 프로그램을 만들 것이다. 그 중에서 두 페이지만 성전영화의 행성과 인물 참고 목록을 표시할 수 있다.행성 페이지에는 영화 속의 행성과 그 상세한 정보가 열거될 것이다.마찬가지로 인물 페이지에는 영화 속의 인물과 그 상세한 정보가 열거된다.
액션 here에서 Glimmer Micro 프런트엔드를 볼 수 있으며 소스 코드는 github org에 있습니다.
본 강좌를 깊이 배우기 전에, 우리는 먼저 우리가 사용할 도구와 기술을 분명히 해야 한다.

마이크로 프런트 엔드


Micro-Frontends은 마이크로서비스 이념을 전방위 개발로 확대했다.이것은 기술, 전략과 식단의 집합으로 현대 인터넷 응용 프로그램을 구축하는 데 사용되며, 이 응용 프로그램은 여러 팀으로 구성되어 독립적으로 기능을 발표할 수 있다.

섬광js


Glimmer은 가장 빠른 DOM 렌더링 엔진 중 하나로 초기 렌더링 및 업데이트에 뛰어난 성능을 제공합니다.Glimmer의 구조는 가상 기기 (VM) 와 유사하며, 템플릿을 저급 코드로 컴파일하여 사용하기 쉬운 상황에서 가능한 한 빨리 실행할 수 있도록 한다.Glimmer VM은 Ember.js의 구성 요소에 전원을 공급합니다.

독수요법


single-spa은 프런트엔드 마이크로서비스를 위한 JavaScript 라우터입니다.단일 스파를 사용하면 한 페이지 응용 프로그램에서 여러 프레임을 사용할 수 있으며 Angular, React 및 Vue와 함께 기능별로 코드를 분할할 수 있습니다.js 등 응용 프로그램은 모두 조화롭게 생활한다.단수요법은 필요할 때까지 함께 일할 수 있다.

독수요법


single-spa-glimmer은 Glimmer와 함께 사용할 수 있도록 단일 spa로 등록된 프로그램의 생명주기 기능(안내, 마운트 및 마운트)을 실현하는 데 도움을 주는 도움말 프로그램 라이브러리입니다.더 많은 정보는github 저장소를 보십시오.
우리가 이 라이브러리에서 특히 mount 생명주기 갈고리에서 하고 있는 중요한 일은 다음과 같다.
function mount(opts) {
  return Promise
    .resolve()
    .then(() => {
      // Turning off validator registration for allowing multiple glimmer apps in same page
      globalThis[Symbol.for('GLIMMER_VALIDATOR_REGISTRATION')] = false;
      const { renderComponent, App, root, owner } = opts;
      const element = document.getElementById(root);
      renderComponent(App, { 
        element,
        owner,
      });
    });
}
여러 개의 Glimmer 응용 프로그램이 HTML 페이지에 공존할 수 있도록 @glimmer/validator 등록을 닫으려고 합니다.현재로서는 불가능한 일이지만 John Griffin이 issue 저장소에서 만든 glimmer-vm에서 제시한 이 같은 해결 방안 덕분이다.

단일 수욕 핵심팀에서 추천한 설정


single spa core팀은 일련의 관례에 따라 모든 프레임워크를 가진 마이크로 전단을 만드는 기본 설정을 사용하도록 권장합니다. 이것은 우리가 장기적으로 마이크로 전단을 확장하는 데 도움이 될 것입니다.
다음 설정을 따르겠습니다.
glimmer-micro-frontends
|- root-config
|- navbar
|- people
|- planets

루트 구성


이것은 host app입니다. 이것은 하나의 스파를 사용하여 모든 다른 소형 전단을 관리합니다.
CLI를 사용하여 루트 구성 애플리케이션을 생성하는 방법에 대해 살펴보겠습니다.
터미널에서 create-single-spa 명령 호출
create-single-spa
디렉토리, 응용 프로그램 유형 등의 옵션을 제공합니다.단일 브라우저에서 다양한 종류의 스파와 스파 프로그램을 만들 수 있습니다.다양한 유형의 모듈 here에 대한 자세한 내용을 볼 수 있습니다.
이 항목에 대해 single-spa root config 옵션을 선택하고 다른 연속 알림에 따라 조작해야 합니다.
? Directory for new project 
? Select type to generate (Use arrow keys)
  single-spa application / parcel
  in-browser utility module (styleguide, api cache, etc)
❯ single-spa root config
생성기가 완성되면 두 개의 파일을 포함하는 src 폴더를 가지게 됩니다.index.ejs은 우리 호스트 응용 프로그램의 html 템플릿으로 그 중에서 다른 마이크로 전단에 자리 차지 문자를 설정할 것입니다.
 <template id="single-spa-layout">
    <single-spa-router>
        <application name="@glimmer-mf/navbar"></application>
        <div id="navbar"></div>
      <main>
        <route default>
        <p class="mfe-info">
        This example project shows independently built and deployed microfrontends that use <a href="https://glimmerjs.com">Glimmer.js</a> and <a href="https://single-spa.js.org">single-spa</a>. Each nav link above takes you to a different microfrontend.
        </p>
        </route>
        <route path="people">
        <application name="@glimmer-mf/people"></application>
        </route>
        <route path="planets">
        <application name="@glimmer-mf/planets"></application>
        </route>
      </main>
      <footer>
        <p><a href="https://github.com/glimmer-mfe">Github</a></p>
      </footer>
    </single-spa-router>
  </template>
다음 파일은 root-config.js입니다.여기에서 Glimmer micro 프런트엔드를 모두 등록하려면 단일 spa registerApplication을 사용하십시오.
우리가 이곳에서 사용하는 것은 single-spa-layout 엔진이다.레이아웃 엔진은 최상위 레벨 라우팅, 응용 프로그램 및 DOM 요소를 제어하는 라우팅 API를 제공합니다.단일 스파 레이아웃을 사용하면 다음 작업을 쉽게 수행할 수 있습니다.
  • 애플리케이션의 DOM 배치 및 정렬
  • 어플리케이션을 다운로드할 때 UI를 로드합니다.
  • 에서/404페이지의 기본 라우트를 찾을 수 없습니다.
  • 단일 spa 어플리케이션을 위한 서버측 렌더링
  • 오류 페이지
    • 레이아웃 엔진에 대한 자세한 내용은 official documentation을 참조하십시오.
    import { registerApplication, start } from "single-spa";

import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
const routes = constructRoutes(document.querySelector("#single-spa-layout"));
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });
applications.forEach(registerApplication);
start();

    탐색 모음


    이 app은 url의 경로에 따라 서로 다른 마이크로 전단으로 갈 수 있는 내비게이션 표시줄을 포함하고 있다.src/App.js 구성 요소에 탐색 표시를 만듭니다.
     <nav id="global-nav" {{startRouting}}>
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/people">People</a></li>
    <li><a href="/planets">Planets</a></li>
    </ul>
 </nav>
    마지막으로 Glimmer 응용 프로그램의 생명 주기를 src/index.js의 단일 스파 라이브러리와 연결해야 합니다.우리는 single-spa-glimmer 함수에 부모 구성 요소를 제공하고 응용 프로그램 소유자 대상에게 주입할 서비스 목록을 제공하며 renderComponent에 @glimmer/core 함수를 제공하고 부모 구성 요소를 설치하는 데 DOM 요소 id를 제공해야 한다.id는 루트 설정 표시에서 보여준 프로그램 이름과 같습니다.
    예를 들어 프로그램 이름이 @glimmer-mf/people이면 DOM 요소 id는 single-spa-application:@glimmer-mf/people이고 프로그램에서 /people URL에 접근할 때마다 이 요소 id는 하나의 스파 레이아웃 엔진에서 자동으로 만들어져 DOM에 추가됩니다.
    import { renderComponent } from '@glimmer/core';
import App from './App.js';
import LocaleService from './services/LocaleService.js';
import RouterService from './services/RouterService.js';
import singleSpaGlimmer from './single-spa-glimmer.js';

const root = 'single-spa-application:@glimmer-mf/people';
const owner = {
  services: {
    locale: new LocaleService('en_US'),
    router: new RouterService()
  }
};
const glimmerLifecycles = singleSpaGlimmer({
  App,
  renderComponent,
  root,
  owner
});

export const bootstrap = glimmerLifecycles.bootstrap;
export const mount = glimmerLifecycles.mount;
export const unmount = glimmerLifecycles.unmount;
    우리는 우리가 만든 모든 Glimmer 응용 프로그램에 대해 상술한 절차를 실행해야 한다.

    사람


    이 micro frontend은 인원 페이지에 사용되며 스타워즈 API SWAPI을 사용하여 인원과 상세한 정보를 나열합니다.
    api를 가져와 이 프로그램의 인원 목록을 표시하는 기능 코드에 대해 깊이 있게 논의할 생각은 없습니다.이것은 이미 나의 이전 블로그 글에서 토론한 적이 있다.

    여신 마이크로 전단, 단수 치료 센터

    라자스카 첸델란・ 20년 10월 30일・ 9분 읽기

    #ember #singlespa #microfrontends #spa

    반면 Glimmer 응용 프로그램의 webpack.config.js을 살펴보겠습니다. 단수요법 호환성을 실현하기 위해 조정이 필요하기 때문입니다.
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = (env) => {
  return {
  mode: env.production ? 'production' : 'development',
  entry: './src/index.js',
  output: {
    filename: 'people.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'system',
    publicPath: env.production ? 'https://glimmer-mf-people.surge.sh/' : '//localhost:8081/'
  },
  devtool:'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins:[ 
              ['@glimmer/babel-plugin-glimmer-env', { DEBUG: true}],
              '@glimmer/babel-plugin-strict-template-precompile',
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              '@babel/plugin-proposal-class-properties',
            ],
            presets: [['@babel/preset-env', { targets: { esmodules: true } } ]],
          },
        },
      },
    ],
  },
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    }
  }
};
}
    설정에서 주의해야 할 중요한 점은 libraryTarget 속성이다. 이 속성은 system의 값을 부여받아 구축이 하나의 스파와 호환되도록 한다. 왜냐하면 엔진 뚜껑 아래에서 System.js을 사용하기 때문이다.제안된 build tools 구성에 대한 자세한 내용은 Webpack과 Rollup 같은 다양한 번들에 적용됩니다.
    웹 패키지를 사용하여 Glimmer에서 하나의 spa를 반복해서 사용할 수 있는 환매 예시를 만들었습니다. 그러면 처음부터 하나의 spa를 사용하여 Glimmer 마이크로 전단을 만들 필요가 없습니다.

    라자스카 / 미광 중학교 학위 분배


    Glimmer의 단수 요법 마이크로 전단 응용 프로그램 템플릿js


    미광 중학교 학위 분배


    single-spa의 glimmer 애플리케이션 템플릿입니다.

    사용법


    git를 통해 클론 복제
    git clone https://github.com/rajasegar/glimmer-sspa
    아니면 degit 이런 거 써요.
    degit rajasegar/glimmer-sspa

    사용 가능한 스크립트


    npm 시작


    응용 프로그램을 개발 모드로 실행합니다.
    브라우저에서 http://localhost:8080을 엽니다.
    편집하는 경우 페이지가 다시 로드됩니다.
    콘솔에서 lint 오류를 볼 수 있습니다.

    npm 운영 구축


    사이트의 정적 복제본을 build/ 폴더로 생성합니다.
    당신의 응용 프로그램은 이미 배치할 준비가 되어 있습니다!
    View on GitHub
    이것이 바로 people이 실제 응용에 응용되는 모습이다.

    행성.


    planets 마이크로 전단은 people 마이크로 전단과 거의 비슷하지만 SWAPI의planets api를 사용했다.

    어플리케이션 실행


    위와 같은 모든 작업을 정확하게 마치면 Glimmer 마이크로frontends를 시작할 수 있습니다. yarn start 프로그램에서 root-config을 시작하면 로컬 환경에서 이 프로그램의 실행을 볼 수 있습니다.
    yarn start
    이렇게 하면 어플리케이션을 시작하여 포트 9000에서 webpack-dev-server을 시작하고 localhost:9000에서 어플리케이션을 볼 수 있습니다.

    다음은요?


    Glimmer를 사용하여 마이크로 전단을 만드는 방법에는 아직 갈 길이 멀다.응용 프로그램 내부의 루트에 있어서 우리는 약간의 도전을 해결해야 한다.
    이것은 Glimmer를 사용하여 마이크로 전단을 만드는 새로운 방법이다.모든 전단의 js.Glimmer는 경량급이고 빠르기 때문에, 루트와 렌더링 구성 요소에 필요한 모든 다른 템플릿 코드를 대체할 수 있습니다.
    특정 프레임워크의 제한을 받지 않고, 다른 Glimmer 프로그램으로 마이크로 프론트에 추가할 수 있는 모든 프레임워크를 자유롭게 선택할 수 있습니다.
    만약 다른 마이크로 전방과의 의존 관계를 바꾸면, 싱글 스파는 다른 마이크로 전방을 위탁 관리하는 곳에서 의존 관계를 등록하기 때문에 다른 Glimmer 응용 프로그램을 재배치할 필요가 없다.
    브라우저에서 제공하는 single-spa-inspector 브라우저 플러그인을 사용하여 프로그램을 동적 마운트/마운트 해제할 수 있습니다.Chrome과 Firefox 브라우저를 지원합니다.

    로컬 개발 환경에서 모든 마이크로 프런트엔드를 테스트할 수 있도록 브라우저의 응용 프로그램을 실행할 때 추가 구성 요소로 덮어쓸 수도 있습니다.
    댓글 부분에서 싱글 스파를 사용하여 Glimmer 마이크로 전단을 구축하는 것에 대한 생각을 알려주세요. 싱글 스파가 React, Vue, Svelte, Preact 등 다른 구조에서 마이크로 전단을 구축하는 생각도 볼 수 있습니다.
    예제 목록은 page에서 확인할 수 있습니다.

    참조 자료:

  • single-spa
  • single-spa-glimmer
  • Glimmer.js
  • glimmer-micro-frontends
  • Github source code
    • t.Cleanup() 쓰기 병렬 이동 테이블 드라이브 테스트
    [macOS] Install_mackerel-agent

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage