ちょうど昨日、アリの教會(huì)員は、CSSグリッドレイアウトを使用して履歴書(shū)を作成するためのきちんとした方法を共有しました。コマンドラインを使用したいときにいつでもスピンアップできるテンプレートを作成することで、それを少しだけ構(gòu)築しましょう。それについてのクールなことは、たった1つのコマンドでそれを?qū)g行できることです。

コマンドラインが威圧的になる可能性があることはわかっています。はい、node.jsで作業(yè)します。私たちは物事を小さなステップに分解し、それを追いかけやすくします。

多くのプロジェクトと同様に、少しセットアップが関係しています。ワーキングディレクトリに空のフォルダーを作成し、NPMまたはYARNを使用してプロジェクトを初期化することから始めます。

 mkdir your-project && cd "$ _"

## npm
npm init

## Yarn
糸init

「Your-Project」に使用する名前は、NPMレジストリのパッケージの名前です。

次のステップは、アプリケーションのエントリファイル、つまりこの場(chǎng)合のindex.jsを作成することです。また、データを保存する場(chǎng)所も必要なので、data.jsonという別のファイルを作成します。それらを作成すると、コマンドラインからそれらを開(kāi)くことができます：

 index.js && touch data.jsonをタッチします

コマンドラインインターフェイスの作成

このアプリを作成することで得られる大きな利點(diǎn)は、コマンドラインに直接履歴書(shū)を作成する半視覚的な方法を提供することです。それを?qū)g現(xiàn)するにはいくつかのことが必要です：

• データを保存するオブジェクト
• インタラクティブコマンドラインインターフェイス（Inquirer.jsを使用して構(gòu)築する）

その最初のものから始めましょう。 Open data.jsonをクラックし、次を追加します。

 {
  "教育"： [
    「いくつかの情報(bào)」、
    「それほど重要ではない情報(bào)」、
    「など」
  ]、、
  "経験"： [
    「いくつかの情報(bào)」、
    「それほど重要ではない情報(bào)」、
    「など」
  ]、、
  "接觸"： [
    「あなたに連絡(luò)する方法」
  ]
}

これは、インターフェイス內(nèi)の各ステップに使用されるオブジェクトとキーを定義する?yún)gなる例です。自分のニーズに合わせて完全に変更できます。

それが私たちが最初に必要としたものです。 2つ目は、インタラクティブなインターフェイスです。 Inquirer.jsは90％を処理します。このパッケージの詳細(xì)については、お?dú)葺Xに読んでください。そのため、より高度なインターフェイスを構(gòu)築できます。

 YarnはInquirer Chalkを追加します

そのチョークのことは何ですか？これは、より良い體験のために色とスタイリングを追加することで、ターミナル出力をカスタマイズするのに役立つライブラリです。

次に、index.jsを開(kāi)いて、次のコードを貼り付けましょう。

 ＃！/usr/bin/envノード

「Strictを使用」;

const Inquirer = require（ "Inquirer"）;
const chalk = require（ "chalk"）;
const data = require（ "./ data.json"）;

//応答の色を追加します
const response = chalk.bold.blue;

const resumeOptions = {
  タイプ：「リスト」、
  名前：「resumeOptions」、
  メッセージ：「何を知りたいですか」、
  選択：[... object.keys（data）、 "exit"]
};

関數(shù)showresume（）{
  console.log（ "こんにちは、これは私の履歴書(shū)です"）;
  Handleresume（）;
}

function handleresume（）{
  Inquirer.Prompt（resumeOptions）.Then（Answer => {
    if（answer.resumeoptions == "exit"）return;

    const options = data [`$ {answer.resumeoptions}`]
    if（options）{
      console.log（response（new Inquirer.separator（）））;
      options.foreach（info => {
        console.log（response（ "| =>" info））;
      }）;
      console.log（response（new Inquirer.separator（）））;
    }

    Inquirer
      。プロンプト（{
        タイプ：「リスト」、
        名前：「exitback」、
        メッセージ：「戻るか終了しますか？」
        選択：["back"、 "exit"]
      }）。
        if（choice.exitback == "back"）{
          Handleresume（）;
        } それ以外 {
          戻る;
        }
      }）;
  }）。catch（err => console.log（ 'oooops、'、err））
}

showresume（）;

Zoikes！それはコードの大きな塊です。何が起こっているのかを説明するために、少し引き裂きましょう。

ファイルの上部では、アプリを?qū)g行し、チョークライブラリを使用してカラースタイルを設(shè)定するために必要なすべてのものをインポートしています。色とカスタマイズについてもっと興味がある場(chǎng)合は、Chalkのドキュメントをチェックしてください。

 const Inquirer = require（ "Inquirer"）;
