React Componentを相対パスでimportするのはもう嫌なので、絶対パスでimportしてやる

相対パスの悲劇

実話1. 階層をさかのぼってimportするのがツラい

最初の内は相対パスでもまだ良かったんです・・
階層も少なかったしシンプルな構成だったので
import TextBox from "./**/TextBox"
という風に書いても別に問題なかったんですよ、ええ。

でもですよ？アプリケーションが大きく複雑になるにつれて相対パスを書くのが辛くなってきたんです・・！
commonディレクトリにアプリケーション共通のComponentを置いたのは良いんですが、そうするとパスをさかのぼってimportするのが煩わしい
import TextBox from "../**/**/common/**/TextBox"
もうパスを書くだけで、「えーとこのファイルは今この場所だから2階層さかのぼってからこういって・・、あ、違った！3階層だった！・・ってもうこんなんやってられんわ！」となりました(涙)

実話2. Componentの場所が変わるとimportも修正

↑の例で
import TextBox from "../**/**/common/**/TextBox"
を行っているComponentの場所が変わるとしましょう。
よくある子コンポーネント化をすることになって階層が更に深くなりましたと。

すると相対パスなのでimportもわざわざ修正しなきゃいけないですね。
import TextBox from "../**/**/**/common/**/TextBox"

・・・うわ、めんどくーさーいー。
もう相対パスなんて嫌だ（涙)

絶対パスでimportしてやる

というわけで今後の為にも、相対パスはやめて絶対パスでimportしましょうということになりました。
実はこれ意外に簡単に出来ました。
そう、babel-root-importのパッケージを使えばね(キリッ)
このパッケージを用いることによって、リンクのページに載っているように絶対パスで以下のように分かりやすくimportすることが出来ます。

// Usually 
import SomeExample from '../../../some/example.js';
const OtherExample = require('../../../other/example.js');

// With Babel-Root-Importer 
import SomeExample from '~/some/example.js';
const OtherExample = require('~/other/example.js');

babel-root-import

導入

導入は簡単。

手順1　npmインストールを行い
npm install babel-root-import --save-dev

手順2　.babelrcに以下の行を追加するだけです

{
  "plugins": [
    ["babel-root-import"]
  ]
}

使い方

デフォルトではnode_modulesがある階層をrootとみなして絶対パスの指定を行います。

今回絶対パスでのimportを試す為にサンプルのReactアプリケーションを作りましたので、このサンプルを例に具体的な使い方を説明します。
https://github.com/endam/react-root-import

ローカルに落として頂いた後、src/index.jsxを見ると子コンポーネントを絶対パスでimportをしています。

import MessageBox from "~/src/elements/MessageBox.jsx";

class App extends React.Component {

これだけでも良いんですが、実際はrootパスを違う場所に指定したいことがあります。
そんな時は.babelrcを修正しましょう。

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathSuffix": "src"
    }]
  ]
}

rootPathSuffixというオプションでrootパスを指定できます。
srcディレクトリがrootになったので、importもより簡潔になります。

// import MessageBox from "~/src/elements/MessageBox.jsx";
import MessageBox from "~/elements/MessageBox.jsx";

class App extends React.Component {

もう一つ。rootを表す記号はデフォルトで「~」ですが、もし好みで変えたい場合でrootPathPrefixオプションで変更可能です。

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathPrefix": "@",
      "rootPathSuffix": "src"
    }]
  ]
}

試しにrootの記号を「@」に変えてみました。

import MessageBox from "@/elements/MessageBox.jsx";

class App extends React.Component {

babel-root-importでもう相対パスに悩まされずに済むようになりました。
皆さんもゼヒお試しください