Bit 프로젝트 간 공동 작업 구성 요소 사용 방법

우리들 대부분은 구성 요소로 웹 프로젝트를 구축한다.그것은 우리의 코드를 더욱 재사용 가능하고 유지보수 가능하며 테스트 가능하며 이해하기 쉽고 디버깅하기 쉽게 한다.
프로젝트에서 사용할 수 있도록 구성 요소를 자주 공유합니다.UI에 사용되는 '디자인 시스템', util 함수가 있는 '도구상자', 우리의 논리에 사용됩니다.

Why, then, do we stop there? Why not share and collaborate on everything? 

사실 구성 요소에서 공유와 협업은 쉽지 않다.같은 저장소에서 구성 요소를 한데 묶어 하나의 패키지로 발표할 수 있지만, 이렇게 되면 진정한 '구성 요소 협업'이 아니라 프로젝트에서 협업할 수 있습니다.
당신이 진정으로 필요로 하는 것은 모든 프로젝트의 단일 구성 요소를 개발하고 공유하며 수정하는 방법입니다.왜?프로젝트에 대한 구성 요소 (구성 요소 버전) 를 선택할 수 있고, 변경 사항을 제시할 수 있기 때문에 실제 구성 요소를 사용할 가능성을 높일 수 있습니다.
이것은 자연히 더 빠른 개발과 더 높은 코드 표준으로 바뀔 것이다.

Bit – 구성 요소 기반 개발을 위한 완벽한 솔루션을 소개합니다.

Bit는 확장 가능한 개발 플랫폼으로 구성 요소에 대한 협업에 필요한 모든 것을 제공한다(즉, 프로젝트에서만 협업하는 것이 아니다)
Bit의 기본 기능부터 시작하겠습니다.

구성 요소 소스 코드 제어 - 기본적으로 하나의 구성 요소를 위한git입니다.

독립된 구성 요소 개발 - 독립된 표현, 테스트와 구축을 포함한다.

구성 요소 의존 관계 관리 - 자동으로 생성된 구성 요소 의존 관계도와 스마트 의존 관계 관리.이것은 두 가지 종류의 의존 관계를 포함한다. 그것이 바로 노드 패키지와 다른 구성 요소이다. (잠시 후에 상세하게 설명할 것이다.)

작업흐름

Google은 Bit 작업공간을 만들고git를 사용하여 버전화하며, Bit를 사용하여 모든 구성 요소 (작업공간에서 관리) 를 독립적으로 버전화할 것입니다.
두 레이어 버전 제어, 한 레이어는 전체 프로젝트에 사용되고 다른 레이어는 어셈블리에 사용됩니다.보시다시피 이 두 가지 방법은 업무를 조율하여 코드 방면에서 더욱 좋고 효과적인 협업을 이룰 수 있습니다.
Bit는 모든 구성 요소에 독립적으로 버전 설정을 할 뿐만 아니라 모든 구성 요소를 독립적으로 개발하고 테스트하며 구축할 수 있도록 할 것이다.

프로젝트 저장소(Bit 작업공간)가 Github로 전송됩니다.

구성 요소(소스 코드는 Bit 제어, Bit 작업공간 관리)가 원격 Bit 역할 영역으로 전송됩니다

.

구성 요소가 새로운 발표 버전으로 표시되기 전에 협업을 하기 위해 작업 영역을 업데이트하여 새로운 발표 버전을 제안합니다.이 작업 영역을 Github로 전송하면 CI (Github 작업) 는 이 제안에 따라 새로운 버전으로 제안된 구성 요소를 표시하고 원격 비트 범위로 전송합니다. (그곳에서 다른 비트 작업 영역으로 복제할 수 있습니다.)

1. Bit 및 git 초기화

Bit 작업공간은 여러 개의 구성 요소를 함께 개발하고 조합하는 곳으로 각 구성 요소를 하나의 독립된 프로젝트로 유지보수한다.

$ mkdir my-workspace   # create a directory for our workspace
$ cd my-workspace      
$ git init             # initialize git
$ bit init --harmony   # initialize Bit

다음 파일이 생성되었습니다.

├── my-workspace
    └── .git
       ├── bit
       ├── ...
    ├── .bitmap
    └── workspace.jsonc

