githubリポゞトリの目に芋えない友人

画像

Githubは、ほがすべおの開発者の生掻にしっかりず入った䞍可欠なツヌルです。



私たちの倚くは絶えずそれを䜿甚しおいたすが、GitHubず緊密に統合され、その機胜を拡匵する倚数のサヌドパヌティおよび無料サヌビスおよびツヌルがあるこずを誰もが知っおいるわけではありたせん。



この蚘事では、䞻にnpmむンフラストラクチャで動䜜するツヌルに焊点を圓おたす。 githubず統合するサヌビスの完党なリストは、 github integrationsディレクトリペヌゞにありたす。



今日の問題









レビュヌされたサヌビスのほずんどは、プロゞェクトペヌゞに远加できる情報バッゞを提䟛したす。 バッゞに぀いお蚀及するたびに同じ画像が衚瀺されないように、蚘事の冒頭で䞀床衚瀺したす。



画像



たた、いく぀かのスクリプトを蚘述する必芁がありたす。 これを行うには、nuntスクリプトを䜿甚しお、うなり声や口論などのツヌルを回避するため、特定のコレクタヌを知る必芁はありたせん。



タスクランナヌに関する少し叙情的な䜙談
少し前たで、䜕人かの賢い人々たずえば、悪名高いCory House は、プロゞェクトをビルドするのに、 うなり声や口論などのツヌルを䜿甚する必芁はないずいう考えを衚明したした。 ほずんどの堎合、単玔なnpmスクリプトで十分です。



私たちは個人的な経隓から、この考えが正しいこずを芋おきたした。



たずえば、gulpを䜿甚しおプロゞェクトを構築する堎合、䜿甚するツヌルごずにプラグむンを探すたたは自分で蚘述する必芁がありたす。 たずえば、 typescriptをコンパむルするにはgulp -typescriptを䜿甚し、 tslintを実行するにはgulp -tslintを 、 typedocを実行するにはgulp -typedocを䜿甚する必芁がありたす。 たあなど。



ツヌルは定期的に曎新され、リリヌスされる曎新を本圓に楜しみにしおいる堎合がありたす。 プラグむンが少し遅れお曎新されるこずがありたす。 そしお、それらはたったく曎新されないこずが起こりたす。



たずえば、埅望のtypescript 2.xリリヌスはそれほど前ではありたせんでした。 tslintずtypedocの曎新を埅぀のに時間はかかりたせんでした。 しかし、プラグむンの新しいバヌゞョンが急いで登堎するこずはありたせんでした。 その結果、䞀般的な補助ツヌルのgulpプラグむンの叀いバヌゞョンのために、プロゞェクトはtypescriptの新しいバヌゞョンに転送できたせんでした。



さらに、プラグむンはpackage.jsonの远加の䟝存関係であり、倚くの堎合、䟝存関係などがありたす。 これらはすべお、travisでビルドを開始するずきなど、むンストヌル時間に盎接圱響したす。



䞀般に、私たちの経隓では、アセンブリをnpm-scriptsに曞き換えるず、生掻が楜になるこずが瀺されおいたす。



グロヌバルむンストヌルを必芁ずするツヌルを䜿甚しないこずも玠晎らしいこずです。 しかし、このアむデアに぀いおは詳しく説明せず、興味のある人のために良い蚘事ぞのリンクを共有するだけです。





説明したサヌビスの実際の䜿甚䟋は、 e2e4ラむブラリのリポゞトリ単玔なオプションたたは角床グリッドの盎角ラむブラリより興味深いオプションにありたす。



継続的むンテグレヌションの構成c travis ci



明癜なこずから始めたしょう-すべおのプロゞェクトには継続的な統合が必芁です。 これでtravis ciが私たちを助ける準備ができたした。



travisでのビルドのセットアップは非垞に簡単で、次の手順で構成されおいたす。



  1. githubアカりントを䜿甚しおtravisにログむンしたす。
  2. 蚭定ペヌゞで、travisが監芖するリポゞトリを指定したす。
  3. ファむル「.travis.yml」をリポゞトリのルヌトディレクトリに远加したす。これは、ビルドを起動するための環境蚭定ずコマンドを瀺しおいたす。


たずえば、次のように



language: node_js node_js: - "6" script: - npm run ci
      
      







したがっお、nodejsバヌゞョン6の環境が必芁であるこずをtravisに䌝えたす。



ビルドプロセスは、package.jsonファむルの「scripts」セクションから「ci」ずいうスクリプトを実行する1぀のnpmコマンドで構成されたす。



私たちの堎合、このコマンドは、プロゞェクトをtslintでリントし 、 typescriptでビルドし、 karmaでテストを実行したす。 詳现に興味がある堎合は、 githubのpackage.jsonで詳现を確認できたす。



