React 를 사용 하여 구성 요소 라 이브 러 리 개발

최근 일상적인 업무 수요 에 대해 react 를 사용 하여[구성 요소 라 이브 러 리]를 봉 하여 전체 개발 과정 에서 의 소감 을 대충 기록 하 였 다.편폭 때문에 개발 과정 에서 비교적 고 민 스 러 웠 던 선형 과 포장 등에 대해 서 만 토론 하고,추 후 구체 적 인 구성 요소 의 포장 에 대해 서 는 토론 한다.
개술
우 리 는 구성 요소 화 된 개발 모델 이 우리 의 개발 효율 에 큰 향상 을 가 진 다 는 것 을 잘 알 고 있 습 니 다.우리 가 일상적으로 사용 하 는 기본 구성 요 소 를 패키지 하면 기본 UI 에 대한 우리 의 관심 도 를 대량으로 간소화 하고 업무 논리 에 초점 을 맞 추 며 업무 와 기초 UI 의 코드 를 잘 분리 하여 전체 프로젝트 를 더욱 조리 있 게 할 수 있 습 니 다.이것 도 우리 가 본 구성 요소 라 이브 러 리 개발 을 진행 해 야 하 는 이유 이다.
그러나 현재 React 오픈 소스 구성 요소 가 많 습 니 다.ant-design 과 material-ui 등 은 자신의 팀 에 맞 는 구성 요소 라 이브 러 리 를 만 드 는 데 신경 을 써 야 하 는 지 여 부 는 고려 해 야 합 니 다.우 리 는 기 존의 팀 과 업무 의 몇 가지 특징 을 살 펴 보 자.

전단 인원 이 비교적 많 고 서로 협력 해 야 하 며 구성 요 소 를 개발 할 여력 이 있다

제품 업무 가 상대 적 으로 복잡 하 므 로 일부 구성 요소 에 대해 맞 춤 형 개발 을 해 야 한다

이미 성숙 한 디자인 규범 이 있 고 각종 기초 구성 요소,기초 스타일 등에 대해 정 의 를 내 렸 다

4.567917.현재 의 프로젝트 는 비교적 난잡 하고 제3자 구성 요 소 는 난잡 하 다이 를 통 해 알 수 있 듯 이 우 리 는 자신의 구성 요 소 를 포장 하 는 정력 과 기 초 를 가지 고 있 으 며,기초 구성 요 소 를 통 해 현재 개발 현황 을 바 꾸 는 수 요 를 가지 고 있다.그래서 이 일 은 우리 가 마 땅 히 해 야 할 일이 고 가능 한 한 빨리 완성 해 야 할 일이 다.
기술 선택
구성 요소 라 이브 러 리 의 패 키 징 에 대해 우리 가 먼저 직면 하 는 것 은 기술 선택 과 방안 의 계획 이다.대략 다음 두 가 지 를 포함한다.
가장 기본 적 인 기술 방안
개발 절차 와 규범
기술 방안 선택
Webpack + React + Sass
팀 의 기 존 프로젝트 는 모두 React+Redux 를 바탕 으로 개발 되 었 기 때문에 우리 가 선택 한 개발 언어 는 React 임 에 틀림없다.
SASS
css 선택 에 대하 여 현재 구성 요소 화 개발 에 대하 여 CSS Modules 와 CSS-IN-JS 두 가지 모듈 화 솔 루 션 이 유행 하고 있 지만,우 리 는 우리 의 구성 요소 가 맞 춤 형 으로 제작 되 기 를 더욱 희망 합 니 다.따라서 구성 요소 에 대해 저 희 는 Sass 를 사전 컴 파일 언어 로 하여 효율 과 규범 성 을 제시 합 니 다.css-modules 에 맞 춰 우 리 는 실제 수요 에 따라 스타일 변경 을 편리 하 게 할 수 있 습 니 다.예 를 들 어 Tab 구성 요소 가 있 습 니 다.일반적인 스타일 을 정 의 했 습 니 다.

.tip-tab {
 border: 1px solid #ccc;
}
.tip-tab-item {
 border: 1px solid #ccc;
 
 &.active {
  border-color: red;
 }
}

업무 중 에 특정한 수요 에 따라 Tab 구성 요소 의 스타일 을 미세 조정 해 야 합 니 다.활성화(active)상태 에서 border-color 는 파란색 입 니 다.물론,우 리 는 우리 의 구성 요소 에 props 를 노출 시 킬 수 있 습 니 다.이러한 수정 에 대해 설정 하고,서로 다른 props 에 대응 하 는 스타일 을 입력 할 수 있 습 니 다.그러나 우 리 는 모든 업무 수 요 를 만족 시 키 지 못 하고 구성 요소 에 대해 각종 스타일 을 밀봉 할 수 없다.이러한 방안 에 대해 저 희 는 css-modules 를 사용 하여 유일한 모듈 스타일 을 추가 합 니 다.

