Nodejsは簡単な足場道具を開発しました.

9737 ワード

足場、この名詞は先端としての私たちにはなじみがないかもしれません.Vue-cli、react-native-cliなどのように、大域的にインストールした後、コマンドラインに簡単なコマンドを入れるだけで、私たちの早い初期項目を作成してくれます.本稿では主に簡単な足場の開発を紹介し、開発の基本的な流れを理解し、最終的にnpm linkを通じて全体パッケージにリンクします.
足場の役割
1、時間を減らすために、ゼロから初期プロジェクトを構築する必要がなく、開発効率を高める.2、多くの人が協力しやすい.3、プロジェクトの更新が同時に便利で、コードライブラリのプロジェクトテンプレートを更新するだけで、最新のプロジェクトをダウンロードできます.
nodeに関する基礎知識
開始項目は現在、簡単にnodeに関する基礎知識を紹介します.npm initを通じてnodeプロジェクトを初期化すると、package.jsonの設定ファイルが生成されます.プロジェクト名、バージョン、著者、依存などの関連情報が含まれます.多くのカバンには一つ以上の実行可能なファイルがあります.PATHに入れたいです.この機能を使うには、package.jsonのbinフィールドにコマンド名を追加し、実行するファイル(つまり、後文のエントリファイル)を指します.初期化時npmは彼をprefix/bin(グローバル初期化)または.node_にリンクします.modules/.bin/(ローカル初期化)例えばnpmには:
  { "bin" : { "npm" : "./npm-cli.js" } }
したがって、npmを初期化すると、npm-cli.jsスクリプトにリンクした記号を作成します./usr/local/bin/npm.
実行可能なファイルが一つしかないなら、名前はパッケージ名と同じです.例えば、文字列だけを使ってもいいです.
  { "name": "my-program"
  , "version": "1.2.5"
  , "bin": "./path/to/program" }
結果はこれと同じです.
  { "name": "my-program"
  , "version": "1.2.5"
  , "bin" : { "my-program" : "./path/to/program" } }
package.jsonの詳細な構成を知りたいですが、この記事を参考にしてください.
考え方
足場を開発するには、まず考えを整理して、足場はどうやって働きますか?私たちはvue-cliの基本的な考え方を参考にすることができます.vue-cliはプロジェクトテンプレートをgitに置いて、実行時にユーザー相互作用によって異なるテンプレートをダウンロードし、テンプレートエンジンを通してレンダリングし、プロジェクトを生成します.このようにテンプレートと足場を分離すれば、それぞれのメンテナンスができます.テンプレートに変動があっても、最新のテンプレートをアップロードすればいいです.ユーザーが足場を更新する必要がなくて、最新のプロジェクトを生成できます.この発想で開発ができます.
初期化項目
新しいフォルダを作成し、コマンドラインツールを開き、npm initでプロジェクト初期化を行い、プロジェクトのルートディレクトリの下でpackage.jsonファイルを作成します.
  npm init
インストール依存
  npm install commander download-git-repo inquirer handlebars ora chalk log-symbols shelljs -S
この他にも、nodejsのいくつかの内蔵モジュールを使用しています.fs、path、child_プロcesscommander.js:ユーザー入力のコマンドを処理するために、自動的に解析コマンドとパラメータを使用することができます.
download-git-repo:git倉庫をダウンロードして抽出し、プロジェクトテンプレートをダウンロードする.
Inquirer.js:一般的なコマンドラインのユーザーインターフェースのセットは、ユーザーと対話するために使用されます.
handlebars.js:テンプレートエンジンは、ユーザーが提示した情報をファイルに動的に充填する.
ora:ダウンロードの過程が長いと、ダウンロード中のアニメーション効果を表示することができます.
chalk:端末のフォントに色を付けることができます.
log-smbors:端末に√または× などのアイコンをクリックします
fs:node内蔵のファイル処理モジュールです.
パス処理、解析モジュールを内蔵しています.
ちどり_process:nodeでサブプロセスモジュールを作成します.
入り口ファイルの設定
1、package.jsonファイルにbinフィールドを追加して、とりあえずKcliと名づけてください.
  "bin": {
    "okcli": "./index.js"
  }
