Config alias chuẩn trong webpack
webpack
11
White

Tuấn Nguyễn viết ngày 05/12/2019

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.
eslint-alias
Texteditor cụ thể là mình đang sử dụng là VSCode không gợi ý.
alt text
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.

Tài liệu tham khảo

[1]. Configuring absolute paths in React for Web without ejecting [en-US]
[2]. Webpack doc
[3]. What is jsConfig?

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tuấn Nguyễn

5 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 1
Vấn đề Hôm nay mình ngồi làm project Calculator trong FreeCodeCamp cần implement thuật toán tính biểu thức trung vị. Nhưng trước hết...
Tuấn Nguyễn viết hơn 1 năm trước
3 1
White
2 3
Đặt vấn đề Khi viết RestApi ta chỉ thường chọn một số thông tin để truyền về client. Ví dụ như thông tin user thì không cần truyền password chẳng h...
Tuấn Nguyễn viết hơn 1 năm trước
2 3
White
1 1
Khái niệm Data Flow Testing là kĩ thuật kiểm thử sử dụng Control Flow Graph (CFG) để tìm ra những nguy cơ tiềm tàng cho việc sử dụng dữ liệu. Ví d...
Tuấn Nguyễn viết gần 2 năm trước
1 1
Bài viết liên quan
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 11 tháng trước
4 0
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 12 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 12 tháng trước
4 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!