たた、ビルドコマンドで「npm install」を指定しなかったこずにも泚意しおください。 Travis自身は、npmを䜿甚しお䟝存関係をむンストヌルする必芁があるこずを理解しお実行したす。



さらに、糞を䜿甚する堎合、travisはこれを理解し、 糞をむンストヌルし、それを䜿甚しお䟝存関係をむンストヌルしたす。



Travisには、䞍必芁なアクションから私たちを救うようなテンプレヌトがたくさんありたす。



次に、「。travis.yml」ファむルのプッシュを実行したす。その埌、最初のビルドが実行されたす。 ビルドプロセスは、travisペヌゞでリアルタむムに確認できたす。



他に䜕





画像









カバヌオヌルを䜿甚しおテストカバレッゞレポヌトを蚭定する



次のサヌビスはカバヌオヌルです。



䞀般的な考え方は、テストを実行するず、lcov圢匏のカバレッゞレポヌトを生成し、分析のためにカバヌオヌルサヌビスに送信するこずです。 サヌビスはそれを凊理し、次の機胜を提䟛したす。





画像







カバヌオヌルをプロゞェクトに接続するには、次の手順を実行する必芁がありたす。



  1. githubアカりントを䜿甚しおカバヌオヌルにログむンしたす。
  2. 情報の収集を有効にするリポゞトリを遞択したす。
  3. coveralls npmパッケヌゞをリポゞトリにむンストヌルしたす。
  4. テスト実行䞭にカバレッゞレポヌトの生成を構成したす。

    カバレッゞレポヌトの生成方法は詳现に怜蚎したせん。テストの䜜成察象、䜿甚するツヌル、テストの実行方法にすべお䟝存するためです。 さらに、たずえば、typescriptの堎合、カバレッゞレポヌト生成ツヌルはありたせん。これは、実行されるのはtypescriptではなくjavascriptであるためです。 たた、タむプスクリプトコヌドのカバレッゞを正確に衚瀺する堎合は、jsコヌドのカバレッゞに関するレポヌトをタむプスクリプトコヌドに再マッピングするためのツヌルが必芁になりたす。 これはすべお䞍必芁な特異性であり、この蚘事では避けようずしたす。 githubのcoveralls npmパッケヌゞペヌゞから可胜なオプションの調査を開始できたす。




  5. npmスクリプトを远加しお、生成されたレポヌトをカバヌオヌルサヌビスに転送したす。

     "scripts": { "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls", ... }
          
          





  6. travisでビルドを実行した埌、远加されたスクリプトを実行したす。 これを行うには、travis.ymlファむルのafter_successセクションを䜿甚したす。 これで、travis.ymlは次のようになりたす。

     language: node_js node_js: - "6" script: - npm run ci after_success: - npm run coveralls
          
          









他に䜕



githubに加えお、カバヌオヌルはbitbucketず統合し、gitlabの緊急サポヌトを玄束したした。 たた、耇数の継続的統合サヌビスおよび耇数の開発プラットフォヌムずの統合もサポヌトしおいたす。





davidを䜿甚しお䟝存関係の状態を監芖する



david䟝存関係監芖サヌビスは、この蚘事で説明したものの䞭で最も単玔です。



サヌビスのアむデアはシンプルです。プロゞェクトの䟝存関係の状態を瀺すバッゞをプロゞェクトペヌゞに远加したす。 たた、プロゞェクトの䟝存関係分析ペヌゞぞのリンクです。



davidをプロゞェクトに接続するには、次のテンプレヌトに埓っおブラりザヌにアドレスを入力したす。



 https://david-dm.org/< >/< >
      
      







プロゞェクト内の䟝存関係のタむプに応じお、開いたペヌゞに「䟝存関係」、「䟝存関係」、「ピア䟝存関係」、および「オプションの䟝存関係」タブが衚瀺されたす。



各タブには、特定のタむプずバッゞの䟝存関係のリストが含たれおいたす。クリックするず、マヌクダりンたたはHTML圢匏でリンクをコピヌし、readmeファむルたたはgithubペヌゞのプロゞェクトペヌゞに配眮できたす。



他に䜕



たた、マシンの䟝存関係を曎新するのに圹立぀david cliナヌティリティもありたす。 確かに、組み蟌みのnpm期限切れコマンドおよびnpm曎新コマンドず比范した堎合の利点を理解できたせんでした。





greenkeeperを䜿甚しお自動䟝存関係曎新を蚭定する



greenkeeperサヌビスは 、䟝存関係を曎新するずいう困難なタスクを支揎するようにも蚭蚈されおいたすが、より高いレベルでそれを行いたす。 圌の仕事は、可胜な限り䟝存関係の凊理を完党に軜枛するこずです。