2、プロジェクトのルートディレクトリにindex.jsファイルを新規作成し、index.jsファイルのトップに以下のコードを追加します.
  #!/usr/bin/env node
開発が可能です.ここでは、この行のコードの意味を簡単に紹介します.usr/bin/nodeはオペレーティングシステムにこのスクリプトを実行する時に、/usr/binの下のnodeのインタプリタを呼び出します.usr/bin/env nodeこのような使い方は、オペレーティングシステムユーザがデフォルト/usr/binパスにnodeを入れていないことを防ぐためです.システムがこの行を見たら、まずenvの設定でnodeのインストールパスを探して、対応するパスの下のインタプリタを呼び出して操作を完了します.usr/bin/nodeは書き殺したnodeパスに相当します.usr/bin/env nodeは環境設定に行ってnodeディレクトリを探します.このような書き方をオススメします.
コマンドラインを処理
  const program = require('commander');
  const inquirer = require('inquirer');
  const symbols = require('log-symbols');
  const download = require('download-git-repo');
  const handlebars = require('handlebars');
  const chalk = require('chalk');
  const ora = require('ora');
  const shell = require('shelljs');
  const child_process = require('child_process');
  const fs = require('fs');
  const path = require('path');
  program.version('1.0.0', '-v, --version')
  .command('init ')
  .action((name) => {
    console.log(name);
  });
  program.parse(process.argv);
program.versionを呼び出すと、'-v、--version')は-vと--versionをコマンドラインに追加します.呼び出し時にこのパラメータを持って足場のバージョン番号(コマンド-v/--version)を取得し、compand('init')を呼び出して初期化コマンドを定義します.nameパラメータは必ずプロジェクトのフォルダ名として伝えられます.vue init webpack paroject Nameactionはcommandコマンドを実行する時に発生するコールバックであり、パラメータはコマンドラインに入力されるname、すなわちinitにおけるnameであり、プロジェクト生成過程はコールバック関数に発生する.今はnode index.js init testを呼び出すことで、コンソールに入力された項目名、つまりtestが印刷されているのを見ることができます.その中:program.parseはコマンドラインのパラメータを解析し、nameを解析してactionコールに入ります.
テンプレートをダウンロード
download-git-repoを通して、またはshelljsまたはchild_を直接使用します.process直接コマンドを実行してモジュールをダウンロードします.Download-git-repoはGithub、Gitlab、Bitbucketから倉庫をダウンロードすることをサポートしています.それぞれの具体的な使い方は公式文書を参照することができます.
  download('https://github.com/jefferyE/webpack-configuration-for-vue', name, {clone: true}, (err) => {
    if(err){
     // spinner.fail();
      console.log(symbols.error, chalk.red(err));
    }else{
     // spinner.fail();
    }
  })
または
  if (shell.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue').code == 0) {
   // spinner.succeed();
  } else {
   // spinner.fail();
    console.log(symbols.error, chalk.red('      '))
  }
または
  child_process.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue', function(err, stdout, stderr) {
    if (err) {
    //  spinner.fail();
      console.log(symbols.error, chalk.red('      '))
    } else {
    //  spinner.succeed();
    }
  })
その中:ダウンロードの一番目のパラメータは倉庫の住所ですが、少し違っています.実際の倉庫の住所はhttps://github.com/jefferyE/w... ポート番号の後ろにある「/」が見えますが、パラメータの中で「:」と書いてください.代わりに分岐名が表示されます.別のテンプレートを別の分岐に置いてもいいです.分岐を変更すれば、異なるテンプレートファイルをダウンロードすることができます.二つ目のパラメータはパスです.上の方は直接に現在の経路の下でnameフォルダを作成してテンプレートを保存します.test/米ドル{name}などの二級ディレクトリも使えます.
インタラクティブコマンドライン
コマンドラインインタラクション機能は、ユーザがinitコマンドを実行した後、ユーザに質問をし、ユーザの入力を受信し、対応する処理を行うことができます.ここではinquirer.jsを使って実現します.node内蔵のreadlineモジュールを自分で使うこともできます.具体的には私のこの文章を参考にしてもいいです.
  inquirer.prompt([
      {
          type: 'input',
          name: 'author',
          message: '       '
      }
  ]).then((answers) => {
      console.log(answers.author);
  })