<Tab styleName="unique-tab" />

이 모듈 에 대해 기본 스타일 을 수정 합 니 다.

.unique-tab {
 :global {
   .tip-tab-item {
    border-color: #eee;
    
    &.active {
     border-color: blue;
    }
   }
 }
}

이렇게 하면 이 모듈 의 맞 춤 형 스타일 에 대해 수요 에 맞 는 스타일 맞 춤 형 제작 을 잘 할 수 있 고 전체적인 스타일 을 오염 시 키 지 않 습 니 다.
Icon
프로젝트 아이콘 에 대해 svg-sprite 프로젝트 를 사용 할 계획 입 니 다.그러나 제품 이 계속 교체 되 는 과정 에서 새로운 아이콘 이 계속 증가 하고 있다.현재 우 리 는 아이콘 을 통일 적 으로 포장 하지 않 고 구성 요 소 를 포장 할 때마다 항목 에서 모든 아이콘 을 가 져 옵 니 다.다음 방식 으로 도입:

import Icon from '@common/lib'
import errorIcon from '@images/error.svg'

<Icon link={errorIcon} />

사실 더 좋 은 방법 은 모든 아이콘 을 통일 적 으로 포장 하여 svg-spirte 파일 을 만 드 는 것 입 니 다.우리 가 사용 할 때 직접 인용 하면 됩 니 다.매번 포장 을 하지 않 고 웹 팩 처리 의존 시간 을 줄 일 수 있 습 니 다.

<Icon type="error" />

개발 절차 와 규범
개발 절차 와 규범 에 대해 우 리 는 다음 과 같은 몇 가지 원칙 을 따른다.

구성 요소 라 이브 러 리 는 프로젝트 에 완전히 독립 하여 개발 하고 후속 여러 프로젝트 의 사용 에 편리 하 다

구성 요소 라 이브 러 리 는 세 가지 모델 을 포함한다.개발,테스트,포장,문서 사례,서로 다른 입구 와 상 태 를 구분 한다

Pure-renderautobid 등 을 사용 하여 가능 한 한 구성 요소 의 성능 과 효율 을 확보 합 니 다

props 와 반전 의 의미 성 을 확보 합 니 다.예 를 들 어 반전 은 handle XXX 를 통일 적 으로 사용 하여 처리 합 니 다

후속 적 인 확장 을 편리 하 게 하기 위해 서,우 리 는 전체 구성 요소 라 이브 러 리 가 프로젝트 에서 완전히 벗 어 나 개발 하 기 를 더욱 바란다.구성 요소 라 이브 러 리 는 가장 기본 적 인 구성 요소 만 패키지 하고 프로젝트 UI 코드 와 비 즈 니스 논 리 를 분리 합 니 다.
서로 다른 모델 에서 우 리 는 서로 다른 파일 입 구 를 가지 고 개발 모델 에 대해 dev-server 를 시작 하여 구성 요 소 를 기본 적 으로 패키지 하고 디 버 깅 을 합 니 다.포장 할 때,우 리 는 구성 요소 의 내용 을 봉인 하고 통 일 된 인 터 페 이 스 를 노출 하기 만 하면 된다.문서 에서 우 리 는 사례 와 설명 을 보 여 줘 야 한다.그래서 저 희 는 웹 팩 의 특성 을 이용 하여 다양한 환경 설정 을 하고 있 습 니 다.

npm run dev //   
npm run test //   
npm run build //   
npm run styleguide //     
npm run styleguide:build //     

구성 요소 라 이브 러 리 는 프로젝트 의 최소 역량 지원 으로서 가장 기본 적 인 렌 더 링 효율 을 확보 해 야 하기 때문에 Pure-render/autobind 등 을 사용 하여 기본 적 인 최적화 를 해 야 합 니 다.React 는 많은 최적화 방식 이 있 으 므 로 여기 서 군말 하지 않 는 다.
포장 하 다.
기초
구성 요소 라 이브 러 리 의 포장 에 대해 UMD 형식 으로 포장 합 니 다.웹 팩 은 출력 에 대한 형식 설정 을 할 수 있 습 니 다:(cnode 에서 인용)
"var"는 변수 로 출력 합 니 다

