npm-scripts で自前の環境変数を利用する方法（Win/Mac共通化）

普段タスクランナーとしてgulpを使っていますが、依存するパッケージを減らすためnpm-scriptsに移行中です。
その中で自前の環境変数を使う場合、Win/Macで同じscriptを使って環境変数を展開する方法の情報が見つけられなかったので忘備録として残しておきます。

普通の環境変数展開の方法

package.json

{
  "config": {
    "value": "MyValue"
  },
  "scripts": {
    "var:mac": "echo $npm_package_config_value",
    "var:win": "echo %npm_package_config_value%"
  }
}

これだとWinとMacで同じスクリプトを2回ずつ書く必要があります。

マルチプラットフォーム対応の環境変数展開の方法

cross-envを使います。

$ npm i -D cross-env

package.json

{
  "config": {
    "value": "MyValue"
  },
  "scripts": {
    "var": "cross-env-shell \"echo ${npm_package_config_value}\""
  },
  "devDependencies": {
    "cross-env": "^5.2.1"
  }
}

これなら1つのスクリプトでWin/Macに対応できます。

うまく環境変数展開できないケースの対処

モジュールに渡す変数でglob指定を使っている場合、上記の方法では、うまく変数展開ができない場合があったので下記のようにしたところ、Win/Macでうまく動きました。

package.json

{
  "config": {
    "src_dir": "src",
    "dest_dir": "dest"
  },
  "scripts": {
    "copy": "cross-env TARGET=\"./${npm_package_config_src_dir}/**/*.!(js)*\" npm run copy:exec",
    "copy:exec": "cross-env-shell \"cpx \\\"${TARGET}\\\" \\\"./${npm_package_config_dest_dir}\\\"\""
  },
  "devDependencies": {
    "cpx": "^1.5.0",
    "cross-env": "^5.2.1"
  }
}

無理やり実現している気がするので、もっと良い方法ご存知の方は情報いただけると助かります。

以上です。