足場を達成するために手を触れるよるVUE-CLIの手

背景ストーリー

7ヶ月の入門鶏料理のフロントエンドとして、私はそう長く手渡しのために彼とVUEのフロントエントリ、およびSipilailian遊びに接触して来た最初の日は、私はまだ初めてVUEのinit WebPACKのフレーズコマンドを覚えています気分のようなものが、私は言葉を書くことができれば、多くの場合、右のO（、鶏肉を食べる灰色になり、自分自身に考えたときには、テンプレートを生成¯▽¯今日、我々は独自のシンプル化を実現しているように、）BU足場

意識ビン

ビンの役割

まず、このコマンドは密接に関係しているのは、このビン、ビンを見てみましょう、我々はVUEのinitのWebPACKのほとんどで始まります

私たちは、インストールVUE-CLIまあの先頭にいたときを思い出してください

    npm install vue-cli -g

彼らはVUEの初期化を使用することができたときに、このコマンドの意味は、WebPACKのあなたはどこにでもcmdを開くように、グローバルにVUE-CLIをインストールすることです

このコマンドは、実際にpackage.json内で行わ内のコマンド属性VUE-cliのビンであるVUEのinitのWebPACK

ファイルのおおよその位置は、次のように

隠されたパス内のこのパスに、目に見える隠しディレクトリを開くために探していたときに覚えています

これはおそらく、このような内部のビンに成長しています

この図から分かる、3辺のコマンドがあります

    vue vue-init  vue-list

これは、対応するファイルを実行するための3つのコマンドの意味で、NPMはnode_modules / .binファイル/ディレクトリにシンボリックリンクを作成します。そしてのでnode_modules / .binファイル/ディレクトリには、これらのファイルを呼び出すために直接コマンドによって、あなたはNPMを実行するときに、あなたがいないパスをすることができ、実行時にシステムのPATH変数に参加します。

ビンファイルとパラメータは、実行します

あなたは間違いなくこのファイルについての好奇心がそれを行う方法のテンプレートを生成しますここで、その後、我々は最後に実行されるように、このファイルを見ることができますすることの背後にある物語です

    #!/usr/bin/env node

    const program = require('commander')
    
    program
      .version(require('../package').version)
      .usage('<command> [options]')
      .command('init', 'generate a new project from a template')
      .command('list', 'list available official templates')
      .command('build', 'prototype a new project')
      .command('create', '(for v3 warning only)')
    
    program.parse(process.argv)

これは、ファイルのすべての内容コード実行VUEのinitのWebPACKの塊の上にあります

最初の、そして最も重要な点は、ことを＃！は/ usr / binに/ envをノードの最初の文であります

このコードは、PATHシステムのディレクトリに見て意味＃！インタプリタスクリプトファイルを指定して、と/ usr / binに/ envを、なくてはなりません

この文は、指定されたスクリプトを実行し、このスクリプト・インタプリタを実行全く新しいシェルが存在することであることはノードであることを意味し
ていない場合、このコードが与えられています

そして、この下にこれは、内部コマンド、コマンドライン操作上のパッケージの数を書いた非常に高速なハードウェアの兄である指揮官のパッケージは、サブコマンドのいくつかを定義し、次に深くないチョップ当分の間、ここのパラメータでバックアップすることで導入されました、中国の文書が添付

中国の司令官のドキュメント

カスタムコマンドを書きます

さて、私たちは、今のは、自身のコマンドを書いてみましょう、ビンや一般的なプロセスの基本的な概念を理解します

まず、新しいフォルダを作成し、そのpackage.json内のコードを追加します

 "bin": {
    "zjs-cli": "main.js"
  },

また、新しいファイルmain.jsを作成します

そして、Moのパニック、我々はまだ、コマンドを実行する必要があります

npm link

我々はnode_modules NPMの下でグローバルなデフォルトのディレクトリの前にインストールされます。このコマンドは、単にnode_modules NPMとして理解することができるショートカットを作成します

これまで我々は、我々は内部のファイルの内容について話をする必要があり、カスタムコマンドがあることを通過する必要があります

足場

足場は、ワークフローました

私たちは、次のようおそらく、ビンの上や役割を取得し、我々はそれを動作させるために、具体的方法を、次に足場、カスタムコマンドとファイルの関連付けを設置する必要があることを知っています

ファイルに、指定されたアドレスと、コンパイラによると、私たちのjsを施行
パラメータを受け入れ、対応する操作のコマンドラインを実行します
インタラクティブ選択された構成に応じて、質問をしたテンプレートを引きます
gitのプルからテンプレート

プロセスは、このようなVUEである前に、我々は、おそらく足場

インストールが依存します

コマンドライン操作を得るために、ファイルを入力した後、私たちはこのようなパッケージの指揮官として、いくつかの依存関係をインストールする必要があります

    npm install commander

次に、コマンドラインのデフォルトのフォントの色は黒と白で、我々は対話型のコマンドラインパッケージの一部を導入することができ、パッケージは、これらの首長は本当に速いハードウェアであると言うために書かなければならなかった、そして結果的に書くことができます

    npm install chalk

