vue-cli の webpack テンプレートでテスト環境向けにビルドしたい

※手元の環境は vue-cli@2.9.1 です。

細かく言うと、dev.env.js や prod.env.js の他に、テスト環境向けの config が欲しいということです。ちなみに「テスト環境」とは、ローカル以上、プロダクション未満のような環境を指しています。

で、stg.env.js のような config を新しく用意しようかと思ったんですが、もっと簡単にできないかなと思いつつ webpack.prod.conf.js あたりを見てみると、普通に webpack を使ってる分には test.env.js が使われてなさそう...?test.env.js 使えるのでは...?

というわけで、とりあえず以下でビルドできるようにしてみました。

  • ローカル環境向け (dev.env.js)
> npm run dev
  • テスト環境向け (test.env.js)
> npm run build
  • プロダクション環境向け (prod.env.js)
> npm run build -- production

変更点

build\build.js

const targetEnv = process.argv[2] === 'production' ? 'production' : 'testing'
process.env.NODE_ENV = targetEnv

npm run build-- に続けてパラメータを渡すと、process.argv で受け取ることができる。

あとは、コンソールに表示するスピナーとか完了メッセージをいい感じにする。

...
// スピナー
const spinner = ora(`building for ${targetEnv}...`)
...
// 完了メッセージ
console.log(chalk.cyan(`  Build complete. (build for ${targetEnv})\n`))

現場からは以上です。