Node.js を使用して CLI スキャフォールディングを作成する方法

完全な足場コード

フロントエンドのスキャフォールディングとは何ですか?

まず、百度百科事典での「足場」の定義を確認してみましょう。

足場とは、工事の各工程を円滑に進めるために設置される作業台のことです。

フロントエンド エンジニアリングの概念がますます普及するにつれて、フロントエンド スキャフォールディングが登場しました。

簡単に言うと、「フロントエンド スキャフォールディング」とは、複数のオプションを選択することでプロジェクトの基本コードを迅速に構築するツールを指します。これにより、同じコード フレームワークと Ctrl + C および Ctrl + V の基本構成を効果的に回避できます。

背景

新しいプロジェクトを開発する準備ができたら:

• プロジェクトの完全な基本環境（完全なテクノロジースタック、さまざまな環境を考慮した豊富な補助機能）を短期間で構築することは困難です。
• プロジェクトの要件やチームの状況が異なるため、プロジェクトの基本環境を構築する際に変更を続けることは不可能です。

フロントエンドのスキャフォールディング ツール:

• プロジェクトの基本コードを迅速に生成するのに役立ちます。
• スキャフォールディング ツールのプロジェクト テンプレートは、開発者によって改良およびテストされており、ある程度、特定の種類のプロジェクトのベスト プラクティスを表しています。
• スキャフォールディング ツールはカスタム テンプレートの使用をサポートしており、さまざまなプロジェクトに応じて「カスタマイズ」できます。

要約すると、足場は繰り返しの作業を減らし、繰り返しの作業を行うのに役立つツールです。

比較的安定していて優れたフロントエンド スキャフォールディング「足場」には次のカテゴリがあります。

• Vue/React のスキャフォールディング

• Node と yeoman を使用して独自の足場を構築する

• Webpack スキャフォールディングを最初から構築する

Vue スキャフォールディングとは何ですか?

• Vue CLI は、Vue.js に基づいた迅速な開発のための完全なシステムです。
• ほとんどの開発環境の構築は作者が手伝ってくれたので、これらのツール環境の構築を意識することなく、スキャフォールディングをダウンロードして直接開発することができます。

この新しいパッケージは、次のコマンドのいずれかを使用してインストールできます。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

次のコマンドを実行して新しいプロジェクトを作成します。

vue create kk-test

プリセットを選択するように求められます。基本的な Babel + ESLint 設定を含むデフォルトのプリセットを選択することも、「機能を手動で選択する」を選択して必要な機能を選択することもできます。

生成されたコード ディレクトリは次のとおりです:
[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-sl7XXtHE-1687761801189) (…/images/ kk-test-catalog.png)]

このデフォルト設定は、新しいプロジェクトのプロトタイプを迅速に作成するのに最適ですが、手動設定では、実稼働指向のプロジェクトにさらに必要なオプションが提供されます。

ここで、any-cli を例として独自のスキャフォールディング ツールを作成してみましょう。

基本原則

yoemanプロジェクトの構築に必要ですyoeman-generator。yoeman-generatorこれは基本的に完全なファイル構造を持つテンプレートであり、ユーザーはこれらのテンプレートをローカルエリアに手動でダウンロードする必要があり、その後、yoemanこれらのテンプレートに基づいてさまざまなプロジェクトが自動的に生成されます。

vue-cli は非常に豊富なオプションと設定機能を提供しますが、その本質は、「ローカルで生成された」ブラック テクノロジーではなく、リモートの倉庫からさまざまなテンプレートをローカルにプルすることです。

この観点から見ると、最初にさまざまなテンプレートを作成し、次にスキャフォールディングがそのテンプレートを参照して、ユーザーの指示に従って実際のプロジェクトを生成するというアイデアがあります。

テンプレートは足場に組み込んだり、離れた倉庫に展開したりできます。

• スキャフォールディングに組み込まれており、node fileアクションを使用してテンプレートをローカルに複製します。

  利点は、テンプレートを保存するために新しいウェアハウスを作成する必要がないことです。特に、複数のプロジェクト テンプレートがある場合、たとえば、 2 つの異なるプロジェクトを個別に生成するinit pcのではなくinit mobile、足場を保管するための倉庫が 1 つだけ必要になります。

  2 番目の利点: スキャフォールディングやテンプレートの変更に関係なく、送信する必要があるのは 1 回だけです。

• リモートの倉庫にデプロイし、git cloneプロジェクトのクローンをローカルに作成します。

  利点は、テンプレートでコードが変更されるたびに、ユーザーがスキャフォールディングをローカルでアップグレードする必要がないことです。

  テンプレートがスキャフォールディングに組み込まれている場合、テンプレートが同じウェアハウス内にあるため、テンプレートが変更されるたびに、ユーザーはスキャフォールディングをアップグレードする必要があります。リモートの倉庫にデプロイする場合は異なり、最新のテンプレートを取得するには git clone のみが必要です。

