OSXでTypeScriptのビルド時に大文字と小文字を区別する

起こった問題

ローカル環境（OSX）では通っていたTypeScriptnのビルドが、ステージング環境（Linux）では失敗した。

原因

OSXのデフォルトのファイルシステムがcase insentive（大文字と小文字を区別しない）するのに対して、 Linuxの方がcase sensitive（大文字と小文字を区別する）であったため。

UIコンポーネントを開発している時は、モジュール名の先頭を大文字にしていたが、import時に小文字にtypoしてしまっていた。それでもMacの場合は、ビルドが通ってしまう。

*Linux Kernelでもファイルシステムによっては case insentiveになる模様。

解決策

一旦はtypoを修正してことなきを得たが、恒久対応をしたい。

tsconfig.jsonのcompilerOptionsで設定できないかなと思ったが出来なかった。

forceconsistentcasinginfilenames という名前がそれっぽいのがあるが、これは同じ参照への一貫性を担保するだけで根本的な解決はしてくれない。

case sensitiveなビルドについては2018年から議論をしているが導入までには至っていないようだった。個人的にはcompilerOptionsで設定出来るようにして欲しい。
該当のissue

最終的には、以下のwebpackのpluginで解決した。
https://github.com/Urthen/case-sensitive-paths-webpack-plugin

This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk. Using this plugin helps alleviate cases where developers working on OSX, which does not follow strict path case sensitivity, will cause conflicts with other developers or build boxes running other operating systems which require correctly cased paths.

OSXで開発する人向けであり、今回の問題解決にドンピシャのpluginだった。

webpack.config.js

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

module.exports = {
  // other plugins ...
  plugins: [
    new CaseSensitivePathsPlugin(),
  ]
  // other webpack config ...
};

moduleをinstallすれば特にオプションを追加することもなく、上記のようにプラグインを設定するだけで、大文字と小文字を区別することが出来る。

eslintでも対応できそうだが、あくまでlintなので現時点ではwebpackで対応した方が良さそう。
Macで開発する時は常に入れておいた方が良い気がする。