White Space
WebLife

【Javascript/Babel】import した時にパスにエイリアスを付けて省略できるようにする

  • Javascript

import 構文を使ってファイルを読み込んでいる時、ファイルの場所によってはパスが長くなることがあります。

import MyModule from '../../../../../common/_src/components/MyModule'

今回はこの../../../../../common/_src/componentsまでのパスに名前をつけて、もう少し短く省略できるようにします（babel を使用していることを前提としてます）

babel-plugin-module-resolver を使う

npm か yarn でbabel-plugin-module-resolverをインストールします。

// npm
npm install --save-dev babel-plugin-module-resolver

// yarn
yarn add -D babel-plugin-module-resolver

package.jsonと同じ階層にある.babelrcもしくはbabel.config.jsに設定を記述します。

.babelrc の場合

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@common-components": "../common/_src/components",
      }
    }]
  ]
}

babel.config.js の場合

...
plugins: [
  ...
  ["module-resolver", {
    "alias": {
      "@common-components": "./common/_src/components",
    }
  }],
 ...
],
...

今回は例として、@common-componentsで./common/_src/componentsまでアクセスできるようにします。

エイリアスと分かりやすくするために@をつけています。必須ではありませんが、何かしらの接頭辞をつけておくことをおすすめします。

モジュールパスの書き換え

設定できたら先程のモジュールの読み込みパスを修正します。

- import MyModule from '../../../../../common/_src/components/MyModule'

+ import MyModule from '@common-components/MyModule'

これでcomponentsまでのパスがすっきりしました。

参考