Githubアクションを使ってNPMJSに自動配備するJavaScriptライブラリ

概要

これは、簡素化し、GMTHUBアクションを使用してNPMJSで私たちのJSライブラリのリリースを自動化する時間です.

Project initialization

Automating via Github Actions

Finalizing the result

Bonus: Vuepress documentation

Conclusion

Reference

ノード.糸付きのJS 14バージョンを使用しました

プロジェクトの初期設定

プロジェクトを作成しましょうjavascript-library-autodeploy .

mkdir javascript-library-autodeloy && cd javascript-library-autodeploy

初期化するpackage.json そして、我々のライブラリのためのライブラリのカップルを追加します.

yarn init
yarn add -D [email protected] [email protected] [email protected] [email protected]

はい、この例ではJavaScript Linterを使用します.ESLint を実行します.Jest . 私たちは皆、テストを書きます.

ファイナルバージョンpackage.json .

{
  "name": "@alexeykhr/javascript-library-autodeploy",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production",
    "test": "jest",
    "lint": "eslint src"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "jest": "^27.1.0",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  }
}

完了したら、今私たちのライブラリにいくつかのロジックを追加しましょう.この例では、2つの数字を追加する簡単な関数になります.

// src/index.js

function sum(a, b) {
    return a + b;
}

module.exports = { sum };

そして、この複雑なロジックをすぐにテストします.

// tests/sum.test.js

const { sum } = require('../src/index');

test('1 + 2 = 3', () => {
    expect(sum(1, 2)).toBe(3);
});

さらに2 , 3のファイルを追加します..eslintrc.js , .npmignore , .gitignore

完了すると、ビルドすることができます小さなプロジェクト、追加テスト、リンターなどがあります.

Githubアクションによる自動化

このステップでは、2を作成しますGithub Workflows .
最初の1つは、githubリポジトリ内の各コードの変更後に実行されます.

ワークビルド、コードのスタイル、テストのためのコードを常にチェックする最初のワークフローを作成しましょう.

# .github/workflows/library.yml

name: Library

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v2
        with:
          node-version: '14.x'

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn
      - run: yarn lint
      - run: yarn test
      - run: yarn build

ワークフローは次の通りです.

呼び出しトリガpush イベント

最新のUbuntuのインストール

Githubからコードを受け取ります

ノードのインストール.JSバージョン14

JSライブラリをインストールし、yarn.lock ファイルの変更

静的コードアナライザ、テスト、ビルドを実行する

この段階で、我々はすでにプルリクエストをチェックするための作業のほとんどを自動化している.

さあ、セカンドを作ろうWorkflow , これはビルドを解放します.

# .github/workflows/release.yml

name: Release

on:
  release:
    types: [published]

jobs:
  library:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v2
        with:
          node-version: '14.x'
          registry-url: 'https://registry.npmjs.org'

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn

      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - uses: actions/setup-node@v2
        with:
          registry-url: 'https://npm.pkg.github.com'

      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

このワークフローのロジックは、前のワークフローと非常に似ています.唯一の違いは、それがrelease イベント、および代わりにプリンタとテストを実行する.npm publish npmjsとgithubパッケージに対して呼び出されます.
しかし、正しく動作するように、我々は追加する必要がありますGithub Secrets このリポジトリにNPM_TOKEN .
を追加する必要はありませんGITHUB_TOKEN , デフォルトで有効になっています. About the GITHUB_TOKEN secret

ページへ移動https://www.npmjs.com/settings/SET_YOUR_LOGIN/tokens

クリックGenerate New Token

型の選択Automation

キーの下の我々の倉庫にそれを加えてくださいNPM_TOKEN .

秘密の秘密

結果の確定

用意!現在、我々はGithubリポジトリに我々のコードをアップロードすることができて、すぐにそれを見ることができますWorkflow が起動されます.

さあ、新しいリリースを作ろうとしましょう.これを行うには、右サイドバーで、リリースをクリックし、新しいリリースを作成します.

The release イベントがトリガされ、今我々はどのように我々のプロジェクトを構築することができますし、NPMJSリソースにアップロードすることができます.

完了しました、ここに図書館があります.@alexeykhr/javascript-library-autodeploy
また、ライブラリにはPackages サイドバーブロック.

ボーナス：vuepressドキュメンテーション

そしてもちろん、どのようにドキュメントなしですることができます、私は手に来た最初のものを取ったVuepress .
ドキュメントは現在のリポジトリに住んでいます.もちろん、ビルドプロセスはGithubによって行われます.

を始めましょうdocs フォルダと初期化package.json .

mkdir docs && cd docs && yarn init
yarn add -D [email protected]

はい、我々は別々になりますpackage.json ライブラリバージョンが互いに競合しないようにする(例えば、異なるバージョンのWebpackなど).このようにしてライブラリはコアライブラリに影響を与えません.

{
  "license": "MIT",
  "scripts": {
    "dev": "vuepress dev .",
    "build": "vuepress build ."
  },
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}

シンプルなものを加えましょうdocs/README.md ファイルの内容を表示するファイル.

# VuePress

<<< @/../package.json

といくつかの設定Vuepress .

// docs/.vuepress/config.js

const { version, name } = require('../../package');

const parts = name.split('/');

module.exports = {
    title: `Version ${version}`,
    base: `/${parts[parts.length - 1]}/`
}

私のライブラリ名はGithubリポジトリの名前と同じですので、ベースURLはパッケージから取得されます.JSON
これは何かを構築するのに十分です、そして、ビルドの明示的な表示のために、我々はドキュメンテーションに図書館のバージョンを発表しています.

今すぐ私たちのgithubワークフローを更新しましょう.

イン.ワークフロー/ライブラリ.MYLは、我々がちょうどドキュメンテーションを編集するとき、それが発火しないようにトリガーを変えましょう.

on:
  push:
    paths:
      - '*/**'
      - '!docs/**'

で.ワークフロー/リリース.別のジョブを追加します.

docs:
  runs-on: ubuntu-latest
  defaults:
    run:
      working-directory: ./docs
  steps:
    - uses: actions/checkout@v2

    - uses: actions/setup-node@v2
      with:
        node-version: '14.x'

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - uses: actions/cache@v2
      id: yarn-cache
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-docs-${{ hashFiles('yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-docs-

    - run: yarn
    - run: yarn build

    - name: Commit changes
      working-directory: ./docs/.vuepress/dist
      run: |
        git config --global user.name "github-actions"
        git config --global user.email "[email protected]"
        git init
        git add -A
        git commit -m "deploy"

    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        branch: gh-pages
        force: true
        directory: ./docs/.vuepress/dist

論理は以下の通りです.

ランyarn install インサイドdocs フォルダ

ドキュメントが構築されます

全体のビルドを下にフォースプッシュを使用してアップロードされますgh-pages 枝

そして、これらの2つの仕事は平行に走るでしょう.

新しいコードを追加し、ライブラリのバージョンを更新し、Githubにプッシュします.

新しいジョブを実行するために

を追加するにはgh-pages ブランチGithub Pages ドキュメントを表示するには

結論

おめでとう、我々は多くの仕事を自動化しました、現在、巨大なスクリプトを書く必要はありません.NPMJSでコードを展開することを忘れてしまうこともあります.
しかし、あなたはまた、例えば、あなたがConventional Commits , また、タグの作成を自動化することもできますstandard-version 図書館.
そして、あらゆる種類のツールを使用するactions/labeler .

リファレンス

Github repository

npmjs library