テーマの管理辺りとか特にそう思います。例えばそれは、constants/theme.tsなどにオブジェクトで定義して、それを使うコンポーネントすべてでインポートして使ったりしたりといった具合にです。ただコンポーネントファイルはそれこそ数百ファイル以上になることは普通なので、いくらアウトインポートができるからと言っても流石に効率悪すぎなのではと感じています。
DefinePlugin でオブジェクトそのまま渡す
そこで例えば以下のような Webpack 設定があったとします。このように書いてしまえばコードの中ではインポートは書かずとも、COLOR.accentやCOLOR.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;
}
