npm-scriptsを使ったスクリプトの定義とカスタムビルドの設定

2022/09/05 This article was written by mgk

Node.jsのプロジェクトにおいて、npm-scriptsを活用することで、カスタムビルドやスクリプトの定義を簡単に行うことができます。

npm-scriptsは、package.json内の"scripts"オブジェクトにスクリプトを定義し、npmコマンドを使ってそれらを実行する仕組みです。

この記事では、npm-scriptsの使い方とカスタムビルドの設定について解説します。



フロントエンドエンジニアロードマップ一覧はこちら



npm-scriptsとは

npm-scriptsは、npmコマンドを使ってプロジェクトのスクリプトを実行するための機能です。package.jsonの"scripts"オブジェクトに、スクリプト名とコマンドを定義することで、カスタムビルドやテスト、デプロイなどのタスクを簡単に実行できます。

以下は、"scripts"オブジェクトの例です。


{
  "scripts": {
    "start": "node index.js",
    "test": "jest",
    "build": "babel src -d dist"
  }
}


上記の例では、3つのスクリプトが定義されています。

  • start: node index.jsを実行してアプリケーションを起動します。
  • test: Jestを実行してテストを実行します。
  • build: Babelを使ってsrcディレクトリのファイルをdistディレクトリにビルドします。

これらのスクリプトは、npmコマンドでnpm run スクリプト名として実行できます。


スクリプトの実行方法

npm-scriptsのスクリプトは、以下のようにnpm runコマンドを使って実行します。


npm run スクリプト名


例えば、先程定義したstartスクリプトを実行するには、次のようにします。


npm run start


カスタムビルドの設定

カスタムビルドの設定例として、Babelを使ってES6のコードをトランスパイルする方法を見てみましょう。

1. Babelのインストール

まず、Babelをインストールします。


npm install --save-dev @babel/cli @babel/preset-env


2. .babelrcの作成

プロジェクトのルートディレクトリに.babelrcファイルを作成します。


{
  "presets": ["@babel/preset-env"]
}


3. package.jsonの"scripts"にビルドスクリプトを追加

次に、package.jsonの"scripts"オブジェクトにビルドスクリプトを追加します。


{
  "scripts": {
    "build": "babel src -d dist"
  }
}


4. スクリプトの実行

最後に、npmコマンドでビルドスクリプトを実行します。


npm run build


これで、srcディレクトリ内のES6のコードがdistディレクトリにトランスパイルされます。


まとめ

npm-scriptsは、Node.jsプロジェクトのカスタムビルドやスクリプトの定義を簡単に行うことができる便利な機能です。

package.jsonの"scripts"オブジェクトにスクリプトを定義し、npmコマンドで実行することで、開発の効率化やタスクの自動化が可能になります。

カスタムビルドの設定例として、Babelを使ったES6のトランスパイル方法を紹介しましたが、他にも多くのツールやライブラリと組み合わせることで、より高度なカスタマイズが可能です。

npm-scriptsを上手に活用して、効率的でメンテナブルなプロジェクトを構築しましょう！



フロントエンドエンジニアロードマップ一覧はこちら



一覧へ戻る