expoで絶対パスを使ってimportしたい

デフォルトだと、importなどは相対パスでしか解決できないので、import周りが../../../Hogeみたいな相対パスばかりで個人的にとても見辛い

のでなんとか絶対パスを使ってimportできるようにする

ディレクトリ構造例

.
├── App.tsx
├── assets
├── src
│   └── Hoge.tsx
..
└── tsconfig.json

tsconfig.json

なんかcompilerOptionsのbaseUrlとpathsをいい感じに設定してやると、いい感じに認識してくれるらしい

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "assets": ["./assets/*"],
            "src": ["./src/*"]
        }
    }
}

babel.config.js

expoはbabelでコンパイルしているらしいので、tsconfigの方だけいじってもコンパイル時にpathの名前解決がされないらしい（この言い方であっているかは知らない）
のでbabel用にpackageのインストールと設定を追加する必要があった

# npm
$ npm i --save-dev babel-plugin-module-resolver
# yarn
$ yarn add -D babel-plugin-module-resolver

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            assets: './assets',
            src: './src',
          },
        },
      ],
    ],
  };
};

このとき、aliasはtsconfigで設定したものと合わせる必要がある。

結果

../Hogeがsrc/Hogeのように呼べるように

完全な絶対パスではないけど限りなく近いものになったのでヨシ！