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には:
実行可能なファイルが一つしかないなら、名前はパッケージ名と同じです.例えば、文字列だけを使ってもいいです.
考え方
足場を開発するには、まず考えを整理して、足場はどうやって働きますか?私たちはvue-cliの基本的な考え方を参考にすることができます.vue-cliはプロジェクトテンプレートをgitに置いて、実行時にユーザー相互作用によって異なるテンプレートをダウンロードし、テンプレートエンジンを通してレンダリングし、プロジェクトを生成します.このようにテンプレートと足場を分離すれば、それぞれのメンテナンスができます.テンプレートに変動があっても、最新のテンプレートをアップロードすればいいです.ユーザーが足場を更新する必要がなくて、最新のプロジェクトを生成できます.この発想で開発ができます.
初期化項目
新しいフォルダを作成し、コマンドラインツールを開き、npm initでプロジェクト初期化を行い、プロジェクトのルートディレクトリの下でpackage.jsonファイルを作成します.
download-git-repo:git倉庫をダウンロードして抽出し、プロジェクトテンプレートをダウンロードする.
Inquirer.js:一般的なコマンドラインのユーザーインターフェースのセットは、ユーザーと対話するために使用されます.
handlebars.js:テンプレートエンジンは、ユーザーが提示した情報をファイルに動的に充填する.
ora:ダウンロードの過程が長いと、ダウンロード中のアニメーション効果を表示することができます.
chalk:端末のフォントに色を付けることができます.
log-smbors:端末に√または× などのアイコンをクリックします
fs:node内蔵のファイル処理モジュールです.
パス処理、解析モジュールを内蔵しています.
ちどり_process:nodeでサブプロセスモジュールを作成します.
入り口ファイルの設定
1、package.jsonファイルにbinフィールドを追加して、とりあえずKcliと名づけてください.
コマンドラインを処理
テンプレートをダウンロード
download-git-repoを通して、またはshelljsまたはchild_を直接使用します.process直接コマンドを実行してモジュールをダウンロードします.Download-git-repoはGithub、Gitlab、Bitbucketから倉庫をダウンロードすることをサポートしています.それぞれの具体的な使い方は公式文書を参照することができます.
インタラクティブコマンドライン
コマンドラインインタラクション機能は、ユーザがinitコマンドを実行した後、ユーザに質問をし、ユーザの入力を受信し、対応する処理を行うことができます.ここではinquirer.jsを使って実現します.node内蔵のreadlineモジュールを自分で使うこともできます.具体的には私のこの文章を参考にしてもいいです.
レンダリングパッケージテンプレート
ここではhandlebarsの文法でHTML 5/H 5 Template倉庫のテンプレートの中のpackage.jsonファイルを修正します.テンプレートのダウンロードが完了したら、ユーザーが入力した答えをpackage.jsonにレンダリングします.
完成したら、足場をnpmの上にリリースして、-gでグローバルインストールを行うことで、自分のマシンでクリイinit[name]を実行してプロジェクトを初期化することができます.これで簡単な足場ツールが完成します.
グローバルコマンドをリンク
ルートディレクトリでnpm linkコマンドを実行して、グローバル環境にチェーンを接続します.npm linkコマンドは、任意の位置のnpmパケットをグローバル実行環境に接続することができ、任意の位置でコマンドラインを使用して直接にnpmパケットを実行することができます.具体的にはこの文章を参考にしてください.
ありがとうございます.文章を参考にしてください. 文章1 文章2
足場の役割
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