全体的なプロセス

標準的な慣例に従って、まず全体的なプロセスを見てみましょう

添加模板->输入模板名->是否有重名模板?-添加成功:给出提示

删除模板->输入模板名->是否有模板?-删除成功:给出提示

模板列表->列出所有模板

初始化模板-输入模板名-是否有模板?-输入模块名-克隆远程仓库到本地模块-切换分支:给出提示

技術的なポイント

process.cwd() と__dirname

コマンドはスキャフォールディングにあり、コマンドが実行される場所は多くの場合テンプレート プロジェクト内です。

たとえば、スキャフォールディング パスは でD:\Documents\Downloads\any-cli\src\command、グローバル スキャフォールディング コマンドを実行するパスは です C:\Users\Administrator。

例: スキャフォールディング コードは、スキャフォールディング ディレクトリ内のa.jsファイルを読み取り、それらをテンプレート プロジェクト (グローバル スキャフォールディング コマンドが実行される場所) に書き込みますb.js。

その場合、readFile のパスは次のようになりますpath.resolve(__dirname,'a.js')。

writeFile パスは ですpath.resolve(process.cwd(),'b.js')。

• process.cwd(): 現在の Node.js プロセスが実行されるときの作業ディレクトリ:
• __dirname: 現在のモジュールのディレクトリ名

置き場

多くの npm モジュールには、グローバル システム パスにインストールする必要がある実行可能ファイルがあります。

package.json には、コマンド名をファイル パスにマッピングする bin フィールドを指定する必要があります。次のように：

"bin": {
    "any": "./bin/any.js"
},

これにより、any コマンドがローカルの実行可能ファイル ./bin/any にマップされます。つまり、コマンド ラインで any コマンドを実行すると、./bin/any 実行可能ファイルが実行されます。

• グローバル インストールの場合、npm はシンボリック リンクを使用して、これらのファイルを、すべてのシステム バイナリ コマンドが配置されている /usr/local/bin ディレクトリにリンクします。

• ローカルにインストールされている場合は、./node_modules/.bin ディレクトリにリンクされます。これは、現在のディレクトリで any コマンドが実行された場合にのみ有効になります。

パッケージ名と同じ名前の実行可能ファイルが 1 つしかない場合。次に、次のように文字列 (ファイル パス) を使用するだけです。

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": "./bin/any"
}

に相当：

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": {
        "any-cli": "./bin/any.js"
    }
}

npmリンク

• グローバルモジュールにリンクされたローカルディレクトリ

  npm link は、ローカル ディレクトリをグローバル モジュールにリンクできます。

  モジュール開発者にとって、これは最も価値のあるコマンドです。たとえば、any-cliモジュールを開発する場合、それをコマンド ラインで使用してanyコードをテストする必要があります (開発中にリリースがない場合、モジュールをグローバルにインストールすることはできません)。心配しないでください。npm リンクを使用するとすべてが非常に簡単です。

  たとえば、any-cliプロジェクト package.json には次のようなコマンドがあります。

  "bin": {
      "any": "./bin/any.js"
  },
  

  コマンドラインからnpmリンクを使用する

  $ npm link
  

  次の結果が得られました

  /usr/local/bin/any -> /usr/local/lib/node_modules/any-cli/bin/any.js
  /usr/local/lib/node_modules/any-cli -> /Users/{Username}/work/any-cli
  

  窓の下:

  C:\Users\Administrator\AppData\Roaming\npm\any -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli\bin\any.js
  C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli -> D:\Documents\Downloads\any-cli
  
  

  /usr/local/bin および /usr/local/lib/node_modules ディレクトリに移動して確認してください。any内部にはさらに多くの実行可能ファイルとディレクトリがあることがわかりましたany-cli。
  このようにして、ローカル ウェアハウスに変更が生じるたびに、グローバル コマンドも更新されます。開発とテストを同時に行うことができます。

• ローカル ディレクトリがグローバル モジュールを参照する

  モジュールtemp-cliに依存する他のモジュールがある場合は、次のコマンドを使用してグローバルを現在のモジュールにリンクできます。any-cliany

  $ cd C:\temp-cli
  $ npm link any-cli # 把全局模式的模块链接到本地
  

  npm link any-cli コマンドは、/usr/local/lib/node_modulesディレクトリ内で any-cli モジュールを検索し、モジュールを見つけた後、その/usr/local/lib/node_modules/any-cliディレクトリを現在のtemp-cliディレクトリにリンクします./node_modules/any-cli。

  これで、any-cli モジュールへの変更はすべて temp-cli に直接マッピングされるようになります。

