Let's be more curious.

【簡単便利】npmのコマンドを1クリックで実行する方法

はじめに

管理人はブログのカスタマイズをNode.jsのnpmコマンドを用いて、ファイルのコンパイルとブラウザの自動更新を実行してます。

手順を簡単に書くと

・コマンドプロンプトを起動
 ↓
・作業ディレクトリへ移動
 ↓
・npmコマンドの実行

の3ステップとなってますが、毎回コマンドプロンプトを立ち上げ、コマンドを手入力するのは正直面倒臭く感じてます。


そこでnpmコマンドを1クリックで実行出来るようにプログラムを作ってみました。

コマンドプロンプトでnpmを実行している方は参考にしてみて下さい。


npmのコマンドを1クリックで実行する方法

特別なアプリの導入は不要です。

DOS時代からあるバッチコマンドを使い、npmを実行するバッチファイルを作成しました。

npm startと記述したバッチファイルを作業フォルダに保管し、これを実行すれば良いのですが、これだとプログラムとは言い難く、わざわざブログで紹介する意味がありません。


バッチコマンドのお勉強もかね、ある程度汎用性があるバッチファイルを作成してみました。


バッチファイルのコマンド

今回作ったバッチファイルはこれです。ブログ毎に作業フォルダが分かれているので、フォルダ名を取得し、どのブログで実行しているのか表示する仕様にしました。

コード
@echo off
set current_dir=%~dp0
set cur_path=%current_dir:~0,-1%
for %%a in ("%cur_path%") do set folder_name=%%~nxa
if exist package.json (
  @echo.
  @echo. %folder_name%のファイルをコンパイルしブラウザを自動更新します。
  npm start
) else (
  @echo.
  @echo. package.jsonが存在しないので終了します。
  @echo.
  pause
)
exit /b


備忘録の為、使用したバッチコマンドの一部を少し説明します。

2行目:%~dp0でバッチファイルを保存しているカレントディレクトリのパスを取得します。

3行目:カレントディレクトリのパスの0文字目から最後の1文字目を取り除きます。
    何をやっているかと言うと、パスの終端にある「\」を取り除いてます。

4行目:forコマンドを使ってフォルダ名のみを取得します。

5行目:if~exist~コマンドを使い、package.jsonが存在したらnpm startを実行します。


作成したバッチコマンドのファイルはnpmを実行するフォルダに保管して下さい。

バッチコマンドのファイル


やったー!完成だ!と思い実行すると、echoの出力が文字化けしてました。😅

echoの出力が文字化け


文字化けの修正方法

バッチファイルはメモ帳で作成したのですが、文字コードはUTF-8でした。

文字化けの修正方法


しかし、コマンドプロンプトで使用している文字コードがShift‗JIS(ANSI)だったので文字化けが発生していたのです。。

バッチファイルの文字コードをANSIで保存すれば文字化けは直りますが、複数の文字コードファイルが存在していると、今度は別の障害を招く恐れがあるのでANSIへの変換は止めました。

その代わりコマンドプロンプトが使用する文字コードをUTF-8に変更し文字化けを回避しました。

chcpコマンドの識別子を65001に指定すると、コマンドプロンプトが使用する文字コードをUTF-8に設定できます。


バッチファイルの最終完成版がこれです。

コード
@echo off
chcp 65001
set current_dir=%~dp0
set cur_path=%current_dir:~0,-1%
for %%a in ("%cur_path%") do set folder_name=%%~nxa
if exist package.json (
  @echo.
  @echo. %folder_name%のファイルをコンパイルしブラウザを自動更新します。
  npm start
) else (
  @echo.
  @echo. package.jsonが存在しないので終了します。
  @echo.
  pause
)
exit /b

文字化けは無事直りました。

文字化けは無事直りました


以上で完了、と言いたいとこですが、まだ終わりではありません。

バッチファイルを1クリックで実行させるために、バッチファイルのショートカットをタスクバーにピン留めします。


バッチファイルをタスクバーにピン留めする方法

バッチファイルを右クリック → 「ショートカット」を作成を選択します。

「ショートカット」を作成


ショートカットを右クリック → 「プロパティ」を選択します。

「プロパティ」を選択


ショートカットの「リンク先」の先頭にcmd.exe /c を挿入 → 「適用」ボタンを押します。(注)/cの後ろには半角スペースがあります。

「適用」ボタンを押します


バッチファイルのショートカットをタスクバーにドラックしピン留めして終了です。

ピン留め


なお、ショートカットのアイコンを元に戻したい場合は、ショートカットのアイコンの変更をクリックし、%SystemRoot%\System32\SHELL32.dllからアイコンを選択して下さい。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

https://t.co/suFMYqqPuy

Node.jsのnpmコマンドを1クリックで実行させる方法を作ってみました。

毎回手入力している方は参考にして見て下さい。#JavaScript #Nodejs #npm #バッチファイル

— heavy-peat (@AfterWork_Lab) April 11, 2021

それでは今回の記事はこれでおしまい。

Next Post Previous Post
Comment
Please Enter Comments in Light mode
comment url