importを絶対パスで書く

追記: 2016/7/6にこの記事を書きましたが、最近このあたりの知識更新できてないので内容が古くなっていると思います。

ES Modulesでjsを書いてると、相対パス地獄的なことになってきます。

import baz from '../../../src/foo/bar/baz'

これをプロジェクトのルートからの絶対パスで書きたいわけですが方法はいくつかあります。

1. (babelを使っている場合) babel-plugin-module-aliasを使う
2. browserify, webpackの設定でやる
3. （他にもある？）

テストでjsをバンドルしない場合は1.にしておき、mocha --compilers js:babel-core/register ...とするとbabelが動き絶対パスが解決されるのでナイスです。

babel-plugin-module-aliasをインストールして、.babelrcに設定を追記すれば完了です。設定次第では深いところにあるモジュールを引っ張りだして別名で参照することもできます。

.babelrc

{
  "plugins": [
    ["module-alias", [
      { "src": "./src", "expose": "src" }
//    { "src": "./src/foo/bar/blah/blah/baz", "expose": "bazu" }
    ]]
  ]
}

絶対パス！

import baz from 'src/foo/bar/baz'

ESLint, flowが文句を言うのですが

そのままだとESLintのimport/no-unresolvedルールとflowがエラーを出すので、ESLintには見逃してもらい、flowにはパスを教えてあげます。

.eslintrc

{
  "rules": {
    "import/no-unresolved": [2, { ignore: ['^src'] }]
  }
}

.flowconfig

[options]
module.name_mapper='^src/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

追記

ESLintでもモジュール解決できるようにするeslint-import-resolver-babel-module-aliasというのがありました