times components 다운로드 - times components 소스 코드 다운로드

times components

타사 구성 요소

1.0.0

다운로드

타임즈 구성 요소 라이브러리

목적

Times ' react 구성 요소의 집.

개발 환경

node.js가있는 macOS가 필요합니다 (특정 버전의 경우 package.json 제한을 확인하십시오), Yarn (최신)

이러한 요구 사항없이 시도 할 수 있지만 혼자있을 것입니다.

우리의 구성 요소보기

http://components.thetimes.co.uk로 이동하십시오

시작하기

yarn install 실행하십시오
구성 요소는 스토리 북에서 실행되는 것을 볼 수 있습니다

스토리 북
1. yarn storybook
2. http : // localhost : 9001로 이동하십시오

개요

스키마 업데이트 방법에 대한 UTILS 패키지를 참조하십시오.

디버깅

이 프로젝트의 구성 요소는 브라우저의 개발자 도구를 통해 디버깅 할 수 있습니다. 이 단계는 Chrome Devtools의 사용을 가정합니다.

웹 스토리 북 디버그 :

yarn storybook
http : // localhost : 9001로 이동하십시오
DevTools를여십시오
클릭 소스
가장 왼쪽 창 아래의 네트워크 탭에서 top => storybook-preview-iframe => webpack : // =>를 확장하십시오 . => 패키지

이러한 소스 파일 중 하나는 직접 디버깅 할 수 있습니다.

시간 경쟁을 렌더 프로젝트에 연결하십시오

여기에서 다음 단계를 따르십시오

또한 파이프 라인에서 카나리아 릴리스를 수행 할 수있는 옵션이 표시되며, 렌더로 가져올 수있는 변경 사항 테스트 버전을 게시합니다.

RNW.JS 파일로 렌더링 변경 사항을 확인하십시오

Times 구성 요소와 렌더 리포지토리를 연결하는 것 외에도 rnw.js 파일을 통해 렌더링에서 Times 구성 요소에 대한 변경 사항을 볼 수 있습니다.

시간 구성 요소에서 변경 한 후 작업중인 패키지에서 yarn bundle 실행하십시오. ts-components 패키지에서 작업중인 경우 먼저 yarn build 실행 한 다음 yarn bundle 실행해야합니다.
명령을 실행하면 폴더의 루트에 rnw.js 파일이 생성됩니다. 변경 사항이 발생했는지 확인하려면 파일을 확인하십시오.
rnw.js 파일의 내용을 복사하여 Render의 node_modules 의 관련 파일에 붙여 넣습니다. 예를 들어, article-skeleton 패키지의 RNW.JS 파일을 시간 구성 요소로 묶은 경우 컨텐츠를 node_modules/@times-components/article-skeleton/rnw.js 에 붙여 넣습니다.
렌더링을 실행하면 변경 사항이 표시됩니다.

테스트 디버깅

테스트는 현재 Jest를 사용하여 실행 중이므로 테스트를 디버깅하려면 다음 단계를 따르십시오.

(테스트 명령 찾기) jest --config="./packages/provider/__tests__/jest.config.js" . 테스트에서 시작하는 디렉토리에 따라 --config 그 디렉토리가 다를 수 있습니다. 내 Currenct 디렉토리는 Repo Root : times-components 에 있습니다.
체크 아웃하려는 Speciffic 패키지는 package.json 의 테스트 명령을 참조하십시오.

참고 : 전 세계적으로 농담이 설치되어 있지 않으면 node_modules/.bin/jest 에서 로컬로 사용할 수 있습니다.

(디버그 모드에서 테스트 시작) 우리는 동일한 명령을 시작해야하지만 디버그 모드에서 노드를 통해 : node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

참고 : --runInBand 는 현재 프로세스에서 모든 테스트를 연속적으로 실행하는 jest 플래그입니다. 이 플래그를 추가하지 않으면 jest 시작한 노드 프로세스 만 디버그 할 수 있습니다.

(디버그 명령문 추가) Normaly 중단 점을 추가하지만 원격 디버깅을 할 때는 항상 불가능한 것은 아닙니다. 브레이크 포인트를 켜야하는 파일이 아직 jest 에 의해로드되지 않았기 때문에 항상 가능하지는 않습니다. 따라서 디버거가 원하는 위치에 정지하려면 debugger; 코드의 중단 점 대신 명령문과 필요한 경우 다시 전환하십시오.
(웹 소켓에 첨부) 디버그 모드에서 테스트를 시작한 후에는 다음에 연결해야합니다.

(권장) 노드에 Chrome Remote Debug 사용 :
1. chrome://inspect
2. Open dedicated DevTools for Node
3. 앞서 언급 한 명령으로 테스트를 시작한 경우 자동으로 연결해야하지만 팝업 창의 Connection 탭으로 이동하지 않고 Connection localhost:9229 또는 포트가 무엇이든 추가하십시오.
4. Debugger는 --inspect-brk 플래그 때문에 첫 번째 줄에서 중지해야하며, 일단 재생 버튼 (이력서 실행)을 누르면 debugger; 성명
참고 : 일단 중지되면 모든 코드가 한 줄로 번들로 표시 될 수 있습니다. 그에 대한 쉬운 수정 사항이 있습니다. Line: 1 Column: 1 라벨이 코드를 예열 할 수있는 {} 버튼이 표시되며 여전히 제대로 디버깅 할 수 있습니다.
(VSCODE 사용) 구성은 다음과 같아야합니다.

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]