その他のフィールド: Engine および EngineStrict (pakeage.js 内)

node7.6.0开始支持async，如何保证用户本地安装node7.6.0以上版本呢

• エンジン
  ノード固有のバージョンをローカルにインストールできます。

  "engines": { "install-node": "7.6.0" }
  

  engines次のようにフィールドを使用して、どのnpmバージョンがプログラムをより適切に初期化するかを指定することもできます。

  { "engines" : { "npm" : "~1.0.20" } }
  

• エンジン厳しい

モジュールが、engines パラメータで指定されたバージョンでのみ適切に動作できることが確実な場合は、package.jsonそれをファイル内で設定するengineStrict:trueと、ユーザーのengine-strict設定が上書きされます。
この機能は npm 3.0.0 で非推奨になりました。

サードパーティパッケージ: pre-commit/ora/commander/chalk

• pre-commit: コードレビューに提出する前に簡単な問題を特定するのに役立つ Git フック スクリプト。
• コマンダー: ユーザーのコマンドライン入力とパラメーター解析のための強力な機能を提供する軽量の Nodejs モジュールです。
• チョーク: コマンド ラインでテキストを異なる色で出力するために使用されます。
• ora: ローディング効果と同様に、ローディング効果を表示するために使用されます。

コードファイル

any-cliプロジェクトの作成

mkdir any-cli
cd any-cli
git init && npm init

package.json内容

{
  "name": "any-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "pub": "npm version patch && npm publish",
    "pre-commit": "eslint src"
  },
  "author": "kk",
  "devDependencies": {
    "eslint": "^3.16.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-import": "^1.6.1",
    "eslint-plugin-jsx-a11y": "^2.0.1",
    "eslint-plugin-markdown": "*",
    "eslint-plugin-react": "^6.3.0",
    "eslint-tinker": "^0.3.2",
    "pre-commit": "^1.2.2"
  },
  "dependencies": {
    "chalk": "^1.1.3",
    "child_process": "^1.0.2",
    "commander": "^2.9.0",
    "prompt": "^1.0.0"
  },
  "engines": {
    "install-node": "7.6.0"
  },
  "pre-commit": [
    "pre-commit"
  ],
  "bin": {
    "any": "./bin/any.js"
  },
  "license": "ISC"
}

• フィールド bin の下の設定は、コマンド ラインで実行可能なコマンドとみなされます。/bin の下にある任意のファイルを指します。
• フィールド エンジンは、現在のディレクトリに 7.6.0 バージョン ノードをインストールするために使用されます。co モジュールを使用せずに、async 関数を直接使用できます。
• pre-commit は、送信前にコードをチェックし、pre-commit スクリプト (eslint) を実行するために使用されます。

ルート ディレクトリに /bin フォルダーを作成し、任意のファイルを作成します。

mkdir bin

この /bin/any がスキャフォールディング全体のエントリーファイルなので、最初に書きます。

cd bin
cd.> any.js

#!/usr/bin/env node //解决不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件
const add = require('../src/command/add')
const list = require('../src/command/list')
const init = require('../src/command/init')
const del = require('../src/command/del')
const program = require('commander')
const { version } = require('../package')

// 定义当前版本
program
.version(version)

program.parse(process.argv)
if (!program.args.length) {
  program.help()
}

/bin/any にコードを追加し続けます

// 定义使用方法
/*
* 添加模板
* */
program
.command('add')
.description('add template')
.alias('a')
.action(add)

/*
 * 删除模板
 * */
program
.command('del')
.description('Delete a template')
.alias('d')
.action(del)

/*
 * 模板列表
 * */
program
.command('list')
.description('List all the templates')
.alias('l')
.action(list)

/*
 * 删除初始化
 * */
program
.command('init')
.description('Generate a new project')
.alias('i')
.action(init)

コマンドは任意のコマンドのパラメータを構成するために使用され、エイリアスは略語を構成し、アクションは実行する機能を構成します。

他の：

commander 的具体使用方法在这里就不展开了，可以直接到 [官网][2] 去看详细的文档。

npm link を実行して、現在のプロジェクトをグローバルにリンクします。このようにして、コマンド ラインで any コマンドを直接使用して、/bin/any の下のコードをテストできます。

// D:\Documents\Downloads\any-cli
npm link

any コマンドを使用して次の出力を確認します。これは、エントリ ファイルが書き込まれたことを証明します。

  Usage: any [options] [command]


  Commands:

    add|a    add template
    del|d    Delete a template
    list|l   List all the templates
    init|i   Generate a new project

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

次に、src/command ディレクトリを作成します。

先ほどの4つのパラメータに対応するファイルを作成します。

ファイルの内容は特定の業務コード（それぞれ追加、削除、確認の初期化に相当）であり、

ここでは紹介はしません。github リンクを参照してください。