workspace.jsonc - 작업공간과 모든 어셈블리에 대한 규칙 및 정책을 설정하는 작업공간 구성 파일입니다.
미래의 모든 구성 요소에 대한 설정 파일은 하나뿐입니다.이것은 Bit와 유사한 CSS의 설정 시스템 덕분이다. 이 시스템에서 하나의 구성 요소가 함께 선택되고 설정되며, 특정한 선택이 더욱 일반적인 선택을 덮어쓴다..bitmap - 이것은 구성 요소 파일이 구성 요소 ID에 비추는 곳이다. 이렇게 하면 Bit는 그것들을 추적하고 그것들을 독립된 단원으로 관리할 수 있다(기본적으로 이것이 바로'독립개발'의 시작이다)..git/bit - 로컬 범위입니다.작업공간 어셈블리 라이브러리를 저장할 위치입니다.

2. 구성 요소 파일, 원본 코드 관리를 만들고 독립된 구성 요소로 관리

"단추"와 "응용 프로그램 표시줄"두 개의 React 구성 요소를 만듭니다.모든 구성 요소는 자신의 디렉터리를 가지고 있습니다.

├── my-workspace
    ├── .git
    ├── components
       ├── button
       └── app-bar
    ├── .bitmap
    └── workspace.jsonc

각 파일에는 다음과 같은 파일이 있습니다.*.ts - 어셈블리 구현 파일*.compositions.tsx - 어셈블리 독립 미리보기*.spec.ts - 구성 요소 테스트*.docs.mdx - 구성 요소 문서index.ts - 어셈블리 엔트리 파일
그들을 추적하기 위해 우리는 다음과 같이 운행할 것이다.

$ bit add components/button
$ bit add components/app-bar

우리의 구성 요소는 현재 모두 독립적으로 관리하고 원본 코드로 제어된다.
이제 Bit의 작업공간 UI에서도 추적된 구성 요소를 볼 수 있습니다.이러한 정보를 보려면 Bit 서버를 실행하고 를 엽니다localhost:3000.

$ bit start

3. 각 구성 요소의 CI를 실행하고 새 릴리즈로 태그 지정

우리의 구성 요소는 이미 준비가 되어 있으며, 새로운 발표 버전을 사용하여 구축하고 표시할 수 있습니다.
우리는 버튼의 버전1.0.0과 app-bar의 버전0.0.1을 tag으로 설정할 것이다.

$ bit tag button 1.0.0 --message "public release"
$ bit tag app-bar 0.0.0 --message "initial version"

