esbuildで環境毎に定義を変える話

小ネタ。

以前の記事でesbuildのビルドスクリプトを記載したが、環境毎（開発環境、本番環境など）で定義を変えたい場合の話。
最適解でないかもしれないが、とりあえず以下のようにしてる。

ビルドスクリプトと同じディレクトリに環境毎の設定を記載したjsファイルを作成。

const envDev = {
  SERVER_URL: 'http://localhost:8080',
};
const envProd = {
  SERVER_URL: 'https://hogehoge',
};

module.exports = { envDev, envProd };

ビルドスクリプトでは、上記設定を読み取って、ビルド時の引数から開発 or 本番かを判定し、該当環境の設定値をesbuidのDefineオプションに設定する。
（以前の記事でのビルドスクリプトから、以下5、10-14、19行目を追加。）

const { build } = require('esbuild');
const chalk = require('chalk');
const bs = require('browser-sync').create();
const fse = require('fs-extra');
const { envDev, envProd } = require('./env');

const isDevEnv = process.argv.includes('--dev');
const isServeMode = process.argv.includes('--serve');

const env = isDevEnv ? envDev : envProd;
const define = Object.create(null);
Object.entries(env).forEach(([k, v]) => {
  define[`process.env.APP_ENV_${k}`] = typeof (v) === 'string' ? `"${v}"` : v;
});

...

build({
  define: define,
  ...
});

設定するキーは「process.env.APP_ENV_」を接頭辞にする。値がstring型だったら、アプリ側で置換したときに文字列として置換できるように、引用符「”」付きで値を設定。（上記13行目）

アプリ側では、「process.env.APP_ENV_～」で値を取得するようにする。ビルドしたらここの値が実際の値に置換される。

export const env = {
  serverURL: process.env.APP_ENV_SERVER_URL
};

以上です。