Không cho phép import với ESlint

Với ESlint chúng ta có thể cấm import những thư viện lớn, tránh để bà con trong team import tá lả.

Sử dụng rule no-restricted-imports

Ví dụ chúng ta nghiêm cấm import moment.js, một thư viện khiến cục bundle của chúng ta phình to. Nếu được các bạn nên cân nhắc sử dụng date-fns hoặc Luxon

{
  "rules": {
    "no-restricted-imports": ["error", {
      "paths":  [{
        "name": "moment",
        "message": "Sử dụng date-fns hoặc Luxon đi cưng à"
      }]
    }]
  }
}

Khi bọn nó cố ý import sẽ nhận được cảnh báo

import moment from 'moment';

Ví dụ khác, chặn ko cho import lodash, khuyến cáo dùng lodash-es

{
  "rules": {
    "no-restricted-imports": ["error", {
      "name": "lodash",
      "message": "Use lodash-es instead!",
    }],
  }
}

Có thể dùng message mặc định, truyền vào một mảng các thư viện bị cấm

{
  "rules": {
    "no-restricted-imports": ["error", "underscore", "bluebird"]
  }
}

Trong trường hợp phức tạp hơn, chúng ta có thể chặn tất cả những module nào khớp với pattern legacy/*, kiểu như import helpers from 'legacy/helpers' là cấm

{
  "rules": {
    "no-restricted-imports": ["error", {
        "patterns": ["legacy/*"]
    }],
  }
}

Disallow large imports from JavaScript projects

Không cho phép import với ESlint