3 tips để import gọn hơn trong ES6

Xin chào các bạn, đầu năm xin chúc các bạn 1 năm mới tràn đầy sức khoẻ, hạnh phúc bên gia đình và làm việc thật hiệu quả, gặt hái được nhiều thành công trong cuộc sống Giới thiệu Trong các dự án Javascript thường các bạn thường thì sử dụng tới đâu import đến

Xin chào các bạn, đầu năm xin chúc các bạn 1 năm mới tràn đầy sức khoẻ, hạnh phúc bên gia đình và làm việc thật hiệu quả, gặt hái được nhiều thành công trong cuộc sống

Giới thiệu

Trong các dự án Javascript thường các bạn thường thì sử dụng tới đâu import đến đấy phải không?

Hoặc nếu rõ ràng hơn thì chia những dòng import theo định nghĩa hoặc chức năng khác nhau
Screen Shot 2023-01-31 at 21.06.15.png
Với ví dụ trên thì chỉ có vài dòng nhưng nếu sử dụng nhiều functions, biến hoặc các components từ các folder khác thì chỉ với những dòng import đã lên tới hơn 50 dòng
Để khắc phục vấn đề này thì hôm nay mình chia sẻ cho các bạn 1 vài mẹo để những dòng import trông gọn gàng và sạch hơn

Có 3 mẹo import gọn gàng

1. Barrel Pattern
Là việc gôm nhóm nhiều components riêng lẻ (A, B, C, D,…) trong 1 file duy nhất One, nên chỉ cần import tới file One rồi gọi các components khác ra mà sử dụng thôi

  • Tạo 1 file index.js trong folder columns
    Screen Shot 2023-01-31 at 21.24.00.png
  • Sử dụng componenet trong các file khác
    Screen Shot 2023-01-31 at 21.26.18.png
    Như vậy chỉ với 1 file tổng hợp duy nhất thì các file sử dụng components có thể import ngắn gọn hơn hẳn
    Sử dụng aliases
    Như hình ở đầu bài thì sau mỗi from thì có rất nhiều dấu . và dấu / nhìn rất rối mắt. Như v thì cần phải setup alias, alias có những lợi ích:
  • rút ngắn mỗi dòng import
  • khi import ở những file khác nhau nhưng string sau from là không đổi
    Tải package này về npm i babel-plugin-module-resolver hoặc yarn add babel-plugin-module-resolver.
    Có 2 kiểu không sử dụng Typscript và sử dụng Typescript
    Không sử dụng Typescript
    Tạo file babel.config.js và thêm những dòng này vào
    Screen Shot 2023-01-31 at 21.41.10.pngSử dụng TypescriptSử dụng thư viện
    Prettier plugin sort imports: https://github.com/trivago/prettier-plugin-sort-imports
    Nó sẽ chuyển:
    Screen Shot 2023-01-31 at 21.54.16.png
    Thành
    Screen Shot 2023-01-31 at 21.54.46.png

Với 3 mẹo trên thì những dòng import của ae sẽ trở nên đẹp và gọn hơn rất nhiều. Và cuối cùng là chúc ae năm mới thật nhiều thành công nhá.

Nguồn: viblo.asia

Bài viết liên quan

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ

Cách sử dụng SFTP (Giao thức truyền file qua SSH an toàn hơn)

SFTP là cách an toàn để truyền files giữa các máy tính, gữa máy local và web hostin

Hotlinking: Key Reasons to Avoid and Methods to Protect Your Site

Hotlinking might seem an easy way to acquire website assets, but in reality, it brings several disad

Sự Khác Nhau Giữa Domain và Hosting Là Gì?

Sự khác nhau giữa domain và hosting là gì? Bài này giải thích ngắn và dễ hiểu nh