Config alias chuẩn trong webpack (ok)

https://kipalog.com/posts/Config-alias-chuan-trong-webpack

Alias là gì?

Alias là đường dẫn tuyệt đối thay thế cho đường dẫn tương đối khi import các module. Ví dụ như sau:

// thay vì  dùng
import Menu from '../../../components/Menu';
// thì dùng
import Menu from '@components/Menu';

Cách bên dưới chính là sử dụng alias.

Thế nào là config chuẩn?

Thông thường để config alias trong một project frontend sử dụng webpack. Theo doc chỉ cần config như sau: webpack.config.js

module.exports = {
//..
    resolve: {
        alias: {
            '@components': path.resolve(__dirname, './src/components'),
        }
    }
}

Làm như vậy ta mới giải quyết một vấn đề là cho webpack hiểu được "@components" là gì. Còn 2 vấn đề nữa ta mắc phải đó là: Eslint không hiểu và báo lỗi. Texteditor cụ thể là mình đang sử dụng là VSCode không gợi ý. Vậy config chuẩn alias phải thỏa mãn 3 yếu tố:

1. Webpack hiểu

2. Eslint không báo lỗi

3. VSCode gợi ý được

Cách thực hiện

Webpack hiểu

Ta thực hiện như trên webpack.config.js

module.exports = {
//..
    resolve: {
        alias: {
            '@components': path.resolve(__dirname, './src/components'),
        }
    }
}

Eslint không báo lỗi

Ta add thêm thư viện sau đây

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

Add đoạn code sau đây .eslintrc.js

settings: {
    "import/resolver": {
        alias: [
            ["@components", "./src/components"],
        ]
    },
 },

VSCode gợi ý được

Để VSCode hiểu và gợi ý được thì ta add thêm file jsConfig.json ở đầu project như sau.

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

Bạn nhớ để dấu * sau @components nhé.

Kết luận

Trên đây là cách mình config alias vào project sử dụng webpack của mình. Việc config như vậy sẽ giúp tìm các thành phần dễ hơn, code cũng đẹp hơn và chuyên nghiệp hơn.