npm-scripts でスクリプト内でのパスの指定方法および環境ごとの挙動の違いについて確認してみた

結論：パスをエスケープしたダブルクォートで囲むと良さそう。

#npm

#ESLint

若槻龍太

2025.02.05

こんにちは、製造ビジネステクノロジー部の若槻です。

npm-scripts を使用すると、開発や運用でよく実行するコマンドを package.json に記述しておくことができます。

今回はこの npm-scripts でスクリプト内での「パスの指定方法および環境ごとの挙動の違い」について確認する機会があったので共有します。

検証

Lint ツールである ESLint でのパスの指定を例に検証します。

パスをシングルクォートで囲った場合

package.json

{
  "scripts": {
    "check:lint": "eslint './packages/**/*.ts'",
  }
}

Mac

パスが正常に認識され、エラーを検出できました。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache './packages/**/*.ts' --max-warnings=0 --resolve-plugins-relative-to .


/Users/wakatsuki.ryuta/projects/classmethod-internal/icasu-cdk-serverless-api-sample/packages/iac/lib/main-stack.ts
  12:1  error  `./constructs/web-acl-rules/rest-api` import should occur before import of `./constructs/web-acl-rules/user-pool`  import/order

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Windows

パスが正常に認識できませんでした。コマンド実行自体も失敗となります。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache './packages/**/*.ts' --max-warnings=0 --resolve-plugins-relative-to .


Oops! Something went wrong! :(

ESLint: 8.57.0

No files matching the pattern "'./packages/**/*.ts'" were found.
Please check for typing mistakes in the pattern.

パスをクォートで囲まない場合

{
  "scripts": {
    "check:lint": "eslint ./packages/**/*.ts",
  }
}

Mac

パスが正常に認識されず、エラーを検出できませんでした。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache ./packages/**/*.ts --max-warnings=0 --resolve-plugins-relative-to .

Windows

パスが正常に認識され、エラーを検出できました。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache "./packages/**/*.ts" --max-warnings=0 --resolve-plugins-relative-to .


C:\Users\wakatsuki.ryuta\projects\classmethod-internal\icasu-cdk-serverless-api-sample\packages\iac\lib\main-stack.ts
  12:1  error  `./constructs/web-acl-rules/rest-api` import should occur before import of `./constructs/web-acl-rules/user-pool`  import/order

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

パスをエスケープしたダブルクォートで囲った場合

{
  "scripts": {
    "check:lint": "eslint \"./packages/**/*.ts\"",
  }
}

Mac

パスが正常に認識され、エラーを検出できました。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache "./packages/**/*.ts" --max-warnings=0 --resolve-plugins-relative-to .


/Users/wakatsuki.ryuta/projects/classmethod-internal/icasu-cdk-serverless-api-sample/packages/iac/lib/main-stack.ts
  12:1  error  `./constructs/web-acl-rules/rest-api` import should occur before import of `./constructs/web-acl-rules/user-pool`  import/order

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Windows

パスが正常に認識され、エラーを検出できました。

$ npm run check:lint

> cdk-lambda-dynamodb-sample@0.0.0-github-release check:lint
> eslint --cache "./packages/**/*.ts" --max-warnings=0 --resolve-plugins-relative-to .


C:\Users\wakatsuki.ryuta\projects\classmethod-internal\icasu-cdk-serverless-api-sample\packages\iac\lib\main-stack.ts
  12:1  error  `./constructs/web-acl-rules/rest-api` import should occur before import of `./constructs/web-acl-rules/user-pool`  import/order

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.