NODE_ENVの値を設定してなかったら、サーバが起動しなかった

NODE_ENVの値を設定しておかないとnodeのサーバ起動の際にエラーになるというお話。

事の発端

vue-cliでVue.jsのプロジェクトを作成。しかし、ガイドに従ってnpm run devを実行しても、下のようなエラーが出てサーバが起動しませんでした。

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/we
bpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\xampp\htdocs\som\node_modules\extract-text-webpack-plugin\loader.js:25:9)

調べたところ、Vue.jsのひな型プロジェクトの中のdev-server.js(をはじめとするサーバスクリプト)では、NODE_ENVの値を使っていて、それがdevelopmentじゃないとうまく動かないようです。

NODE_ENVの値を調べる

現在の値が確認するために以下のコマンドを実行します。

node
>process.env.NODE_ENV

production

どうやらデフォルトだとproductionになっているようです。

NODE_ENVを指定してコマンドを実行

コマンドの前にcross-env 変数名=値を指定するとその値にしてからコマンドを実行してくれます。
なので、scriptのdevを以下のように書き換えます。

"dev": "cross-env NODE_ENV=development node build/dev-server.js",

これでとりあえず、npm run devで起動できるようになりました。

環境変数を変える

NODE_ENVの値のデフォルトは環境変数NODE_ENVの値を見に行くので、NODE_ENV=developmentで環境変数を指定しておきましょう。
基本的に、開発マシンであればdevelopmentにしておいたほうがよさそうです。