React Native + TypeScriptのパスエイリアス設定

執筆日: 2021-11-13

概要

エイリアスとは、あるフォルダのパスを短い名称で表現したものです。
パスのエイリアスなので設定すると少ない記述で、かつパス指定のミスも削減できます。

今回はReact Native + TypeScriptの環境で設定する方法をご紹介します。
環境はexpoを使用している前提です。

目標

以下の相対パスの記述を

import componentA from '../../components/organisms/compnentA'
import moduleA from '../utils/moduleA'

srcディレクトリを基準とした書き方を目指します。

import componentA from '@src/components/organisms/compnentA'
import moduleA from '@src/utils/moduleA'

tsconfig.json設定

tsconfig.jsonにコンパイルが通るように追記します。

tsconfig.json
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"]
    }
}

babel.config.js

モジュール解決のためのプラグインを取得します。

npm install -D babel-resolver

取得後、babel設定ファイルに追記します。

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

これで@srcsrc/として認識されるようになります。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

SNS

SNSも積極的に配信しています。
よければフォローお願いします!

© 2021 天然珈琲店