greenkeeperをプロゞェクトに接続するには、 githubの公開統合セクションのgreenkeeperペヌゞに移動し、必芁なリポゞトリにアプリケヌションをむンストヌルする必芁がありたす。



わずか1分で、greenkeeperはプルリク゚ストを䜜成し、プロゞェクトのすべおの䟝存関係を曎新し、greenkeeperのステヌタスを衚瀺するreadmeバッゞに远加したす。



このプルリク゚ストをマヌゞした堎合のみ、greenkeeperはプロゞェクトの監芖を開始したす。



さらに、䟝存関係の新しいバヌゞョンが衚瀺されるず、greenkeeperはプルリク゚ストを䜜成したす。これは、曎新された内容の詳现な説明を提䟛し、可胜であれば、新しいバヌゞョンの倉曎のリストを提䟛したす。 マヌゞするだけです。



画像



圓然、greenkeeperの接続は、自動ビルドが構成されおおり、曎新埌にプロゞェクトが動䜜状態にあるこずを少なくずも名目䞊確認するために䜿甚できるテストがある堎合にのみ意味がありたす。 Greenkeeperは、リポゞトリにビルドずテストがあるかどうかを認識し、どちらかが怜出されない堎合はプルリク゚ストテキストに譊告を曞き蟌みたす。



他に䜕









commitizenによるコミットメッセヌゞの改善



Commitizenは、意味のあるコミットメッセヌゞの䜜成を支揎するツヌルスむヌトです。



リポゞトリに興味のある人々にずっおより有益であるこずに加えお、commitizenの䜿甚にはもう1぀の利点がありたす。 生成されたコミット枈みメッセヌゞから、倉曎ログずリリヌスノヌトを簡単にコンパむルできたす。 たた、コミットの履歎を分析し、 semverの芏則に準拠するために次のバヌゞョン番号を教えおくれるナヌティリティもありたす。 しかし、それに぀いおは次のセクションで詳しく説明したす。



そしお、最も単玔なものから始めたす。 cz-cliをむンストヌルしたす。 むンストヌル埌、「git commit」の代わりに「git cz」コマンドを䜿甚できたす。 このコマンドは、珟圚のコミットで正確に䜕を倉曎したかに぀いおの䞀連の質問をガむドするりィザヌドを起動し、人間が簡単に読み取っおさたざたなツヌルで解析できる圢匏でコミットメッセヌゞを生成したす。



だから

  1. commitizenをグロヌバルにむンストヌルしたす。

     npm install commitizen -g
          
          



  2. コミットしやすいリポゞトリを䜜成したす。 これを行うには、リポゞトリフォルダヌで次のコマンドを実行したす。

     commitizen init < > --save-dev --save-exact
          
          







<adapter name>の代わりに、可胜なアダプタの1぀を指定する必芁がありたす。 フロント゚ンド開発の䞖界で最も人気があるのは、cz-conventional-changelogです。これは、角床のあるチヌムが開発した次のメッセヌゞ衚蚘です。



このコマンドは必芁な䟝存関係をむンストヌルし、package.jsonファむルのdevDependenciesセクションに保存し、そこに必芁な蚭定を曞き蟌みたす。



他に䜕









埓来の倉曎ログを䜿甚しお倉曎ログずリリヌスノヌトを生成する



commitizenを有効にした埌、別のオプション-倉曎ログずリリヌスノヌトの自動生成を蚭定する機胜がありたす。



この埓来のchangelogで圹立ちたす。

埓来の倉曎ログは、既補のテンプレヌトに埓っお高レベルのツヌルを䜿甚しおリリヌスのリリヌスを構築したり、個別のツヌルから具䜓的に必芁なものを組み立おたりするこずができるツヌルのファミリヌ党䜓です。



開発者自身が、比范的高レベルのツヌルであるstandard-versionの䜿甚を掚奚しおいたす。



さらに高いレベルは、 semantic-releaseです。 このツヌルはプッシュ倉曎を行い、npmでバヌゞョンを公開したす。



私たちの経隓から-䞡方のオプションを詊した埌、䜎レベルのツヌルを䜿甚するこずに決めたした。



この遞択の理由は、たずえば、暙準バヌゞョンが倉曎をプッシュせず、githubにリリヌスの説明を生成しないためです。 リリヌスプロセスにそのようなものを远加し、ビルドを起動するため、たたはドキュメントを生成するために暙準バヌゞョンオプションを䜿甚しお構成するには、 npm versionコマンドに基づいお公開プロセスを手動で蚭定するのず同じくらい耇雑な蚭定が必芁です。



䞀方、セマンティックリリヌスは、プロセス党䜓を自動化しようずしおいるため、非垞に統制のずれた開発アプロヌチをずる必芁がありたす。 構成の耇雑さは、プロセスの手動構成に匹敵​​したす。 そしお最埌。 Semantic-releaseはnpm publishを行いたす。これは、npmを介しお配垃されたラむブラリのみに䜿甚を制限し、ラむブラリだけでなくバヌゞョンの発行も可胜です。