const chalk = require（ "chalk"）;
const data = require（ "./ data.json"）;

//応答の色を追加します
const response = chalk.bold.blue;

コードが行っている次のことは、履歴書(shū)オプションのリストを作成することです。これらは、ターミナルでコマンドを入力した後に表示されるものです。私たちはそれをresumeoptionsと呼んでいるので、それが何をするかを正確に知っています。

 const resumeOptions = {
  タイプ：「リスト」、
  名前：「resumeOptions」、
  メッセージ：「何を知りたいですか」、
  選択：[... object.keys（data）、 "exit"]
};

データオブジェクトのキーを構(gòu)成しながら、必要に応じてアプリを「終了」する方法を提供しながら、選択フィールドにほとんど関心があります。

その後、関數(shù)showresume（）を作成します。これは、起動(dòng)直後に実行される主な関數(shù)となります。歓迎のメッセージを表示し、Handleresume（）関數(shù)を?qū)g行します。

関數(shù)showresume（）{
  console.log（ "こんにちは、これは私の履歴書(shū)です"）;
  Handleresume（）;
}

わかりました、今、大きなもののために：Handleresume（）関數(shù)。最初の部分は、アプリを終了していないことを確認(rèn)し、すべてが良い場(chǎng)合にデータオブジェクトから登録オプションを表示するための條件チェックです。つまり、選択したオプションが終了した場(chǎng)合、プログラムを終了します。それ以外の場(chǎng)合は、選択したキーの下で利用可能なオプションのリストを取得します。

そのため、アプリが終了していないことを確認(rèn)したら、ness.resumeoptionsを取得します。私たちが定義したのは、教育、経験、連絡(luò)先でした。

それは私たちをInquirer.jsのものにもたらします。これらの作品をリストすると、最も簡(jiǎn)単かもしれません。

Options Outputで新しいInquirer.separator（）機(jī)能が機(jī)能することに気づきましたか？これは、コンテンツ間の視覚的なセパレーターを提供して、インターフェイスを少し読みやすくするために、コンテンツ間の視覚的なセパレーターを提供する機(jī)能です。

さて、オプションのリストを表示しています！次に、前の畫(huà)面に戻る方法をAAにする必要があります。そうするために、別のInquirer.Promptを作成します。このオブジェクトを渡しますが、今回はExitとBackの2つのオプションしかありません。それは私たちが処理する必要がある答えで私たちに約束を返します。選択したオプションが戻ってくる場(chǎng)合、Handleresume（）を?qū)g行します。つまり、メイン畫(huà)面を再度開(kāi)きます。 Exitを選択した場(chǎng)合、関數(shù)を終了します。

最後に、キャッチステートメントを追加して、可能なエラーをキャッチします。良い練習(xí)。 :)

NPMへの公開(kāi)

おめでとう！ Node index.jsを?qū)g行してみてください。アプリをテストできるはずです。

それは素晴らしいことですが、毎回直接働くことなく実行することをお?jiǎng)幛幛筏蓼?。これは、私たちが?jiàn)たばかりの関數(shù)よりもはるかに簡(jiǎn)単です。

1. お客様が持っていない場(chǎng)合は、npmjs.comでアカウントを登録してください。
2. NPM Adduserを?qū)g行して、ユーザーをCLIに追加します。
3. NPMアカウントの登録に使用したユーザー名とパスワードを提供します。
4. package.jsonに移動(dòng)し、次の行を追加します。

    「ビン」：{
     「Your-Package-Name」：「./index.js」
   }

5. アプリのNPMページに表示されるreadme.mdファイルを追加します。
6. パッケージを公開(kāi)します。

 NPM Publish -Access = public

パッケージを更新するときはいつでも、それらをnpmにプッシュできます。 NPMバージョンの詳細(xì)については、こちらをご覧ください。

 NPMバージョンパッチ// 1.0.1
NPMバージョンマイナー// 1.1.0
NPMバージョンメジャー// 2.0.0

更新をNPMにプッシュするには：

 NPMパブリッシュ

魔法を再開(kāi)！

それでおしまい！これで、npx your-package-nameをコマンドラインに入力し、すぐそこに履歴書(shū)を作成する魔法を體験できます。ちなみに、NPXは、マシンにローカルにインストールせずにコマンドを?qū)g行する方法です。 NPMをインストールしている場(chǎng)合、自動(dòng)的に利用できます。

これは単純なターミナルアプリですが、舞臺(tái)裏のロジックを理解することで驚くべきものを作成することができ、これがあなたの最初のステップです。

ソースコード

ハッピーコーディング！

以上がnpmに履歴書(shū)を作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。