aliasを使ったJS開発 & VSCodeでaliasエラーになる時の解決法

下記の環境での話をしますが、特に全てに当てはまらなくても解決できると思います

• VSCode
• webpack
• babel
• typescript
• React

alias(エイリアス)について

簡単にaliasについて説明します。JSを書いてると、importして他のコンポーネントを使うということがよくあると思いますが、その際に相対パスで指定すると、なかなか大変ですよね。特に階層が深くなってくると、いくつ戻っていくつ進むんだ・・・という事になってきます。aliasを使うと「ある場所からのpath」という指定ができるようになるので、そのあたりが簡単になります。

aliasなしの場合の例

import ArticleComponent from '../../../base/articles/ArticleComponent'

aliasあり（例として上記のbaseのところを起点としています）

import ArticleComponent from '@/articles/ArticleComponent'

alias設定方法

まずは webpack.config.js 内に下記のように書きます。

module.exports = {
  entry: {
    ..
  },
  ...
  resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
     modules: [...resolvedPaths, 'node_modules'],
     alias: {
       '@': resolve(__dirname, 'src/base/')
     }
   },
}

次にtypescript用に tsconfig.json を編集します。

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

最後に babel.config.js も変更しておきます。

      [
        require('babel-plugin-module-resolver').default,
        {
          root: ['./'],
          extensions: [
            '*',
            '.webpack.js',
            '.web.js',
            '.js',
            '.jsx',
            '.ts',
            '.tsx',
            '.scss',
            '.json'
          ],
          alias: {
            '@': ['./src/base']
          }
        }
      ],

これでおおよその場合、エイリアスを使えるようになっていると思います。

それでもVSCodeでエラーになる

compileは通っていて開発も普通にできるけど、VSCodeのエラーが解消されない。。。 Cannot find module '@/xxx' というエラーが出る、という方は tsconfig.json のincludeが邪魔していないか確認してみてください。私はこれが原因で数時間ロスしました。

ついでにJestでalias(エイリアス)を使いたい

上記までの作業でaliasが使えるようになったら当然jestなどのテストでも使いたくなってくると思うのですが、そのままでは使えません。 jest.config.js に、下記のように付け足してaliasの設定をしましょう。

  moduleNameMapper: {
    '^@(.*)$': '<rootDir>/src/base/$1'
  }

aliasを使うとだいぶ効率上がりますね。