ここの例から分かるように、問題はpromp()において、問題の種類はinputは入力タイプであり、nameは答えの対象となるkeyであり、messageは問題であり、ユーザーが入力した答えはanswersにあり、使うのは簡単である.詳細なパラメータ設定は公式文書を参照できます.
レンダリングパッケージテンプレート
ここではhandlebarsの文法でHTML 5/H 5 Template倉庫のテンプレートの中のpackage.jsonファイルを修正します.テンプレートのダウンロードが完了したら、ユーザーが入力した答えをpackage.jsonにレンダリングします.
  {
    "name": "{{name}}",
    "version": "1.0.0",
    "description": "{{description}}",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "{{author}}",
    "license": "ISC"
  }
注意:私のプロジェクトはpackageテンプレートを変更していませんので、テンプレートをダウンロードして解析する時に動的に修正します.それ以外にもora、chalkモジュールによっていくつかの視覚美化が行われています.具体的には完全コードを参照してください.完全コードは以下の通りです.
  #!/usr/bin/env node

  const program = require('commander');
  const chalk = require('chalk');
  const ora = require('ora');
  const fs = require('fs');
  const inquirer = require('inquirer');
  const shell = require('shelljs');
  const symbols = require('log-symbols');
  const download = require('download-git-repo');
  const child_process = require('child_process');
  const handlebars = require('handlebars');
  const path = require('path');

  program.version('1.0.0', '-v, --version').
  command('init ').
  action(name => {
    console.log(name);
    if (!fs.existsSync(name)) {
      console.log('      ...');
      inquirer.prompt([
        {
            name: 'description',
            message: '       '
        },
        {
            name: 'author',
            message: '       '
        }
      ]).then(answers => {
        console.log(answers)
        const spinner = ora('       ...
'); spinner.start(); child_process.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue', function(err, stdout, stderr) { if (err) { spinner.fail(); console.log(symbols.error, chalk.red(' ')) } else { spinner.succeed(); shell.mv(__dirname + '/webpack-configuration-for-vue', __dirname + '/' + name) const filename = `${name}/package.json`; const meta = { name, description: answers.description, author: answers.author } if (fs.existsSync(filename)) { const content = fs.readFileSync(filename).toString(); let dt = JSON.parse(content); dt.name = '{{name}}'; dt.description = '{{description}}' const result = handlebars.compile(JSON.stringify(dt, null, 2))(meta); fs.writeFileSync(filename, result); console.log(symbols.success, chalk.green(' ')); } else { console.log(symbols.error, chalk.red('package ')) } } }) }) } else { console.log(symbols.error, chalk.red(' ')); } }) program.parse(process.argv);
ユーザが答えを入力してからテンプレートのダウンロードを開始すると、oraを使ってダウンロード中であることをユーザに促す.2、そして、成功情報は緑色、失敗情報は赤色といったように、chalkを通じて印刷情報にスタイルを加えると、ユーザーが分かりやすくなり、端末の表示もより美しくなります.3、印刷情報に色を加えた以外に、log-smborsを使って情報の前に√または× などのアイコンをクリックします
完成したら、足場をnpmの上にリリースして、-gでグローバルインストールを行うことで、自分のマシンでクリイinit[name]を実行してプロジェクトを初期化することができます.これで簡単な足場ツールが完成します.
グローバルコマンドをリンク
ルートディレクトリでnpm linkコマンドを実行して、グローバル環境にチェーンを接続します.npm linkコマンドは、任意の位置のnpmパケットをグローバル実行環境に接続することができ、任意の位置でコマンドラインを使用して直接にnpmパケットを実行することができます.具体的にはこの文章を参考にしてください.
ありがとうございます.文章を参考にしてください.  文章1                文章2