상기 workspace.jsonc 명령은 우리의 구성 요소를 버전화할 뿐만 아니라 각자의 독립된 환경에서 구축할 것이다.즉, 원본 파일과 설정 (package.json 을 작업 영역의 나머지 부분과 분리된 디렉터리로 복사합니다.일단 완성되면 그것을 테스트하고 구축할 것이다.

The build workflow, the test runner, the compiler, the linter, and other development tools - are all determined by a pre-configured shareable component development environment. Learn more about it here.

구축 과정에서 발생하는 부품과 모든 구성 요소의 원본 파일과 설정은 버전 제어를 할 것입니다.

이 버전 중 하나는 구성 요소의 패키지입니다. (자동으로 생성된 workspace.jsonc 파일이 있습니다.다른 구성 요소에서 사용할 수 있는 패키지는 다음과 같습니다.

동일한 작업공간

에 작성된 구성 요소 사용

Bit 작업공간에 클론 복제

구성 요소 사용

Bit 또는 기타 npm 클라이언트

로 설치된 구성 요소(패키지로 사용)
...

어셈블리에서 공동 작업

4. 어셈블리 내보내기(밀어넣기) 및 가져오기(클론)

git 메모리 라이브러리가 원격 트랜잭션(예를 들어 Github)으로 밀린 것처럼 도component repositories도 원격 트랜잭션, 원격'작용역'으로 밀렸다.
구성 요소를 원격 역할 도메인으로 내보내기(Push)하려면 다음을 실행합니다.

$ bit export

구성 요소를 푸시하는 원격 역할 영역은 .bitmap 구성 파일에 설정됩니다.
원격 역할 영역은 bit.dev에서 무료로 만들 수도 있고 by hosting on your own server에서 만들 수도 있다.
구성 요소를 Bit 작업공간으로 가져오려면 다음을 실행합니다.

$ bit import <component-id>

공유 구성 요소는 bit.dev에서 찾을 수 있습니다.

5. Bit 및 git의 새 구성 요소를 사용하여 릴리즈하는 것이 좋습니다.

로컬에서 새 릴리즈 버전으로 구성 요소를 표시하고 로컬 컴퓨터에서 내보내는 대신 다음 프로그램을 실행할 수 있습니다.

$ bit tag --soft <component-id> <new-version>

이것은 제안된 버전 업데이트 BIT_TOKEN 파일을 사용합니다. (실제적으로 새로운 발표 버전 표시 구성 요소를 사용하지 않습니다.)
Github (.bitmap 파일) 로 작업 영역을 전송하면, 다른 사람들은 제안된 변경 사항을 볼 수 있고, CI는 제안된 구성 요소 버전을 '하드 태그' 할 수 있습니다.그리고 출구.이 절차에 대한 자세한 내용은 여기에 나와 있습니다.

$ git commit -am "change the button font. suggest new release version"

6. Bit 작업공간을 Github로 밀어 넣고 수정된 구성 요소를 새 릴리즈 버전으로 표시하는 CI 실행

Github로 이동하여 Github 저장소에 새로운 비밀 변수를 만듭니다.

이름(914)을 454로 설정합니다.

원격 저장소user.token 디렉토리에 새 tag-and-export.yml 파일을 만듭니다.

스크립트 생성:

# This workflow hard-tags and exports soft-tagged components
name: Tag and Export Components

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  tag-and-export:
    runs-on: ubuntu-latest
    if: "!contains(github.event.head_commit.message, '--skip-ci')"
    env:
      BIT_TOKEN: ${{ secrets.BIT_TOKEN }}

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 12
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - name: Install Bit Version Manager 
      run: npm i -g @teambit/bvm
    - name: Install latest Bit version 
      run: bvm install
    - name: add bvm bin folder to path
      run: echo "$HOME/bin" >> $GITHUB_PATH
    - name: Set up bit config
      run: |
          bit config set analytics_reporting false
          bit config set anonymous_reporting false
          bit config set user.token $BIT_TOKEN
    - name: Install packages using bit
      run: bit install
    - name: Hard-tag pending components
      run: bit tag --persist
    - name: Export components
      run: bit export
    - name: Commit changes made to .bitmap
      run: |
        git config --global user.name '${{ github.actor }}'
        git config --global user.email '${{ github.actor }}@users.noreply.github.com'
        git add .bitmap
        git commit -m "update .bitmap with new component versions (automated). --skip-ci"
        git push

위의 스크립트는 Bit를 설치하고 새 게시 제안 ((./.github/workflows 파일에서 찾을 수 있음) 을 하드 레이블로 표시하고 새 버전을 내보내고 .bitmap 파일에 대한 변경 사항을 제출합니다. (게시 제안이 새 버전으로 바뀌었습니다.)
Github의 데모 항목 참조:

teambit / github 행동과의 조화

데모 프로젝트

Bit에 대한 자세한 내용:

teambit / 한시

구성 요소 구동 응용 프로그램 개발 도구입니다.

Documentation |
Platform |

구성 요소 먼저 만들기

빠른 개발 및 확장을 위해 구성 요소 구동 어플리케이션을 위한 개방형 인프라

비트가 뭐예요?

Bit는 구성 요소를 구축하고 조합하는 데 사용되는 OSS 인프라입니다.이것은 구성 요소 구동의 응용 프로그램/시스템에 사용되는 확장 가능한 도구 체인으로 이러한 응용 프로그램/시스템 개발 속도가 더욱 빠르고 이해, 테스트와 유지보수가 더욱 간단하며 탄력성과 성능을 갖추고 협업하기 쉽다.
Bit는 모든 응용 프로그램 이외에 구성 요소를 개발하고, 여러 구성 요소를 포함하는 응용 프로그램을 구축하는 것이 아니라 아래에서 위로 여러 응용 프로그램을 조합할 수 있도록 합니다.응용 프로그램은 구성 요소의 배치 조합일 뿐입니다.응용 프로그램에서 구성 요소를 추가하고 삭제하여 기능을 확장하거나 변경할 수 있습니다.모든 구성 요소는 여러 응용 프로그램에서 다시 사용할 수 있습니다.

주요 특징

작업공간은 Bit의 기반입니다.그것은 당신이 구성 요소를 개발하고 조합하는 곳입니다.간단한 단일 개발 도구로 완전 분포식 프로젝트를 구축할 수 있습니다.

View on GitHub