サブVUE initコマンドがあり、その後、私たちはより良いとも呼ばれるのinit

    const cmd = require("commander");
    const chalk = require('chalk')

    cmd.command('init').description('初始化模板').action(async (args) => {
        // 。。。
    })
    
    cmd.parse(process.argv)

コマンドは、子を追加するためのコマンドである場合には
説明があります
このコマンドのアクション・コールバックが実行されます
あなたは、このようなzjs-CLIのinitデモを書き、あなたのコマンドライン内で渡されたパラメータを解析する解析し、この時間の値は、引数の内部コールバックは、文字列のデモです

私は最初の年齢のために疑問に思ったときにプレイし始めたとき、あなたは、その後、引数の内部で使用されているARGVのプロセスに注意を払う必要があり、これはタイプミスではありません

その後、いくつかの相互作用を行うので、私たちは足場のよりShunliuいくつかを見ています

npm install inquirer

npm install ora

どちらも、トップローディングアニメーションあり、そのようなVUEは、あなたの列のいくつかの質問をすると、ダウンロードが新しいテンプレートにアニメーションをロードして待つ、あまりにも質問に答える時間を持っています

私も、知識のVUE-cliのソースを見ていたので、それほど多くは、あまりにもパッケージの名前を覚えることができるか私に聞かないでください。。。。

Gitのプル

内容はあまりないですが、それを引き出すために単独でここにGitは、しかし、すべての後、今日のヒーローであるO（¯▽¯）BU

そこで問題は、どのようにテンプレートをダウンロードすることですか？非常に単純な、当然のNPMパッケージ。。。。

npm install download-git-repo

このパッケージには、githubのトップパッケージからダウンロードすることができます

彼は私がgitのに持っているパスは、プロジェクト名を追加され、パスを引き出し、zjs、テンプレートと呼ばれる前に、例えば、私はデモを書きました

let url = 'zhou1591/zjs-template'

// 然后第二个参数是拉取下来后的名称

// 这里我选择用命令行里边传过来的参数做名字

let  name = 'args'

テンプレートを閉じ、APIを引っ張られ、

let downGit = (name) => {
downLoad(url, name, {
        clone
    }, err => {
        process.exit(1)
    })
}

次のように完全なコードです

// git包
const downLoad = require('download-git-repo')
// 动画
const ora = require('ora')


let url = 'zhou1591/zjs-template'
let clone = false
let downGit = (name) => {
    const spinner = ora('正在拉取模板...')
    spinner.start()
    downLoad(url, name, {
        clone
    }, err => {
        spinner.stop()
        console.log(err?err:"项目创建成功")
        process.exit(1)
    })

}
module.exports = downGit

Main.jsは、この時点で、単純な足場がOKとなっている、のような内部のアップ実行につながる、と彼は最後のステップを送りました

公開された足場

アカウントを作成し、NPMを公開

私たちは自分の足場を終えた後、もちろん、私はのいくつかを体験して待ちたいです

まず、NPMのアカウントの作成NPMの公式サイトを

我々だけでプロジェクト内の後

NPMログインがメールアカウントのパスワードを入力します。
そして、成功した着陸NPMの後にプッシュを公開
名前内部package.jsonがリリースされ、あなたのNPMパッケージの名前です。
キーワードキーワードは、あなたのバッグを検索しています
説明は、あなたのバッグの説明です
バージョンは、バージョン番号です

NPMパッケージ公表最初の問題が発生する場合があります

これは、あなたがプッシュする権限がありませんパッケージの名前を繰り返していたしていると言われています

あなたは、新しいパッケージを公開する前にあなたの電子メールを確認する必要があります。https://www.npmjs.com/email-editを：「あなたのモジュール名を」

これは、メールボックスを確認する必要があると言って最初のリリースを言う時間で、あなたが一番上に上陸しました

あなたはリリースバージョン番号を変更する必要があるたびに
！プライベートモードが有効no_permsより重要なNPMのERRは、唯一の管理者は、このモジュールを公開することができますがあります。

その時、私は会社からの源であったので、これはあなたが最初の一番上にソースをNPM言っているわけではない、あなたは、そのような淘宝網、およびそのほかの情報源として切り替えるかもしれませんが、どのように着陸している着陸は非常に退屈ではありません

パーフェクトSahua

さて、ここで我々は最初の約実行し、逃げるにも足場

// 全局安装一下
npm install zjs-template -g
// 按照之前的命令
zjs-cli init myDemo

私はGitのzjs-cliのアドレスを持っているhttps://github.com/zhou1591/zjs-cli/
私はgitのアドレスのzjsテンプレートを持っているhttps://github.com/zhou1591/zjs-template

私たちはすべて、各フロントエンドフロントエンドが好き（学習中のO自分自身を豊かにすることができる願っています¯▽¯ BU）

次の私は単にvuexを達成する、〜賞賛それのようにポイントしてください。