Absolute Imports and Module Path Aliases

說明如果在不同情況下使用 Absolute Imports / Module Path Aliases。

TypeScript

首先在 tsconfig.json 中加上下述設定：

tsconfig.json

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

如此就可以在 import @/foo/bar 時，實際載入 ./src/foo/bar。

ESLint

搭配 TypeScript 的 tsconfig

import-resolver-typescript @ github

由於 ESLint 並不會自動去讀 tsconfig.json 的檔案，這時候可以使用 eslint-import-resolver-typescript，然後在 .eslintrc 中使用：

// https://github.com/import-js/eslint-import-resolver-typescript
{
  "rules": {
    "import/no-unresolved": "error"
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "tsconfig.json"
      }
    }
  }
}

如此 ESLint 就不會報錯。

搭配 Babel

如果專案中有使用 import alias 的話，則可以不使用 node 而是使用 eslint-import-resolver-babel-module：

$ npm install --save-dev eslint-import-resolver-babel-module babel-plugin-module-resolver

設定檔：

// .eslintrc.js
const allExtensions = ['.ts', '.tsx', '.d.ts', '.js', '.jsx', '.json'];
module.exports = {
  settings: {
    'import/resolver': {
      // 如果需要搭配 import alias 可以用 eslint-import-resolver-babel-module
      'babel-module': {
        alias: {
          '@': './',
        },
        extensions: allExtensions,
      },
    },
  },
};

Vite

vite.config.js

直接在 vite.config.js 中加上：

import * as path from 'path';

export default defineConfig({
  // ..
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

如此就可以把 @ 變成是 src 的 alias。

搭配 TypeScript 的 tsconfig

vite-tsconfig-paths @ github

如果有使用 TypeScript 的話，可以直接搭配使用 vite-tsconfig-paths，這個 vite pluging 會自動讀取 tsconfig 中的設定來建立 vite 的 alias。

import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
});

Next.js

Absolute Imports and Module path aliases @ Next.js

參考資料

• How to use absolute Imports using React with Ts and Vite @ dev.to
• Absolute path not working in Vite project React TS @ StackOverflow