はじめに

チャレンジする背景

• Expoを使って開発している中で相対パスになっているところがあり分かりづらい

チャレンジ内容

• 絶対パスでimportできるようにする

結果

• できました

理由

前提条件

• Expo(v44)のProjectをTypescriptで新規作成しました

対象のファイル

• 今回編集するのは下記の2ファイルのみです
• tsconfig.json
• babel.config.js

実現方法

• 編集前の状態
• tsconfig.json
Copy

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

• babel.config.js
Copy

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

• 必要な設定を追加した状態
• tsconfig.json
Copy

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@applications/*": ["./src/applications/*"],
      "@domains/*": ["./src/domains/*"]
    }
  }
}

• babel.config.js
Copy

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

確認方法

• 実際に相対パスでimportしているファイルを上記で設定した絶対パスに置き換えてください
• 下記は一例

import { example } '@applications/example'

まとめ

• 編集するファイルは2つだけです
• tsconfig.json
• babel.config.js

さいごに

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています