自動ネイティブライブラリのビルドプロセスを自動化する

私はあなたの反応ネイティブライブラリのために使用されるツールについて説明しました.現在、ビルドプロセスを自動化します.
すべてのオープンソースのgithubリポジトリは、我々のワークフローのほとんどを自動化することができます無料githubアクションがあります.オートメーションプロセスを通してgithubアクションを使用します.
ライブラリのビルドは次の項目からなります﹣

リンギング

ランニングテスト

テスト報道の発行

Expoへの例アプリの公開

彩色の物語の出版

ドキュメントを静的サイトとして含むストーリーブックを公開する

あなたは私のビルドワークフローを見つけることができます.github/workflows/build.yml ファイルオブマイreact-native-better-image プロジェクトこれはビルドプロセスがどのように見えるかです﹣

ワークフローをトリガーするとき

私は、マスターブランチが常に安定していることを確実にするために、構築ワークフローを望みました.したがって、それはマスターにすべてのプッシュで実行されます.しかし、私はこれのためにもう一つのリリースワークフローを計画したので、それはタグのために走らないでしょう

name: build
on:
  push:
    branches:
      - master
    tags:
      - '!*' # Do not execute on tags
    paths:
      - example/*
      - src/*
      - test/*
      - __tests__/*
      - '*.json'
      - yarn.lock
      - .github/**/*.yml

リンギング

我々は使用しているのでreact-native-community/bob 我々のプロジェクトでは、我々は両方のlint＆package.json lintプロセスを完了するのに十分なファイル

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

試験と報道

テストカバレッジを表示するためにcode climate for open source projects . また、利用可能な良いアクションを持ってpaambaati/codeclimate-action .
コードの気候は、ベストプラクティスのためのコードをチェックし、保全性メトリックを提供します.それとともに、コードカバレッジレポートを取得します.したら、コードの気候を設定すると、誰もがライブコードの品質スコアを与えるあなたのrepoにバッジを追加することができます﹣

次の構成は、テストの実行に使用されます﹣

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

両方のリンティング＆テストジョブが完了すると、コードの気候にコードカバレッジをプッシュする必要があります.フォローdocs を作成する必要がありますsecret 名前のリポジトリにCC_TEST_REPORTER_ID その後、次の設定を追加する

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - uses: paambaati/[email protected]
        env:
          CC_TEST_REPORTER_ID: ${{secrets.CC_TEST_REPORTER_ID}}
        with:
          coverageCommand: npx yarn test --coverage
          debug: true

公開例アプリケーションをExpoに

また、LINT & TESTジョブの後に発行されます.今回は私たちはexpo/expo-github-action . 行動に従ってdocs , あなたの名前の下にレポの秘密にあなたの博覧会のユーザー名とパスワードを追加する必要がありますてEXPO_CLI_USERNAME & EXPO_CLI_PASSWORD .

If you have an organization, you can add it under the organization secrets and share it with all your repositories!

公開する最初のステップはyarn bootstrap コマンド.しかし、次のステップexpo run 内部で実行する必要がありますexample ディレクトリ.このためには、working-directory 設定

  publish:
    needs: [test, lint]
    name: Publish example app to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - working-directory: example
        run: expo publish

あなたのライブラリの例のアプリの公開ページを取得します.あなたは私の反応ネイティブページより良いイメージライブラリのページをチェックアウトすることができますexample app .

原稿を色に出す

エキスポに似て、クロマチックもGithubアクションをご利用いただけますchromaui/action . 色の新しいプロジェクトを作成し、プロジェクトトークンを取得する必要があります.次に、名前の下にあなたの倉庫の秘密に追加CHROMATIC_PROJECT_TOKEN私たちのストーリーブックがこのディレクトリに住んでいるので、例題ディレクトリの中で色とりどりのアクションを実行する必要があります.chromaUI/アクションは特定のディレクトリ内で実行するオプションを持っていませんでした.だから私は手動で私の例のアプリの次のスクリプトを追加する必要がありましたpackage.json ファイル﹣

"chromatic": "npx chromatic"

次に手動で色を実行する次のワークフローの構成を追加しました﹣

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

静的サイトとして公開ストーリーブック

私はNetLifyを使用して静的サイトとして私の童話を公開します.私は当初GHページを使用する予定でした、しかし、私は1 - Clickロールバックを必要としましたnetlify . インストールしましたNetlify app これは自動的にrepoをビルドし、プレビューを展開するので、任意のアクションの設定を記述する必要はありませんでした.
ライブラリのGithubページを使用する場合は、Deploy to GitHub Pages この目的のための行動.
また、試すことができますNetlify CLI あなたがGitHUBアクションを通してNetLifyで配備を構成したいならば.
このビルドのワークフローは、2つのライブラリで積極的に使用されますrex-state & react-native-better-image
ポストでは、レビューのワークフローを設定する方法を説明します!