Node.js と npm の使い方(その3:npm-scripts)

この記事は最終更新日から 5年以上 が経過しています。

前回、「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.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

スクリプトを実行

npm run bar
出力内容
demo-app
Foo
BAR

参考サイト

関連記事

最近の Web 界隈では、UX を高めるために、UI を JavaScript でガリガリ実装するというのが普通になってます。フロントエンドエンジニアなんていう職種が生まれるほど、この界隈は活発です。そこでフロントエンド開発でほぼ必須となるであろう Node.js と npm について少しまとめてみます。今更感がすごい ...
前回、「Node.js と npm の使い方(その1:概要)」の続きです。今回はパッケージの更新についてです。パッケージの最新化npm でインストールした各パッケージですが、インストールした後にバグフィックスや機能追加などが行われて、パッケージが更新されている可能性があります。そこで、インストールされているパッケージを ...
前回、「Node.js と npm の使い方(その3:npm-scripts)」の続きです。今回は npm にたくさんあるコマンドのうち、便利そうなコマンドを紹介します。npm ci コマンドnpm install コマンドではパッケージの依存関係などを確認しパッケージがインストールされていましたが、テストプラットフォ ...
最近のアプリケーションは開発効率を上げるために大量のライブラリを組み合わせて作成することが多くなっています。そういった状況下では、たった1つのライブラリがバージョンアップすることで、そのライブラリに依存している他のライブラリが正常に動作しなくなり、やがてアプリケーション全体が正常に動作しなくなるというような状況に陥りま ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X(Twitter) もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。