ある書籍のサンプルプログラムを写経して勉強していたときのちょっとした困りごとを紹介します。

困ったこと

書籍のサンプルプログラムを参考に、yarnのpackage.jsonのspriptsに次のように記述して、yarnからスクリプトを実行したらエラーとなりました。

package.json

   "scripts": {
      "build:prod": "NODE_ENV=production webpack --config webpack.prod.js",
    },

コマンドプロンプトから次を実行。

C:\Users\abc\MyProject>yarn run build:prod

エラーメッセージ

'NODE_ENV' is not recognized as an internal or external command,

環境変数NODE_ENVをセットするために__SET__コマンドをつけて、webpackを連続実行させるために__&__を追加しました。

  "scripts": {
    "build:prod": "SET NODE_ENV=production& webpack --config webpack.prod.js",
  },

期待通り（書籍の説明通り）動作した。

"build:prod": "SET NODE_ENV=production & webpack --config webpack.prod.js",

のように__＆__の前に__半角スペース__があると、環境変数の値の後ろに__半角スペース__が付加されます。つまり"production "（最後に__半角スペース__がついている）という文字列になり、環境変数を用いるプログラムがうまく動かないことがあるので注意しましょう。

ネコミミでもわかるフロントエンド開発環境構築 (技術の泉シリーズ（NextPublishing）) Kindle版
汐瀬なぎ (著) 形式: Kindle版

yarnがScriptをどんな環境で実行しているかを気になる方は、次のようにするといいかもしれません。

"build:prod": "SET& WHERE webpack& SET NODE_ENV=production & webpack --config webpack.prod.js",

スクリプトの前にSET& WHERE webpack& を付けただけです。__SET__コマンドで環境変数が全部表示されます。__WHERE webpack__でwebpackコマンドのパスが表示されます。