跳至主要内容

[note] 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 plugin 會自動讀取 tsconfig 中的設定來建立 vite 的 alias。

import tsconfigPaths from 'vite-tsconfig-paths';

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

Next.js

Absolute Imports and Module path aliases @ Next.js

參考資料