react 프로젝트 새로 만들기에서 배치까지의 실현 예시

새로운 프로젝트를 전개하다

본고는 최근에 작업한 새로운 프로젝트가 0-1에서 시작하는 과정을 기록하고 주로 3개 노드, 선형, 운행 시, 오프라인을 기록한다.

항목 선택

react 비계 초기화, 지역사회에서 비교적 핫한 것은cra(create-react-app)와umi가 있는데 다음과 같은 몇 가지를 비교하여 최종적으로 비교적 적합한 프로젝트의umi를 선택했다.

사용하기 쉽고 상자를 열면 바로 사용할 수 있다.ii는 많은 기능을 내장했지만 많은 제한을 가져왔다. 예를 들어 프로젝트 구조에 대한 규정은 자신의 생태적인 플러그인을 제공하는 데 학습 비용이 필요하다.cra는 간단명료한 템플릿을 초기화하면 시작할 수 있고 추가 학습 비용이 필요하지 않다(vue 유저가 와도 부담이 없다)

확장성, 웹팩 설정 수정.cra는 eject(거스를 수 없는 조작)를 제공하여 모두 자신의 제어를 드러내고 처음에 간단하게 설정하고자 했던 취지를 상실하거나react-app-rewired와customize-cra를 사용하면 여기를 볼 수 있습니다.umi는 웹 팩 설정을 수정해야 할 때 파일을 직접 쓸 수 있으며, 실행 상태의 설정도 제공합니다

생태,umi는 아리가 개원한 것이다. 그 안에 많은 플러그인들이 그들의 개원과 관련이 있다. 예를 들어 비교적 핫한antd,qiankun, 홈페이지에서 대량의 실천 지도를 제공했고 중국어 문서(일부 사람들은 이것을 선호한다),cra는 간결하게 하나의 비계 작업만 책임진다(내부 실현을 이해하기 쉽고 문제가 생기면 신속하게 포지셔닝하여 해결할 수 있다)

최종적으로 하나의 프로젝트를 신속하게 구축하려면 많은 성형된 플러그인 지원이 필요하다는 것을 고려하여umi를 사용했습니다.antd 향기롭다!!!@umijs/plugin-model, 이 플러그인은 내부 실천을 이해하면 기본적으로 데이터 관리를 파악할 수 있음을 추천합니다.

런타임

umi는 앱을 제공합니다.ts, 실행할 때 파일을 설정하면 실행할 때의 능력을 확장할 수 있습니다. 간단하게 이해하면 페이지를 렌더링하는 선행 동작을 여기에 놓을 수 있습니다.이 개념은 분류할 수 있다
storybook(preview.js)보다 html에 script를 삽입할 수 있습니다.여기에 일부 프로젝트 관련 내용이 관련될 수 있습니다. 프로젝트는 기존 프로젝트에 내장되어야 하기 때문에 우리는iframe의 방식을 채택하여 우리는 통신을 필요로 하고 iframe의 크기가 스스로 적응해야 합니다.
iframe 통신, 영역이 다르기 때문에 채택했습니다. 윈도우.postmessage.데이터 가독성 유지를 위해 대응하는 이벤트 전송 내용을 정의하고 후기 유지보수의 난이도가 높아지지 않도록 하며 빈번한 통신이 필요하다면 미전단 방안을 권장합니다.
iframe는 스스로 적응합니다. iframe-resizer 플러그인은 우리가 해결할 수 있도록 도와줍니다. 끼워넣는 것과 끼워넣는 것은 모두 설치해야 합니다. 그렇지 않으면 통신이 불가능하고 스스로 적응할 수 없습니다.여기에 문제가 발생했을 때 바디 노드가 내부에서 커질 수 없기 때문에 iframe-resizer가 제공하는 사용자 정의 계산 방법을 사용하여 하위 페이지에서 대응하는 방법을 제공해야 합니다.코드는 다음과 같습니다.
서브시스템

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
//  
const iframeInit = () => {
 if (parent !== window) {
  (window as any).iFrameResizer = {
   heightCalculationMethod: () => {
    return document.body.children[0].clientHeight;
   },
  };
  window.onmessage = (event: any) => {
   if (Array.isArray(event.data)) {
    if (event.data[0] === ' ') {
     console.log(event.data[1]) //  
    }
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

접속하다

한 차례의 포장을 거쳐 마침내 온라인에 도착했다.여기서는 주로nginx가 전송 요청을 어떻게 설정하는지 설명합니다.
개발 기간에 여러 개의 서로 다른 영역에 대한 인터페이스가 필요할 때 앞부분의 첫 번째 반응은 프록시를 설정하는 것이다.온라인에 접속했을 때 좀 멍해졌다.

 proxy: {
  '/api': {
   target: 'http://aaa.com',
   changeOrigin: true,
   pathRewrite: { '^/api': '' },
  },
  '/b-api': {
   target: 'http://bbb.com/',
   changeOrigin: true,
   pathRewrite: { '^/b-api': '' },
  },
 },

nginx 설정은 다음과 같습니다.

server {
  listen 80;
  server_name  ;
  set $rooturi "xxxx/dist";
  location ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
   expires 365d;
   root $rooturi;
  }
  location ^~/api/ {

   rewrite ^/api/(.*)$ /$1 break;
   proxy_pass http://aaa.com;
  }
  
  location ^~/b-api/ {

   rewrite ^/b-api/(.*)$ /$1 break;
   proxy_pass http://bbb.com;
  }
  
  location / {
   root $rooturi;
   try_files $uri $uri/ /index.html =404;
   add_header Cache-Control "no-cache";
   add_header Access-Control-Allow-Origin *;
  }

 
}

이는react 프로젝트의 신축에서 배치까지의 실현 예시에 관한 글입니다. 더 많은 관련react 신축에서 배치 내용에 대해서는 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!