• ..

Fish Shell

    定数は DefinePlugin を使ってどこからでも参照できるようにすればいいと思う

    テーマの管理辺りとか特にそう思います。例えばそれは、constants/theme.tsなどにオブジェクトで定義して、それを使うコンポーネントすべてでインポートして使ったりしたりといった具合にです。ただコンポーネントファイルはそれこそ数百ファイル以上になることは普通なので、いくらアウトインポートができるからと言っても流石に効率悪すぎなのではと感じています。

    DefinePlugin でオブジェクトそのまま渡す

    そこで例えば以下のような Webpack 設定があったとします。このように書いてしまえばコードの中ではインポートは書かずとも、COLOR.accentCOLOR.textと書くだけでそれら定数が使えます。

    const webpack = require('webpack');
    
    module.exports = {
      /* 色々 */
      plugins: [
        new webpack.DefinePlugin({
          COLOR: JSON.stringify({
            accent: 'orange',
            text: '#222',
          })
        }),
      ]
    }

    ちゃんと型定義をする

    入っているか分からなくなりそうですが、それはtypes/define/index.d.tsなどに以下のように書きます。これで型も効くし、サジェストも効くので TypeScript に慣れた人には問題もないと思います。ここはアナログになり少し面倒くさいかもしれないですがインポートの方がもっと面倒くさいかなと個人的には思います。

    declare const COLOR: {
      accent: string;
      text: string;
    }

    EnvironmentPlugin で環境変数をコード内に渡す

    NodeJSでは、環境変数はprocess.envというオブジェクトの中に入っていますが、この習慣をクライアント側でも使おうということでprocess.env.xxxを定義して使えるようにするのが EnvironmentPlugin の役割です。この EnvironmentPluginwebpackパッケージに一緒に入っています。

    const webpack = require('webpack');
    
    module.exports = {
      /* 色々 */
      plugins: [
        new webpack.EnvironmentPlugin({
          NODE_ENV: 'development'
        })
      ],
    }

    環境変数を渡すか渡さないかで切り替える

    これは例えば、

    yarn webpack

    でビルドすればコード内のprocess.env.NODE_ENV === 'developmentになります。そして今度は、

    NODE_ENV=production yarn webpack

    のように環境変数を渡してビルドすればprocess.env.NODE_ENV === 'productionになるという感じです。このようにprocess.env.NODE_ENVの値を環境変数を渡すか渡さないかで切り替えることに成功したので、あとはコードの中で条件分岐などで処理を分けるだけですね。

    他にどんなものを定義したらいいか

    例えばこのサイトで使っている Contentful という CMS は 本番用と開発用でトークンが違うのでこういう別れてるものがメインで使えると思います。他には Stripe などのトークンも別れていますね。