ある書籍のサンプルプログラムを写経して勉強していたときのちょっとした困りごとを紹介します。
困ったこと
書籍のサンプルプログラムを参考に、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,
環境
- yarn 1.22.10
- Windows 10 Home 20H2
対策
環境変数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版
感想
- 書籍の中のサンプルプログラムの実行環境をよく確認すべし。OSによって記述が変わるのはムズい。
- MS-DOSの頃から変わっていない。SETで環境変数を設定、&でコマンド連続実行。
補足
yarnがScriptをどんな環境で実行しているかを気になる方は、次のようにするといいかもしれません。
"build:prod": "SET& WHERE webpack& SET NODE_ENV=production & webpack --config webpack.prod.js",
スクリプトの前にSET& WHERE webpack& を付けただけです。__SET__コマンドで環境変数が全部表示されます。__WHERE webpack__でwebpackコマンドのパスが表示されます。