はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【絶対パスでimportできるようにする】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

• 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

さいごに

特にpackageの追加することなくExpo内の設定ファイルを編集するだけで実現ができました

yutanakano

WEBエンジニア

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

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

愛車は Ninja ZX-25R SE KRT EDITION

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