1.スクリプトNPMは何ですか
プロジェクトを作成すると、そのようなものがVUEプロジェクトをNode.jsの、またはプロジェクトを反応させると、プロジェクトは記述ファイルpackage.jsonを生成します。
たとえば、NPMは、フィールドの定義は、スクリプトのスクリプトコマンドを使用して、内部のpackage.jsonファイルを可能にしました。
{ // ... "スクリプト" ：{ "DEV"： "のWebPACK-devのサーバー--inline --progress --configビルド/ webpack.dev.conf.js" 、 "スタート"： "NPM実行DEV" 、 "E2E"： "ノード・テスト/ E2E / runner.js" 、 "テスト"： "NPM実行E2E" 、 "糸くず"： "eslint --extの.js、.vue SRCテスト/ E2E /スペック" 、 「ビルド「： "ノードビルド/ build.js" }、 }
スクリプトのオブジェクトのフィールドであるファイル、package.json上記コードフラグメント。そのプロパティのそれぞれは、スクリプトに対応しています。たとえば、ビルドスクリプトコマンドは、ノードbuild.jsに対応しています。
コマンドラインでNPM runコマンドを使用して、このスクリプトを実行することができます。
$ NPMの実行ビルド
に相当：
$ノードのビルド/ build.js
同様に、スクリプトの上記期間中に、NPM RUNテストに相当NPM RUN E2E 、に相当するノードテスト/ E2E / runner.js
これらの定義は、スクリプト内NPMというスクリプトをpackage.json。関連スクリプトプロジェクトが一箇所に集中させることができ、さまざまなプロジェクトスクリプトコマンド限り、同じ機能は、あなたが同じ外部インタフェースを持つことができます。たとえば、ユーザーがプロジェクトをテストする方法を知っている必要はありません、ただ実行NPMの実行のdevの缶を
現在のすべてのプロジェクトのNPMスクリプトコマンドは、パラメータなしで使用することができます見る に実行NPM コマンドを。
$ NPMの実行
2、NPM原則
NPMスクリプト原理は非常に簡単です。たび実行NPMの実行は、それが自動的にシェルスクリプトの内部で指定されたコマンドを実行するシェルスクリプトを作成します。したがって、唯一のシェルあなたが実行できること（通常はbashの）場合は、スクリプトのNPMの内部を書くことができます。
特別な機能は、この新しいシェルを実行node_modules NPM、ある実行後、PATH変数にカレントディレクトリ/ .binファイルのサブディレクトリを設定し、元のPATH変数に回復しました。また、それはすべてのスクリプトnode_modulesカレントディレクトリが/サブディレクトリの.bin、あなたが直接パスを追加することなく、自分の足、本名を呼び出すことができることを意味します。例えば、モカを持っている現在のプロジェクトに応じて、ちょうど直接モカテストにそれを書きます。
「テスト」：「モカテスト」
次のように書かれたのではなく。
「テスト」：「./node_modules/.bin/mochaテスト」
唯一の要件は、それが必ずしもノードスクリプトではありませんので、NPMスクリプトは、シェルで実行することができるということであるので、任意の実行可能ファイルは、内部に書き込むことができます。NPMスクリプトの終了コード、およびシェルスクリプトのルールを守ります。終了コードが0でない場合は、スクリプトの実行が失敗したとみなしNPM。
3、ワイルドカード
あなたはシェルのワイルドカードを使用できるようにNPMスクリプトので、シェルスクリプトです。
"糸くず"： "jshint *の.js" "糸くず"： "jshint ** / * JS"。
上記のコードは、* **任意の層のサブディレクトリを示し、任意のファイル名を表します。あなたは脱出殻を防ぐために、ワイルドカード元のコマンドを渡したい場合は、アスタリスクをエスケープします。
"テスト"： "タップテスト/ \ * JS。"
4、パラメータの受け渡し
使用するパラメータを渡すNPMスクリプト - マーク。
"糸くず"： "jshint ** JS。"
上記リントNPMの実行 、次のようにパスパラメータはコマンドは、記述する必要があります。
$ NPMの実行糸くず - --reporterのCheckstyle> checkstyle.xml
これはさらにコマンドpackage.json包装することができます。
"糸くず"： "jshint ** JS。" 、
"糸くず：Checkstyleは"： "NPM実行糸くず- --reporterのCheckstyle> checkstyle.xml"
5、実行の順序
複数のタスクを実行する必要がある場合は、NPMのスクリプトは、あなたはそれらの実行順序をクリアする必要があります。平行（すなわち、同時並行実行）で実行した場合、アンパサンドを使用することができます。
$ NPM実行script1.js＆NPM実行script2.js
それはの実装（次のタスクを実行するために、最初に成功しているタスク）に二次的である場合は、&&記号を使用することができます。
$ NPM実行script1.js && NPM実行script2.js
6、デフォルト値
一般的には、NPMスクリプトは、ユーザーが提供します。しかし、NPM 2スクリプトは、デフォルト値を提供します。つまり、これら2つのスクリプトを定義することなく、そのまま使用することができ、と言うことです。
"開始"： "ノードserver.js" 、"
インストール"： "ノード-GYP再構築"
上記のコードは、デフォルト値NPMの実行開始がノードserver.jsであるが、そこに提供されるプロジェクトのルートディレクトリにこのスクリプトをserver.js、デフォルト値のNPMの実行は、ノード-GYP再構築、インストール、結合プロジェクトのルートディレクトリが提供されます。 GYPファイル。
7、フック
これは、2つのフックポスト前のスクリプトNPMを持っています。例えば、フックは、事前に作成ビルドスクリプトコマンドとポストビルドです。
「事前に作成」：「ビルドスクリプトの前にエコーI実行」、 「ビルド」：「クロスENV NODE_ENV =生産のWebPACK」、 「ポストビルド」：「ビルドスクリプトの後にエコーI実行」
ユーザーが行うNPM実行ビルドは、次の順序で自動的に実行された場合。
NPMの実行事前に作成&& NPM実行ビルド&& NPMの実行ポストビルド
したがって、これら2つのフック内側に、いくつかの準備およびクリーンアップを行います。次に例を示します。
"クリーン"： "rimraf ./dist && MKDIR DIST" 、 "事前に作成"： "クリーン実行NPM" 、 "ビルド"： "クロスENV NODE_ENV =生産のWebPACK"
NPMデフォルトでは、次のフックを提供します。
prepublish、postpublish
プレインストールインストール後
preuninstall、postuninstall
preversion、postversion
事前テスト、事後
交差点、poststop
事前開始、poststart
prerestart、postrestart
カスタムスクリプトコマンドも前と後のフックを追加することができます。たとえば、このスクリプトコマンド、そこpremyscriptとpostmyscriptフックをのMyScript。しかし、前と後の二重無効、prepretestとpostposttestは無効であるなど。
NPM npm_lifecycle_event変数は、事後、というように、プレテストテストとして、現在実行中のスクリプトコマンドを返します。だから、あなたはこの変数で同じスクリプトファイル、別のNPMスクリプトコマンドの書き込みコードを使用することができます。次の例を考えてみます。
TARGETのconst = process.env.npm_lifecycle_event。 もし（TARGET === '試験' ）{ はconsole.log（ `テストタスクを実行しています！`）。 } であれば（TARGET === '予備試験' ）{ にconsole.log（ `プレテストタスクを実行！`）。 } であれば（TARGET === '事後' ）{ にconsole.log（ `事後タスクを実行！`）。 }
NPMは（パラメータなし）をインストールする前に注意、NPMは、コマンドを発行する前に、このフックは実行されませんprepublish、コマンドが実行されます。この動作は、ユーザーのために簡単にそれを作る、新しいフックが用意そうNPM 4本の紹介を混同し、動作がprepublishのみNPMは、コマンドを発行する前に、NPM 5から実行を開始します、prepublishに相当し、そして。
8、速記
4つの一般的に使用される速記スクリプトNPMがあります。
- NPMスタートは ある NPMの実行開始 速記
- NPM停止が ある NPMラン停止の 速記
- NPMテストが ある NPM走行テスト 速記
- NPM再起動 是 NPMラン停止&& NPM実行再起動&& NPMの実行開始 的简写
NPM開始、NPM停止、NPMの再起動をよりよく理解し、NPM再起動のコマンドは複雑で、3人は実際にスクリプトコマンドを実行している：、停止、再起動を開始します。次のように実行の特定の順序は次のとおりです。
- prerestart
- 交差点
- やめる
- メールストップ
- 再起動
- 事前開始
- 開始
- メール開始
- postrestart
9、変数
NPMスクリプトは非常に強力な機能は、内部変数のNPMを使用する能力である持っています。
まず、npm_package_接頭辞は、NPMのスクリプトは、フィールド内package.jsonを得ることができます。例えば、ここにpackage.jsonです。
{ "名前"： "FOO" 、 "バージョン"： "1.2.5" 、 "スクリプト" ：{ "ビュー"： "ノードview.js" } }
だから、変数npm_package_nameリターンFOO、変数npm_package_versionリターン1.2.5。
// view.js にconsole.log（process.env.npm_package_name）。// fooというの はconsole.log（process.env.npm_package_version）。// 1.2.5
上記のコードでは、フィールド値のpackage.jsonを取得するには、環境変数を介してオブジェクトをprocess.env。bashスクリプトは$ npm_package_nameと$ npm_package_versionすることにより、これらの2つの値を結婚することができます。
npm_package_接頭また、ネストされたpackage.jsonフィールドをサポートしています。
"リポジトリ" ：{ "タイプ"： "gitの" 、 "URL"： "XXX" }、 スクリプト：{ "ビュー"： "エコー$ npm_package_repository_type" }
上記のコードでは、属性リポジトリタイプフィールドは、npm_package_repository_typeによって取られます。
ここでもう一つの例は以下のとおりです。
"スクリプト" ：{ "インストール"： "foo.jsは" }
上記のコードでは、変数は、値npm_package_scripts_installのfoo.js.に等しいです。
その後、NPMスクリプトもnpm_config_プレフィックス、すなわちNPMコンフィグ取得xxxの指令値が返され、NPMの設定変数を取得することができます。例えば、現在のラベル発行モジュールnpm_config_tagを通して取られます。
"ビュー"： "エコー$ npm_config_tag"、
注、環境変数をカバーすることができるconfigオブジェクトの内部package.json。
{ "名前"： "FOO" 、 "設定"：{ "ポート"： "8080" }、 "スクリプト"：{ "開始"： "ノードserver.js" } }
上記のコード、npm_package_config_port可変戻る8080。この値は、以下の方法で覆われていてもよいです。
$ NPMコンフィグ設定FOO：ポート80
最後に、envコマンドは、すべての環境変数を示しています。
"ENV"： "ENV"
図10に示すように、一般的に使用されるスクリプトの例
// ディレクトリの削除 "rimraf DIST / *"： "クリーン" 、 // 構築するためにローカルHTTPサービス "サーブ"： "HTTP-Serverの-p 9090 DIST /" 、 // ブラウザ開く "オープン：DEVを"：「オープナーをHTTP：// localhostを：9090 " // リアルタイムリフレッシュ " livereload "：" livereload --port 9091 DIST / " // ビルドHTMLファイル "ビルド：HTML "："翡翠 index.jade> DIST /インデックス。 HTML「// 限り、あなたはの建設再実行CSSファイルの変更があるとして 」時計は：CSS「：」時計"NPM RUNビルド：CSSの資産/スタイル/「// 長いHTMLファイルが変更されたとして、それは、再実行して建設され 、時計」 ：HTML "："時計「NPMの実行ビルド：HTMLの資産/ HTML " 、// アマゾンS3への展開 "デプロイ：PROD"： "S3-cliの同期./dist/ S3：//例-COM / PROD-サイト/" 、 // 构建ファビコン "ビルド：ファビコン"： "ノードスクリプト/ favicon.js"、
11、package.jsonその他の項目説明
依存関係とdevDependenciesのためのいくつかの説明：
依存関係をインストールNPM使用するとき依存--save内部の依存関係をインストールした場合、モジュールに書き込まれます。
、それはdevDependenciesの内側に書き込まれます--save-devの依存関係をインストールし使用することは、モジュール、書き込みには何もあれば、デフォルトのインストールの依存関係は、内部に行くことに。
たとえば、私たちは、そのようglupなどのビルドツールの一部のみを使用することができdevDependenciesへの書き込みに必要なパッケージで使用された開発環境でのみこれらをWebPACKの。
2つの環境、設定ファイルを標的とするために process.env.NODE_ENV =「開発」 または process.env.NODE_ENV =「生産」 を指定するには、開発や生産環境です。
12、package.jsonビン・プロパティ
package.jsonビンは、コマンド名とローカルファイルをマッピングされています。インストールがグローバルである場合は、ファイルは、インストール後に、コマンドラインを使用して、ファイル内の端末の任意の場所を開くために、グローバルビンの内側にマップされます。
それがローカルにインストールされている場合は、インストール後に、プロジェクトディレクトリ内のファイルを実行するコマンドラインを使用して、プロジェクト内の./node_modules/.binファイルフォルダにファイルをマッピングします。
例えば：
- 新しいフォルダを作成し、ターミナルを開き、フォルダを入力して、コマンド NPMのinit -yは package.jsonファイルを作成します。
- Index.jsは、テストデータと一緒に、同じディレクトリpackage.jsonファイルに新しいファイルを作成します。ヘッドindex.jsファイルを持っている必要があることに注意 ＃を！は/ usr / binに/ envを ノードノード。
- package.jsonビンプロパティの増加は、コマンド名とindex.jsとの間のマッピングを設定します。
- グローバルターミナルカレントディレクトリにインストール：NPMインストール-g
- インストールが成功したら、フォルダがビンの中の任意の端末、package.json実行コマンドセットで開くことができ、それが対応するindex.jsコードを実行します。下記に示すように、
同時に、我々はグローバルbinフォルダを開いて、あなたは世界のビンだけで次のコマンドを追加見つけることができます日焼け-TEMP-ビンを
私たちの共通のVUE、VUE-cliを作成、反応するアプリなどの一部のようにビンプロパティコマンドによってグローバルにマッピングされています
参考リンク：
ルアンYifeng --npmスクリプトガイド：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html