"this"는 this 의 속성 으로 출력 합 니 다:this["Library"]=xxx;

"commonjs"는 exports 의 속성 으로 출력 합 니 다.exports["Library"]=xxx;

"commonjs 2"는 module.exports 형식 으로 출력:module.exports=xxx;

"amd"는 AMD 형식 으로 출력 합 니 다

"umd"는 AMD,CommonJS 2 와 전역 속성 형식 으로 출력 합 니 다

설정 은 다음 과 같 습 니 다:

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].js'),
 chunkFilename: utils.assetsPath('js/[id].js'),
 library: 'TipUi',
 libraryTarget: 'umd'
}

의지 하 다
분명히 우리 가 봉 인 된 것 은 React 에 대한 구성 요소 라 이브 러 리 입 니 다.React 를 인용 해 서 는 안 됩 니 다.일반적으로 우 리 는 externals 의 방식 으로 그것 을 처리 할 수 있다.
여기 서 저 희 는 dll 방식 으로 다른 제3자 와 통일 적 으로 포장 하고 manifest.json 과 세 측 이 의존 하 는 출력 파일 을 프로젝트 에 출력 하 며 프로젝트 에서 도 dllReference 를 사용 하여 참조 합 니 다.프로젝트 에서 이러한 의존 을 사용 할 때 중복 포장 을 하지 않도록 합 니 다.
또한,우리 의 구성 요소 라 이브 러 리 는 계속 유지 되 는 상태 에 있 기 때 문 입 니 다.이것 은 우리 가 프로젝트 라 이브 러 리 와 프로젝트 간 의 포장 관 계 를 잘 유지 해 야 한다.구체 적 인 절 차 는 그림 과 같다.

프로젝트 를 포장 할 때마다 UI 라 이브 러 리 가 업데이트 되 었 는 지 먼저 확인 하고 업데이트 되 지 않 으 면 바로 포장 합 니 다.반대로 dll 의존 에 변화 가 있 는 지 계속 검사 합 니 다.있 으 면 dll 을 포장 합 니 다.그렇지 않 으 면 구성 요소 라 이브 러 리 내용 을 직접 포장 합 니 다.그리고 출력 결 과 를 항목 에 동기 화하 고 최종 포장 을 합 니 다.
물론 이상 의 절 차 는 모두 자동 으로 진행 된다.
문서 와 예제
하나의 완벽 한 문 서 는 하나의 구성 요소 라 이브 러 리 와 그 중요 한 것 입 니 다.각 구성 요소 가 어떤 설정 매개 변 수 를 가지 고 있 는 지,어떤 이벤트 가 반전 되 고 해당 하 는 데모 와 전시 효 과 를 가지 고 있 는 지.만약 이런 것들 이 없다 면,패키지 구성 요 소 를 제외 하고,그것 을 어떻게 사용 해 야 할 지 아 는 사람 이 없다.그러나 문 서 를 쓰 는 과정 은 종종 고통스럽다.여기 서 몇 개의 문서 생 성 라 이브 러 리 를 추천 하면 문서 작업 을 크게 간소화 할 수 있다.
Vue 기반 구성 요소 생 성기,경 량 사용
docsifyReact 기반 구성 요소 라 이브 러 리 문서 생 성 기 는 주석 에 따라 문 서 를 자동 으로 생 성하 고 Demo 전 시 를 지원 합 니 다.매우 쓰기 좋다.
ant design 이 직접 작성 한 문서 생 성기
우리 가 사용 하 는 styleguidist 는 md 를 자동 으로 문서 로 바 꿀 수 있 습 니 다.md 에서 봉 인 된 구성 요 소 를 직접 호출 하여 보 여 주 는 것 을 지원 합 니 다.간단 하고 좋 습 니 다.마지막 으로 봉 인 된 문 서 는 대략 이렇게 깁 니 다.

총결산
사실 패 키 징 구성 요소 라 이브 러 리 라 는 작업 은 고려 하고 연구 할 만 한 것 이 많 습 니 다.지면 상의 원인 으로 인해 개발 과정 에서 비교적 고 민 스 러 운 선택 과 포장 등 만 토론 하고 나중에 구체 적 인 구성 요소 의 패 키 징 에 대해 토론 합 니 다.글 을 쓰 는 동시에 ant design 이라는 우수한 구성 요소 라 이브 러 리 를 계속 참고 하면 많은 것 을 배 울 수 있 습 니 다.패 키 징 구성 요소 의 사상 을 더욱 깊이 이해 하 는 것 은 좋 은 과정 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.