webpack.DefinePlugin使うときはJSON.stringifyを意識しようと改めて痛感した話

ついつい、うっかりしていて、途中までなんでー？となっていたのでメモ。

webpack.DefinePlugin 使うとき、JSON.stringifyを使うことを意識したほうが良い。
いま全く頭が回っていないので、細かく説明はしない。公式ドキュメントを見るのが手っ取り早いかもしれない。 (ついさっきまでハマっていて、もう疲れ切っているのだ。甘いルートビアを飲んで、いま頭の披露を急速に癒やしているところだ)

webpack.js.org

例えば、下記のように記述して、フロントエンド側でこのTEST_IDを読みたいとする

    new webpack.DefinePlugin({
        TEST_ID: '+123'
    }),

で、実際に画面で読み込むと 123 という値になっており、先頭の + が消えてしまう
このような問題の対応策として JSON.stringifyを使う

    new webpack.DefinePlugin({
        TEST_ID: JSON.stringify('+123'),
    }),

これで、画面側でも +123 として扱える。

webpack.DefinePlugin 使うときは常に意識しとかないといけないことのような気がしていたが、さっきまで頭の先っぽからこのことを忘れ去ってしまっていた。。。
こういうちょっとしたミスが原因不明のバグの元を作り出すので、気をつけなくちゃいけないなと改めて痛感した次第。