Node.js と npm 再入門(その3:npm-scripts)

はてなブックマーク
2018/03/30 05:59:59

前回、「Node.js と npm 再入門(その2:パッケージの更新)」の続きです。今回は npm-scripts についてです。

npm-scripts とは?

npm で 使用している package.json にスクリプトを定義しておくと、npm コマンドからそのスクリプトを実行できるというものです。 npm では各種様々な便利なパッケージを導入できますが、それらの機能を使った特定の定型処理などをまとめておきたいという場合に、npm-scripts として登録しておくと便利になります。 Grunt や Glup などのタスクランナーを使用するよりも、より気軽にスクリプトを定義し実行することができます。

スクリプトを登録する

npm-scripts は package.json ファイルの "scripts" 項目として記載することで登録することができます。

package.json

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"foo": "echo \"foo !!\"",
		"bar": "node bar.js"
	}
}

スクリプトを実行する

登録したスクリプトは、npm run-script コマンドで実行することができます。 npm run-script コマンドには、エイリアス(別名) npm run コマンドがあります。こちらの方が短くて便利でしょう。

npm run foo
> demo-app@1.0.0 foo c:\demo-app
> echo "foo !!"

"foo !!"

前処理と後処理

登録したスクリプト名のプレフィックスに pre とつけると前処理、 post とつけると後処理としてスクリプトを登録できます。 例えば、メイン処理のスクリプト名が hoge だった場合、前処理スクリプト名は prehoge、後処理スクリプト名は posthoge となります。 メイン処理のスクリプトを実行すると、自動で前処理と後処理のスクリプトも順番に実行されます。

package.json

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"prehoge": "echo \"pre hoge !!\"",
		"hoge": "echo \"hoge !!\"",
		"posthoge": "echo \"post hoge !!\""
	}
}

スクリプトを実行

npm run hoge

実行結果

> demo-app@1.0.0 prehoge c:\demo-app
> echo "pre hoge !!"

"pre hoge !!"

> demo-app@1.0.0 hoge c:\demo-app
> echo "hoge !!"

"hoge !!"

> demo-app@1.0.0 posthoge c:\demo-app
> echo "post hoge !!"

"post hoge !!"

スクリプトから設定値を使用する

package.json の値を使用する

package.json に記載されている各値は、実行されるスクリプトの中で process.env オブジェクトから npm_package_~ という名前で取得できます。 例えば、package.json ファイルに {"name":"demo-app", "version":"1.0.0"} という項目がある場合、 process.env.npm_package_name という名前で "demo-app" という値、process.env.npm_package_version という名前で "1.0.0" という値が取得できます。

package.json の値 "config" 項目

package.json に記載されている各値の中で、"config" の項目に記載された値は、npm config コマンドで書き換えることができます。 コマンドによって書き換えられることで、package.json を変更せずに、それぞれの環境にあった値に変更することができます。 変更可能な値は "config" の項目に集めて記載して使用するようにしましょう。

package.json

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"foo": "echo \"foo !!\"",
		"bar": "node bar.js"
	},
	"config" : {
		"foo" : "Foo",
		"bar" : "Bar"
	}
}

bar スクリプト:node bar.js

// package.json の "name"
console.log(process.env.npm_package_name);

// package.json の "config.foo"
console.log(process.env.npm_package_config_foo);

// package.json の "config.bar"
console.log(process.env.npm_package_config_bar);

npm config set コマンドで config.bar の値を書き換える

npm config set demo-app:bar BAR

実行結果

demo-app
Foo
BAR

参考サイト

関連記事