そのため、npmバヌゞョンに基づいおリリヌスプロセスを構築したす。 たた、バヌゞョンnpmスクリプトを実行するず、preversionスクリプトずpostversionスクリプトがあれば実行されたす。 䞡方を䜿甚したす。 リリヌスプロセスは、次の手順で構成されたす。



プリバヌゞョンフェヌズ



  1. rimrafを䜿甚しお、以前のビルドの結果でディレクトリをクリアしたす 。
  2. tslintを実行したす。
  3. コンパむルタむプスクリプト。
  4. karmaでテストを実行したす。


e2e4リポゞトリを䟋ずしお䜿甚するず、これらの手順はprecommitフックで実行される手順ず同じであるため、同じスクリプトを䜿甚したす。



 { "preversion": "npm run precommit", "precommit": "npm run rimraf -- esm coverage && npm run clean:src && npm run clean:tests && npm run lint && npm run build && npm run test" }
      
      







フェヌズバヌゞョン



  1. githubペヌゞで公開するためのドキュメントを生成したす。 私たちの堎合、 これにはtypedocが䜿甚されたす。 githubペヌゞに぀いお-最近、gh-pagesずいう名前のブランチを䜜成する必芁がなくなったため、サむトずしお䜿甚されるgithub蚭定でプロゞェクトのフォルダヌを指定するだけです。 デフォルトでは、これは「docs」フォルダヌです。 したがっお、ドキュメントフォルダヌにドキュメントを生成するだけです。
  2. 生成されたドキュメントをgitに远加しおコミットしたす。
  3. changelog.mdに倉曎に関する情報を远加したす。 このために、 埓来のchangelog-cliを䜿甚したす。 パラメヌタヌずしお、ファむル名ずメッセヌゞ解析の芏則を枡したす。 私たちの堎合、それは「角床」です。
  4. コミット甚の曎新された倉曎ログを远加したす。
  5. package.jsonのバヌゞョンを曎新し、コミット甚に远加したす。 このnpmが圹に立ちたす。
  6. バヌゞョンのタグを生成し、必芁に応じおプレリリヌスたたは最新のラベルを付けたす。 このnpmも私たちに圹立ちたす。 ラベルを付けるず、 semverの芏則に埓っおバヌゞョン番号がわかりたす。




合蚈で、次の䞀連のスクリプトが取埗されたす。

 { "version": "npm run docs && git add -A docs && npm run changelog && git add CHANGELOG.md", "changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s", "docs": "npm run rimraf -- docs && typedoc --options typedoc.json src/" }
      
      







ポストバヌゞョンフェヌズ



  1. 倉曎されたpackage.json、changelog.md、ドキュメントのプッシュを実行したす。
  2. 䜜成したタグのプッシュを実行したす。
  3. 倉曎の説明をgithubリリヌスに远加したす。 これを行うには、埓来のgithub-releaserを䜿甚しお、メッセヌゞ衚蚘をパラメヌタヌずしお枡したす。 私たちの堎合、それは「角床」です。 情報を蚘録するには適切なアクセス暩が必芁なので、埓来のgithub-releaserが認蚌に䜿甚するアクセストヌクンを生成する必芁がありたす。 これがどのように行われるかは、プロゞェクトの説明に蚘茉されおいたす。




バヌゞョンのスクリプト

 { "postversion": "git push && git push --tags && conventional-github-releaser -p angular", }
      
      







リリヌスプロセスの準備ができたした。



次のコマンドを䜿甚しおスクリプトを実行したす。

 npm version <   major/minor/patch>
      
      







生成されたリリヌスノヌトは次のようになりたす。



画像



changelog.mdの内容はほが同じであるため、匕甚したせん。



他に䜕







zubeを䜿甚したタスクの管理



zube.ioに぀いおはあたり説明したせん。 私たちはそれぞれタスクトラッカヌを䜿甚したしたが、zubeはそれらの倚くずほずんど倉わりたせん。



その利点の2぀だけを挙げたす。そのため、この蚘事で蚀及するこずにしたした。



  1. これは、githubず統合されるプロゞェクト管理ツヌルでは珍しいオヌプン゜ヌスプロゞェクトでは無料です。
  2. zubeを䜿甚するず、耇数のgithubリポゞトリのタスクを1぀のプロゞェクトに結合し、同時に䜜業できたす。




これでレビュヌは終了です。 githubで䜜業するためのその他の興味深いサヌビスたたはツヌルを知っおいる堎合は、コメントで知識を共有しおください。



ご枅聎ありがずうございたした。



蚘事の衚玙画像-cameronmcefeeによるBenevocats。



All Articles