DUICUO

小さなフロントエンド スキャフォールディング ツールをオープンソース化しました (チーム内で共有)。

[[424934]]

これは私の2つ目のオープンソースプロジェクトです。最初のオープンソースプロジェクトはOkRツリーダイアグラムで、現在349個のスターが付いています。アドレスはhttps://github.com/qq449245884/vue-okr-treeです。最近はエネルギーが限られているため、あまりメンテナンスできていません。ご興味があれば、ぜひ一緒にメンテナンスに参加してください。

さて、2つ目のオープンソースプロジェクトを見てみましょう。これは主に私たちのチームでの使用を目的としています。目標は、些細な作業を減らし、開発効率を向上させることです。

背景

現在、チーム内の新規プロジェクトでは、独自のパブリックリポジトリ、独自のESLint標準セット、そしてgitコミット関連のチェックを使用しています。新しいプロジェクトが追加されるたびに、古いプロジェクトから設定を一つずつコピーする必要があり、非効率的です。

これらの問題点に対処するには、時間のかかるタスクを完了するのに役立つ独自の足場が必要です。

なぜ足場が必要なのでしょうか?主な理由は3つあります。

繰り返しの作業を削減します。他のプロジェクトをコピーして無関係なコードを削除したり、プロジェクトとファイルを最初から作成したりする必要がなくなります。

インタラクションなどに基づいてプロジェクトと構成ファイルを動的に生成します。

ファイルのやり取りが不要になり、コラボレーションがより便利になります。

研究

インストール

  1. npm インストール--global ztjy-cli  

コマンドの使用法

バージョンを表示

  1. ztjy -v または ztjy --version  

現在のテンプレートを表示

  1. ztjy ls

例:

会社のイントラネット環境の場合は、「github」で始まらないテンプレートを使用することを選択します。

プロジェクトを初期化する

init コマンドを使用してテンプレートを選択し、新しいプロジェクトを初期化できます。

  1. ztjy 初期化

`init` を実行すると、まず初期化用のテンプレートを選択するように求められます。社内イントラネットの場合は、GitHub プレフィックスのないテンプレートを選択してください。

対応するテンプレートを選択すると、次に示すように、package.json の名前と説明に対応するプロジェクト名とバージョンを入力するように求められます。

注: ダウンロードに失敗した場合は、ネットワークの問題が原因である可能性があります。複数回実行してみてください。

ダウンロードが成功すると、現在のディレクトリに指定した my-vue-template プロジェクトが表示されます。

テンプレートを追加

既存のテンプレートがニーズを満たしていない場合は、`add` コマンドを使用して新しいテンプレートを追加できます。

  1. ztjy追加 

add コマンドを実行すると、プロジェクト名、説明、ダウンロード アドレスの入力を求められます。

ここで指定するダウンロードURLは、指定された形式に準拠する必要があります。テンプレートではダウンロードにdownload-git-repoリポジトリを使用しているため、具体的なURL形式については以下を参照してください。

https://gitlab.com/flippidippi/download-git-repo

テンプレートを削除

テンプレートが不要になった場合は、 del コマンドを使用して削除できます。

  1. テンプレート名

プロジェクトアドレス: gitubh: https://github.com/qq449245884/ztjy-cli

サードパーティライブラリの紹介

  1. <! -- ターミナルスタイルライブラリ -->  
  2. "チョーク" : "^3.0.0" ,
  3. <! -- コマンドラインインタラクション -->  
  4. 「司令官」 : 「^5.0.0」
  5. <! -- Git からテンプレートをプル -->  
  6. 「gitリポジトリをダウンロード」 : 「^3.0.2」
  7. <! -- fs 操作拡張 -->  
  8. "fs-extra" : "^9.0.0"
  9. <! -- テンプレートエンジン -->  
  10. 「ハンドルバー」 : 「^4.7.3」
  11. <! -- コマンドラインインタラクション -->  
  12. 「問い合わせ者」 : 「^7.1.0」
  13. <! -- 読み込み効果、アイコン -->  
  14. 「オーラ」 : 「^4.0.3」  

~~以上です。私は皿洗いの知恵です